时间戳

首页 > 解决方案 > 如何将标签添加/对齐到语义 UI 下拉控件

reactjs - 如何将标签添加/对齐到语义 UI 下拉控件

问题描述

这应该很简单，但我找不到简单的解决方案。我只是想在我的 DropDown State 选择旁边有一个“State”标签，就像在指定标签的控件中一样。

有没有办法做到这一点？

我试过使用，但是当我设置下拉列表的流体属性时它不起作用。

              <Grid.Row>   
                <Grid.Column width={8} >
                <Form.Field inline>
                <Input width="600px" fluid readOnly={checkInputActive(city)} label="City"  name="city" placeholder="Enter your City" value={city}  onChange={onCityChange} />
                </Form.Field>
                </Grid.Column>
                <Grid.Column verticalAlign="middle">
                   <Icon size="big" color="green" name="edit outline" />
                </Grid.Column>
            </Grid.Row>
            <Grid.Row>   
                <Grid.Column width={8} >
        <Form.Field inline>
       <Label>State</Label>
        <Dropdown labeled value={stateLocation} label="State" fluid inline search options={stateOptions} selection placeholder="Select your State" />
        </Form.Field>
        </Grid.Column>
        <Grid.Column verticalAlign="middle">
        <Icon name="edit outline" />
        </Grid.Column>
        </Grid.Row>

请参阅此外观的屏幕截图。我只希望标签显示为与 City 输入字段一样： 在此处输入图像描述

标签： reactjssemantic-ui

解决方案

下拉组件目前不支持标签，但您仍然可以使用它达到相同的效果

<Input
  label="Country"
  fluid
  input={
    <Dropdown
      placeholder="Select Country"
      fluid
      search
      selection
      options={countryOptions}
      style={{
        borderRadius: "0 4px 4px 0"
      }}
    />
  }
/>

您需要手动设置边框半径，因为它当前不受支持，因此它不会附加到标签上。

https://codesandbox.io/s/6yk4k02myr?module=%2Fexample.js

推荐阅读