Как добавить / выровнять метку в элемент управления DropDown семантического пользовательского интерфейса - PullRequest
Новая
       16

Как добавить / выровнять метку в элемент управления DropDown семантического пользовательского интерфейса

0 голосов
/ 24 апреля 2019

Это должно быть просто, но я не могу найти легкого решения. Я просто хочу, чтобы рядом с моим выбором 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: enter image description here

1 Ответ

0 голосов
/ 25 апреля 2019

Выпадающий компонент не поддерживает метки в настоящее время, но вы все равно можете добиться того же эффекта, используя эту 

<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

...