НачалоОсновыКомпонентыТексты
Обзор
Кнопка Кнопка-иконка Кнопка с меню Группа кнопок Кнопка-переключатель Группа переключателей
Бейдж Баннер Пустое состояние Индикатор прогресса Кольцо прогресса Сообщение в разделе Скелетон Индикатор загрузки Уведомление
Field Поле ввода Textarea Number input Number stepper Search field OTP input Поле телефона Чекбокс Радиогруппа Переключатель Слайдер Карточка выбора Редактирование на месте
Select family Select Combobox Multiselect Country select Выбор даты Выбор периода Выбор времени Календарь Выбор эмодзи
Диалог Шторка Поповер Меню Подсказка
Боковая панель Навигационное меню Вкладки Сегментированный переключатель Хлебные крошки Пагинация Дерево
Таблица Таблица данных Аватар Группа аватаров Тег Иконка Изображение
Текст Prose Ссылка Блок кода Kbd
Аккордеон Раскрывающийся блок Разделитель Область прокрутки Разделитель панелей Соотношение сторон
Заголовок страницы

Компоненты

Все компоненты Thykes, сгруппированные по назначению. Каждый из них веб-компонент и работает на любой странице, с фреймворком или без.

Действия

То, на что нажимают, чтобы что-то произошло.

  • Save changes

    Кнопка

    Кнопка выполняет одно действие или отправляет форму.

  • Кнопка-иконка

    Кнопка-иконка выполняет одно действие и вместо текста показывает одну иконку.

  • PublishSchedule

    Кнопка с меню

    Кнопка с меню соединяет основное действие и стрелку, которая открывает меню альтернатив.

  • CutCopyPaste

    Группа кнопок

    Группа кнопок соединяет связанные кнопки в один блок или ставит их на равном расстоянии.

  • Pin to top

    Кнопка-переключатель

    Кнопка-переключатель остаётся включённой или выключенной.

  • BoldItalicUnderline

    Группа переключателей

    Группа переключателей объединяет несколько кнопок-переключателей в одну панель инструментов, где включено может быть сколько угодно.

Обратная связь

Как интерфейс сообщает о статусе, прогрессе и событиях.

  • DraftStable

    Бейдж

    Бейдж с первого взгляда показывает статус или число.

  • Maintenance tonight at 22:00 UTC.

    Баннер

    Баннер — полоса во всю ширину вверху приложения для сообщения обо всём приложении или аккаунте. Внутрь можно положить что угодно.

  • No itemsAdd one to get started.Add

    Пустое состояние

    Пустое состояние занимает область, которая загрузилась, но показать в ней нечего.

  • Индикатор прогресса

    Индикатор прогресса показывает, какая часть задачи выполнена на известной шкале.

  • Кольцо прогресса

    Кольцо прогресса показывает дугой, какая часть задачи выполнена на известной шкале.

  • Your changes are saved automatically.

    Сообщение в разделе

    Сообщение в разделе говорит пользователю что-то об одной части страницы.

  • Скелетон

    Скелетон — серая фигура на месте содержимого, пока оно загружается. Из таких фигур собирают макеты загрузки.

  • Индикатор загрузки

    Индикатор показывает, что что-то загружается.

  • Уведомление

    Уведомление (toast).

Формы

Поля и контролы для ввода данных.

  • Field

    Field даёт одному полю формы видимую подпись, подсказку и сообщение об ошибке и называет поле для скринридеров.

  • Поле ввода

    Поле ввода принимает одну строку текста.

  • Textarea

    Textarea принимает текст в несколько строк.

  • Number input

    Number input принимает число, которое вводят с клавиатуры.

  • Number stepper

    Number stepper задаёт небольшое целое число кнопками − и +.

  • Search field

    Search field принимает поисковый запрос.

  • OTP input

    OTP input принимает короткий одноразовый код.

  • Поле телефона

    Поле телефона принимает международный номер.

  • Product updatesEvents

    Чекбокс

    Чекбокс включает или выключает один вариант в форме.

  • EmailPhone

    Радиогруппа

    Радиогруппа просит выбрать ровно один ответ из короткого списка.

  • Auto-save

    Переключатель

    Переключатель включает или выключает одну настройку, и изменение применяется сразу.

  • Слайдер

    Слайдер задаёт примерное число или диапазон.

  • Pro$29/mo

    Карточка выбора

    Карточка выбора.

  • Редактирование на месте

    Редактирование на месте показывает значение обычным текстом и по нажатию превращает его в поле.

Выбор

Выбор значений из списка, календаря или набора.

Всплывающие окна

Поверхности, которые открываются поверх страницы.

  • Rename projectThe new name shows everywhere.
    CancelRename

    Диалог

    Диалог — модальное окно поверх страницы: его завершают или закрывают, прежде чем вернуться к странице. tk-dialog вмещает короткую задачу, tk-confirm-dialog подтверждает одно действие.

  • FiltersUnreadStarred

    Шторка

    Шторка — модальная панель, которая выезжает с края экрана. Её ещё называют выдвижной или боковой панелью.

  • Filters
    OpenClosed

    Поповер

    Поповер — небольшая панель, которая открывается рядом с кнопкой. В ней могут быть кнопки, ссылки и поля. Страницу он не блокирует.

  • RenameDuplicateDelete

    Меню

    Меню — список действий, который открывается от кнопки. Выбор пункта выполняет команду; никакое значение не сохраняется. Его ещё называют выпадающим меню, меню действий или меню «ещё».

  • Copy link

    Подсказка

    Подсказка.

Навигация

Переходы между страницами, разделами и видами.

  • OverviewProjectsSettings

    Боковая панель

    Боковая панель.

  • PricingDocs

    Навигационное меню

    Навигационное меню.

  • ProfileAlertsBilling

    Вкладки

    Вкладки переключают разделы содержимого на месте, по одному разделу за раз.

  • ListGrid

    Сегментированный переключатель

    Сегментированный переключатель меняет вид одного и того же содержимого, например список или сетку.

  • HomeDocsBreadcrumb

    Хлебные крошки

    Хлебные крошки показывают, где находится страница в глубокой иерархии.

  • 123

    Пагинация

    Пагинация делит длинный список на пронумерованные страницы и переключает их.

  • Дерево

    Дерево показывает вложенные элементы, например файлы и папки, строками, которые раскрываются и сворачиваются на любую глубину.

Данные

Записи, люди и метки.

  • RegionQ1
    North1,204
    South987

    Таблица

    Table оформляет обычную <table>, которую вы пишете сами, и даёт прокрутить её с клавиатуры, если она не помещается по ширине.

  • Таблица данных

    Data table строит таблицу из ваших строк и описаний столбцов.

  • Аватар

    Аватар показывает, кому или чему что-то принадлежит.

  • Группа аватаров

    Группа аватаров показывает несколько аватаров внахлёст и кнопку «+N» со списком остальных.

  • ResearchHiking

    Тег

    Тег относит что-то к категории.

  • Иконка

    Иконка рисует один знак из иконочного шрифта Thykes.

  • Изображение

    Image показывает картинку с заглушкой на время загрузки, запасным видом при ошибке и ленивой загрузкой, а alt остаётся верным в любом состоянии.

Текст

Роли текста, ссылки, код и клавиши.

  • Billing historyRenews on 27 March.

    Текст

    Text выводит фрагмент текста в одной из типографских ролей системы.

  • Body text with inline code and emphasis.

    Prose

    Prose оформляет блок авторского текста, например вывод markdown или CMS, без класса на каждом элементе.

  • Read the privacy policy

    Ссылка

    Ссылка ведёт читателя в другое место.

  • <tk-button>Save</tk-button>

    Блок кода

    Блок кода показывает исходный код для чтения.

  • Kbd

    Kbd показывает сочетание клавиш рядом клавиш.

Компоновка

Группировка, разделение и размеры областей страницы.

  • Shipping

    Arrives in 3 days.

    Returns

    Within 30 days.

    Аккордеон

    Аккордеон.

  • Show details

    Arrives in 3 days.

    Раскрывающийся блок

    Collapsible показывает или скрывает один блок содержимого по нажатию на кнопку.

  • AccountBilling

    Разделитель

    Разделитель.

  • Область прокрутки

    Scroll area.

  • Разделитель панелей

    Splitter делит область на панели, размер которых меняют, перетаскивая ручку между ними или с клавиатуры.

  • Соотношение сторон

    Aspect ratio держит заданную пропорцию и растягивает на неё дочерний элемент, поэтому медиа занимает своё место ещё до загрузки и страница не прыгает.

Шаблоны

Рецепты из компонентов выше.