Alert

Alert text // todo сделать отдельную кнопку
Alert text
Alert text
Alert text
Alert text

Badge

Новый в работе

Новый в работе

Новый в работе

Новый в работе

Новый в работе

Новый в работе

Новый в работе

Button

     

     

     

Button-Toggle

default 1 default 2 default 3 default 4 default 6
Selected value: {{ group1.value }}




default 1 default 2 default 3
Selected value: {{ disabledGroup.value }}

default 1 default 2 default
Selected value: {{ multipleGroup.value }}

default 1 default 2 default 3
Model result: {{ buttonToggleModelResult }}

Checkbox

Default

Checked

Indeterminate

Default disabled

Checked disabled

Indeterminate disabled

Checkbox without label

Text outside checkbox

Dropdown




Additional info

Icons

default primary secondary error



disabled
default primary secondary error



light
default primary secondary error

Input





With placeholder and monospace:


With placeholder and hint:
Hint under field

With placeholder, hint and disabled:
Hint under field

With clear-button:


With prefix:


With suffix:


Invalid with clear-button:


With placeholder, hint, prefix, cleaner and disabled:


Without borders:

Link

Disabled Normal
Сохранить Сохранить
Сохранить Сохранить
Сохранить Сохранить
Сохранить Сохранить

List

Disabled Normal Hovered Focused Selected

Modal

Progress bar

Progress spinner

Radio

@for (season of fruits; track season) { {{ season }} }

Disabled buttons

@for (data of selectionList; track data) { {{ data.name }} }

Select

Disabled Normal Hovered Focused Selected Selected1 Selected2 Selected3 Selected4 Selected5 Selected6 Selected7 Selected8 Selected9 Selected10

Normal

Normal

Disabled Normal Hovered FocusedFocusedFocusedFocusedFocusedFocusedFocusedFocusedFocusedFocused Selected Selected1 Selected2 Selected3 Selected4 Selected5 Selected6 Selected7 Selected8 Selected9 Selected10

Normal Hovered Selected Selected1

Normal Hovered Selected Selected1

Tag

Normal Hovered Focused Disabled

Normal Hovered Focused Disabled

Normal Hovered Focused Disabled

mono
Normal Hovered Focused Disabled

Normal Hovered Focused Disabled

Normal Hovered Focused Disabled

CAPS
Normal Hovered Focused Disabled

Normal Hovered Focused Disabled

Normal Hovered Focused Disabled

Textarea



monospace:


disabled:


Invalid:


Without border:

Timepicker


Toggles

Small Toggles

Quack like a duck
Quack like a duck

Big Toggles

Quack like a duck
Quack like a duck

Small Toggles

Quack like a duck
Quack like a duck

Big Toggles

Quack like a duck
Quack like a duck

Tooltip




Tree

{{ treeControl.getViewValue(node) }} {{ treeControl.getViewValue(node) }}

Groups





Normal Hovered Selected Selected1

Normal Hovered Selected Selected1