Как установить layout= "horizontal" внутри для нескольких при сохранении в ant design

#javascript #reactjs #antd

Вопрос:

У меня <Form> есть layout=»vertical», но внутри этой формы я хочу установить для некоторых элементов layout=»horizontal» .

Я попробовал <Input.Group compact> , который отображается <Form.Item> в той же строке, но мне также нужна метка «testLabel» поля <Form.Item> и <Input/> в одной строке.

            <Form
            layout="vertical"
            size="medium"
           >
                 <Input.Group compact>
                          <Form.Item label={product.productName   " : "} />
                        <Form.Item label={"TestLabel"} >
                             <Input />
                        </Form.Item>
                 </Input.Group>
          </Form>

Однако «testLabel» и поле ввода выровнены по вертикали, но я хочу, чтобы они были выровнены по горизонтали. Я использую React с дизайном Ant.

Ответ №1:

Я только что столкнулся с этой проблемой, и способ, которым я ее решил, заключался в том, чтобы установить макет формы в горизонтальное положение, а элементы формы, которые я хочу сделать вертикальными, установить labelCol={{ span: 24 }} , т. Е. Полную ширину, которая переместит поле ввода на следующую строку. Для вас, я думаю, это будет выглядеть примерно так:

 <Form
    layout="horizontal"
    size="medium"
>
       <Input.Group>
           <Form.Item label={product.productName   " : "} />
           <Form.Item label={"TestLabel"} labelCol={{ span: 24 }}>
               <Input />
           </Form.Item>
       </Input.Group>
</Form>

Ответ №2:

Чтобы решить эту проблему, я создал два класса и применил их в Form.Item и в Input

В вашем css:

 .classA {
  display: flex;
  flex-direction: row;
}

.classB {
  margin-left: 10px;
}

В вашем html:

 <Form
  layout="vertical"
  size="medium"
>
  <Form.Item
    name='input-name'
    label='input-label'
    className='classA '
  >
    <InputNumber className='classB' />
  </Form.Item>
</Form>