Примитивы
25
Code
Инлайновый код и его блочный близнец. «Пилюля» — для фрагмента внутри строки прозы; у блока заливка уступает место рамке, потому что фон под многими строками борется с текстом, который должен держать.
чистая разметка — библиотеки на странице нет
Run npm i @ilomee/aura-core first.
import '@ilomee/aura-core/css';
import '@ilomee/aura-core/components.css';Код
index.html
<p class="aura-text aura-text--body">
Run <code class="aura-code">npm i @ilomee/aura-core</code> first.
</p>
<pre class="aura-code-block"><code class="aura-code">import '@ilomee/aura-core/css';
import '@ilomee/aura-core/components.css';</code></pre>Разметка выше и есть весь API: обёртки нет ни в одном из четырёх пакетов, потому что компонент здесь поставил бы класс и не добавил ничего. Пишите её как есть, в любом фреймворке.
Пропсы
У чистой разметки нет пропсов — классы ниже и есть весь API. Четыре пакета не делают ничего сверх того, что проставляют вам те же самые классы.
Какие классы отдаёт
Все фреймворки отдают одни и те же классы — именно поэтому четыре библиотеки выглядят одинаково. Их можно использовать напрямую, вообще без библиотеки компонентов.
| Класс | Роль | Примечания |
|---|---|---|
| .aura-code | база | Обязательный. Без него модификатор не работает. |
| .aura-code-block | база | Обязательный. Без него модификатор не работает. |
Токены и правила
components.css- шрифт
- var(--mono)
- заливка инлайна
- var(--surface-2)
- рамка блока
- 1px solid var(--border) · var(--r2)