Формы ясности - поместите несколько элементов ввода в одну строку - PullRequest
Новая
       85

Формы ясности - поместите несколько элементов ввода в одну строку

0 голосов
/ 29 января 2020

Я пытаюсь использовать Формы ясности , чтобы создать что-то вроде ниже:

Design: Multi fields on same row

Однако, похоже, что все Элементы ввода Clarity при использовании внутри формы переносятся в <clr-xxx-container>, к которому применен класс clr-row. Таким образом, кажется невозможным поместить два элемента ввода рядом друг с другом и использовать элементы формы Clarity.

Верно ли мое понимание или я что-то упустил?

Мой код выглядит следующим образом: 

   <form clrForm clrLayout="horizontal">
        <clr-input-container>
            <label>Disk Capacity</label>
            <input clrInput type="text" [(ngModel)]="model" name="example" required />

            <clr-control-helper>Disk capacity to add to VM</clr-control-helper>
            <clr-control-error>Error message that appears after focus is lost and control is invalid</clr-control-error>
        </clr-input-container>
        <select clrSelect name="options" [(ngModel)]="options">
            <option value="GB">GB</option>
            <option value="TB">TB</option>
            <option value="PB">PB</option>
        </select>
    </form>

StackBlitz: https://stackblitz.com/edit/clarity-v2-forms-issue

1 Ответ

1 голос
/ 29 января 2020

Clarity имеет базовый дизайн c, но пока не имеет встроенной поддержки Angular. Для этого вам придется использовать версию форм HTML / CSS, поскольку мы еще не определили, как выполнить встроенную проверку с несколькими элементами управления в одной строке.

См. Демонстрационный источник здесь: https://github.com/vmware/clarity/tree/master/src/dev/src/app/forms/input-group

В долгосрочной перспективе, это запрос функции здесь: https://github.com/vmware/clarity/issues/3778

...