Форма компонентів - UIkit документація українською

Легко створювати форми з різною розміткою та стилями, які будуть чудово виглядати.

Використання

Для встановлення цього компонента додати .uk-form клас з елементом форми. Всі форми, елементи управління розміщені пліч-о-пліч протягом наступного рядка.

Примітка У цьому прикладі ми використовували кнопку Компонент Button. Щоб додати зверху відступ для елементів форми, коли вони укладають на невеликих видових екранів, просто додайте data-uk-margin атрибут з компонента Утиліта до батьківського елемента.

Контрольні стани

Надати користувачеві основну інформацію через зворотний зв'язок держави на елементи управління форми.

Додати disabled атрибут до форми управління та буде з'являтися приглушені.

Стан перевірки

Додати .uk-form-danger або .uk-form-success клас для елемента керування форми, щоб повідомити користувача, чи є чи ні значення перевіряється.

Модифікатори керування

Модифікатори розміру

Додати .uk-form-large або .uk-form-small клас до , або

Розмітка модифікаторів

Існує дві розмітки вільних модифікаторів: .uk-form-stacked та .uk-form-horizontal. Обидва вимагають елементів управління форми, обернувши з .uk-form-row класом для того, щоб скласти їх. Мітки потребують класу .uk-form-label і елементи керування повинні бути обернені до класу .uk-form-controls.

Примітка Розмітка модифікаторів також можна додати до елемента. Це означає, якщо ви використовуєте набір полів, ви можете мати різні форми, розмітки за кожен набір полів.

Форма звалили

Додати .uk-form-stacked клас для відображення міток на верхній частині керування.

Форми горизонтальної

Додати .uk-form-horizontalклас для відображення міток і контролює пліч-о-пліч.

Текст у елементах управління форми

Якщо ви використовуєте текст і чекбокси або радіокнопки у формі елементи керування, просто додайте клас .uk-form-controls-text, щоб вирівняти текст правильно.

Інтервал по вертикалі у елементах управління форми

Якщо ви створюєте пункти у елементи керування, додати .uk-form-controls-condensed клас, щоб скоротити відстань.

Форма та грід

Це приклад того, як використовувати форми з Грід компонент.

Форма та іконки

Це приклад того, як додати іконку від Компоненту іконок до форми.

Форма розширеного

Форма може бути розширена за допомогою параметра Форма розширеного компонента стиль радіо та чекбокс входів.

Зроблене YOOtheme З любов'ю та кофеїном. під ліцензією MIT.