Question

这应该很简单，但是我找不到简单的解决方案。我只是想在我的DropDown State选择旁边有一个“ State”标签，以使其与指定了Label的Control一样。

有没有办法做到这一点？

我尝试使用，但是在设置下拉列表的Fluid属性时不起作用。

              <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>

查看此外观的屏幕截图。我只希望标签与“城市”输入字段一样显示：

Answer 1

该下拉列表组件当前不支持标签，但是您仍然可以使用此标签实现相同的效果

<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

如何将标签添加/对齐到语义UI DropDown控件

1 个答案: