НачалоОсновыКомпонентыТексты
Overview Начало работы Соглашения API Данные символов

Соглашения API

Все компоненты Thykes называют вещи одинаково. Разберитесь в схеме один раз, и большую часть API можно будет угадать, не заглядывая в описание.

Атрибуты и свойства

  • Настройки задаются атрибутами в kebab-case. У каждого есть свойство в camelCase: full-width в разметке — это fullWidth в JavaScript.
  • Булевы атрибуты включены, если они есть: disabled, loading, required. Они называют состояние, поэтому атрибутов вида no-* нет. Чтобы убрать часть, которая есть по умолчанию, ищите hide-*, например hide-icon у Banner.
  • Данные, которые не уместить в разметку, задаются только свойством: строки и колонки Data table, узлы Tree, options у Combobox. Какие именно, сказано на странице компонента.
  • У текста, который слышат скринридеры, есть атрибут с английским значением по умолчанию: dismiss-label, clear-label, remove-label. Задайте их, если интерфейс не на английском.

Variant, tone, treatment, shape

Четыре атрибута меняют вид компонента, и каждый везде значит одно и то же.

Атрибут Что меняет Примеры
variant вид или роль компонента primary · secondary · outline · ghost у Button; field · filter у Select
tone цвет статуса neutral · info · success · warning · error у Badge, Banner, Section message; neutral · danger у Button
treatment насколько громко выглядит тот же компонент subtle · solid у Badge; subtle · loud у Banner; standard · quiet у Link
shape углы rect · round у кнопок, групп кнопок, Tab bar и Segmented control
Paid Paid Subscribe
<tk-badge tone="success">Paid</tk-badge>
<tk-badge tone="success" treatment="solid">Paid</tk-badge>
<tk-button variant="primary" shape="round">Subscribe</tk-button>

Progress bar и Progress ring вместо tone используют intent (accent · success · error): accent там значит «идёт работа», а не статус.

Размеры

size принимает small, medium или large, по умолчанию medium. У каждого компонента только те шаги, которые ему нужны:

Компоненты Значения size Что меняется
Button, Icon button, Split button small · medium · large высота 24 / 32 / 36px
Input, Select, Combobox и другие поля medium · large высота 32 / 36px
Button group, Toggle button group small · medium · large, без значения по умолчанию задаёт размер всем кнопкам внутри; без него у каждой кнопки свой
Switch, Slider medium · small масштаб контрола
Progress bar small · medium толщина полосы
Progress ring small · medium · large · xlarge диаметр 24 / 40 / 64 / 96px
Dialog small · medium · large ширина 320 / 480 / 640px
Icon, Spinner, Avatar числа в px; Icon принимает ещё inherit размер иконки или аватара
Small Medium Large
<tk-button size="small">Small</tk-button>
<tk-button>Medium</tk-button>
<tk-button size="large">Large</tk-button>

size="small" у поля отображается как medium и выводит предупреждение в консоль. Плотность таблиц задаёт density (comfortable · compact), а не size.

События

  • Изменение значения вызывает change (и input, пока значение меняется, как у Slider), как у нативных контролов формы. Dialog, Confirm dialog и Sheet вызывают нативные close и cancel.
  • Все остальные события начинаются с tk-, всплывают и проходят через shadow DOM, так что слушать их можно на любом предке. change тоже всплывает, но, как и нативное событие, не выходит за пределы shadow root, в котором возникло.
  • Некоторые события приходят до изменения, и их можно отменить. Вызовите preventDefault(), чтобы изменение не произошло: tk-dismiss, tk-toggle, tk-sort, tk-commit. Какие события отменяемы, сказано на странице компонента.
  • detail — простой объект, в нём только то, чего нельзя прочитать у самого элемента.
banner.addEventListener('tk-dismiss', (event) => {
  event.preventDefault(); // keep the banner; remove it yourself later
});

Слоты

Слот по умолчанию — собственное содержимое компонента: подпись или тело. Именованные слоты повторяют одни и те же несколько имён:

Слот Что в нём У кого
icon-start, icon-end иконка перед подписью или после неё Button
prefix, suffix иконка или единица измерения внутри поля Input, Number input
icon одна иконка в начале сообщения или пункта Banner, Section message, Menu item, Sidebar nav item
leading, trailing содержимое в начале или в конце строки Tag (leading); Menu item, Sidebar nav item (trailing)
title, actions заголовок и ряд кнопок Section message, Empty state; Banner (actions)
action ровно одна кнопка Toast, Split button
footer нижняя область Dialog, Sheet, Sidebar
trigger элемент, который открывает компонент Menu, Popover, Collapsible
Add member USD
<tk-button><tk-icon slot="icon-start" name="plus"></tk-icon>Add member</tk-button>
<tk-input aria-label="Price"><span slot="suffix">USD</span></tk-input>

Оверлеи

  • Dialog, Confirm dialog, Sheet модальные. Esc закрывает их, если не задан persistent, а фокус возвращается к элементу, который их открыл. Закрывает ли их клик по фону, сказано на странице каждого.
  • Меню, поповеры и панели Select, Combobox и пикеров немодальные. Их закрывает клик снаружи или Esc.
  • Tooltip появляется при наведении и фокусе. Toast озвучивается, не забирая фокус.

Хуки для стилей

  • ::part(name) даёт доступ к частям, которые страница компонента перечисляет в разделе API.
  • Custom properties вида --tk-<component>-<what> публичны, например --tk-popover-max-width или --tk-sidebar-width, и каждое описано на своей странице.
  • Всё, что начинается с --_, — внутреннее и может измениться без предупреждения.