LaravelRUS UI

HTML Elements

Headings

Тег Пример
<h1>

Header 1
<h2>

Header 2
<h3>

Header 3
<h4>

Header 4
<h5>
Header 5
<h6>
Header 6
<h… class="underline"> …

Header 3

…
<h…><a class="anchor"> …

Header 3

…

Custom Elements

Button

Свойства

Название Тип Значение по умолчанию Описание
disabled Boolean false Отключаем кнопку/ссылку
loading Boolean false Показывать индикатор загрузки
title String null Текст тултипа
name String "" Имя компонента
view Одно из:
  • "primary"
  • "simple"
  • "flat"
 "primary" Стиль кнопки
href String null Если указан href, то кнопка будет ссылкой
target Одно из:
  • "blank"
  • "parent"
  • "self"
  • "top"
 "self" Атрибут target для ссылки, если указан атрибут href

События

Название Описание
@click Происходит при нажатии на кнопку

Примеры

Тип Пример
<ui-button title="Hover me"> Primary
<ui-button :disabled="true"> Primary
<ui-button :loading="true"> Loading…
<ui-button title="Hover me" view="simple"> Simple
<ui-button view="simple" :disabled="true"> Simple
<ui-button view="simple" :loading="true"> Loading…
<ui-button title="Hover me" view="flat"> Flat
<ui-button view="flat" :disabled="true"> Flat
<ui-button view="flat" :loading="true"> Loading…

Input

Свойства

Название Тип Значение по умолчанию Описание
disabled Boolean false Отключаем кнопку/ссылку
loading Boolean false Показывать индикатор загрузки
title String null Текст тултипа
placeholder String null Описание поля
focus Boolean false Выбрать поле редактируемым
name String "" Имя компонента
value String "" Значение компонента
type Одно из:
  • "text"
  • "email"
  • "tel"
  • "url"
  • "search"
 "text" Тип текстового поля
view Одно из:
  • "primary"
  • "flat"
 "primary" Стиль текстового поля

События

Название Описание
@input Происходит при нажатии измении значения текстового поля
@focus Происходит при получении фокуса
@blur Происходит при сбросе фокуса

Примеры

Тип Пример
<ui-text value="Example">
<ui-text title="Hover me" placeholder="Write here something...">
<ui-text :disabled="true">
<ui-text :loading="true" value="Loading...">
<ui-text view="flat" value="Example">
<ui-text view="flat" :disabled="true" value="Disabled">
<ui-text view="flat" :loading="true" value="Loading...">

Password

Свойства

Название Тип Значение по умолчанию Описание
Все свойства полностью наследуются из <ui-text>
tipShow Boolean "Show password" Тултип с описанием состояния скрытого пароля
tipHide String "Hide password" Тултип с описанием состояния видимого пароля
tipVisible String "visible" Суффикс для плейсхоледра, если пароль видимый

События

Название Описание
Все события наследуются из <ui-text>
@change-visibility Происходит при смене "видимости" пароля

Примеры

Тип Пример
<ui-password value="password">
<ui-password value="password" tip-show="Показать пароль" tip-hide="Скрыть пароль">
<ui-password placeholder="Введите пароль" tip-visible="отображается">

Select и Option

Свойства select

Название Тип Значение по умолчанию Описание
disabled Boolean false Отключение доступа к выпадашке
loading Boolean false Показывать индикатор загрузки
title String null Текст тултипа
name String null Имя компонента
active Boolean false Сделать выпаджашку активной (раскрыть)
size Number 5 Максимальное видимое количество элементов в списке
placeholder String "Select a value..." Текст в выпадашке без выбранного значения

Свойства option

Название Тип Значение по умолчанию Описание
disabled Boolean false Отключение доступа к элементу выпадашки
loading Boolean false Показывать индикатор загрузки
title String null Текст тултипа
value Any null Значение выбранного элмента. При выборе элемента значение передаётся в select
default Boolean false При указании значения true - поле выбирается по умолчанию
text String "" Текст, который будет выбран в качестве заголовка родительского select, в случае, если в качестве значения передан не текст, а DOM элемент.

События select

Название Описание
@open Происходит при открытии выпадашки
@close Происходит при закрытии выпадашки
@toggle Происходит при смении состояния выпадашки
@select Происходит при выборе значения выпадашки

События option

Название Описание
@select Происходит при выборе элемента

Примеры

Тип Пример 
<ui-select :size="4" :active="true">
    <ui-option value="1">Value</ui-option>
    <ui-option value="2" :disabled="true">Disabled</ui-option>
    <ui-option value="3" :loading="true">Loading...</ui-option>
    <ui-option value="4" title="Hover me">Hover me</ui-option>
    <ui-option value="5">
        Very long text ololololololol
    </ui-option>
    <ui-option value="6">
        <strong>Without text</strong>
    </ui-option>
    <ui-option text="This is custom text" value="7">
        <strong>With text</strong>
    </ui-option>
</ui-select>
 Value Disabled Loading... Hover me Very long text ololololololol Without text With text 
<ui-select :disabled="true" title="Tooltip example text">
    <ui-option :default="true" value="1">Selected value</ui-option>
    <ui-option value="2">Other value</ui-option>
</ui-select>
 Selected value Other value 
<ui-select :loading="true">
    <ui-option :default="true" value="1">Selected value</ui-option>
</ui-select>
 Selected value 
<ui-select :searchable="true">
    <ui-option value="1">First value</ui-option>
    <ui-option value="2">Second value</ui-option>
    <ui-option value="3">Third value</ui-option>
    <ui-option value="4">Fourth value</ui-option>
    <ui-option value="5">Fifth value</ui-option>
    <ui-option value="6">Sixth value</ui-option>
</ui-select>
 First value Second value Third value Fourth value Fifth value Sixth value 
<ui-select :searchable="true" :options="{
    1: 'First text',
    2: 'Second text',
    3: 'Third text'
}"></ui-select>

Tooltip

Свойства

Название Тип Значение по умолчанию Описание
Родитель должен содержать position: relative, position: absolute или position: fixed
direction Одно из:
  • "bottom"
  • "left"
  • "top"
  • "right"
 "bottom" Направление тултипа

Примеры

Тип Пример
<ui-tooltip direction="bottom"> Tooltip При наведении появится тултип снизу
<ui-tooltip direction="top"> Tooltip При наведении появится тултип сверху
<ui-tooltip direction="left"> Tooltip При наведении появится тултип слева
<ui-tooltip direction="right"> Tooltip При наведении появится тултип справа

Checkbox

Свойства

Название Тип Значение по умолчанию Описание
disabled Boolean false Отключаем чекбокс
title String null Текст тултипа
name String "" Имя компонента
checked Boolean false Поставить галочку изначально

События

Название Описание
@change Происходит при изменении состояния checked

Примеры

Тип Пример
<ui-checkbox> Checkbox
<ui-checkbox title="Hover me"> Checkbox
<ui-checkbox :checked="true"> Checked
<ui-checkbox :disabled="true"> По-настоящему CSS расшифровывается как «Ceaseless Screaming of the Sinner»