# Дизайн-система Oruga UI

## Предварительный просмотр интерфейса дизайн-системы Oruga UI

Найдите нужное в контролируемом словаре, добавьте до трёх тем, удалите метку и сохраните описание локальной заметки.

## Справочник по дизайну для дизайн-системы Oruga UI

Пакет Oruga для Vue 3 версии 0.14.4 с @oruga-ui/theme-oruga 0.10.0. Приведённые ниже значения относятся к этой необязательной теме по умолчанию, а не к неизменяемому ядру без оформления. Иконки MDI 7.4.47 подключаются локально. Композиция каталога и изображения папок созданы специально для этого примера.

### Семантические цвета необязательной темы Oruga

| Название / правило | Значение / конфигурация | Применение |
| --- | --- | --- |
| --oruga-primary | #445e00 | Выбранные метки и основное действие. |
| --oruga-primary-invert | #fff | Текст на основных метках. |
| --oruga-success | #006724 | Вариант для успешного состояния. |
| --oruga-info | #005c98 | Информационный вариант. |
| --oruga-warning | #f4c300 | Предупреждающий вариант. |
| --oruga-danger | #b60000 | Вариант ошибки поля. |
| --oruga-control-border-color | #dbdbdb | Граница поля по умолчанию. |
### Типографика, отступы и геометрия необязательной темы

| Название / правило | Значение / конфигурация | Применение |
| --- | --- | --- |
| --oruga-font-size | 1rem | Размер текста по умолчанию. |
| --oruga-line-height | 1.5 | Коэффициент высоты строки по умолчанию. |
| --oruga-border-radius | 4px | Стандартное скругление элементов управления. |
| --oruga-control-spacer | .5em | Общие отступы элементов управления. |
| --oruga-control-height | 2.25em | Высота элемента управления относительно размера шрифта. |
| --oruga-control-padding-vertical | calc(.375em - 1px) | Вертикальный внутренний отступ с учётом границы. |
| --oruga-control-padding-horizontal | calc(.8em - 1px) | Горизонтальный внутренний отступ с учётом границы. |
| --oruga-control-disabled-opacity | .5 | Визуальное состояние отключённого элемента. |
| --oruga-animation-speed-fast | .15s | Быстрая длительность перехода. |
| --oruga-animation-speed | .3s | Стандартная длительность перехода. |
### Явно заданные масштабы исходного приложения

| Название / правило | Значение / конфигурация | Применение |
| --- | --- | --- |
| Font stack | system-ui, sans-serif | Внешний текст приложения; необязательная тема также использует системный стек шрифтов. |
| Page title | 34px / 1.15; 29px narrow | Оригинальная иерархия. |
| Catalog card title | Georgia, serif; 29px / 1.25 | Исходный контраст редакционного оформления, а не значение по умолчанию в Oruga. |
| Supporting type | 10 / 11 / 12 / 13 / 14 / 15px | Явно заданные подписи, определения и текст оригинального приложения. |
| Spacing | 4 / 5 / 7 / 12 / 13 / 14 / 16 / 20 / 22 / 24 / 28 / 32px | Фактические значения компоновки; библиотека без готового интерфейса не задаёт масштаб сетки. |
| Layout | Flexible editor + 330px catalog card; stack at 760px | Исходная сетка. |
| Topic constraints | 1–3 unique existing labels | allow-new=false, allow-duplicates=false, maxitems=3. |
| Title constraint | 5–80 characters; minimum evaluated after trim | Проверка приложения и нативное ограничение длины. |
## Полное руководство по дизайн-системе Oruga UI

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

Подробные рекомендации, отправная точка для реализации и ссылки на источники.

## Отделите поведение компонентов Oruga от необязательной темы в дизайн-системе Oruga UI

### Отделите поведение компонентов Oruga от необязательной темы

> Oruga предоставляет компоненты Vue, не требуя определённого фреймворка CSS. В этом примере пакет для Vue 3 сочетается с отдельной темой Oruga по умолчанию. Зелёные выбранные метки и поля с обводкой задаются этой темой, а поиск, выбор и удаление реализованы как нативное поведение компонентов.

Это разграничение полезно при оценке библиотеки. Команда может сохранить API компонентов и заменить настройки классов или выбрать другую поддерживаемую тему. Поэтому в справочной таблице указаны название и версия пакета темы, а зелёный основной цвет не представлен как универсальное требование для всех приложений Oruga.

Прочитать вспомогательную спецификацию

## Используйте настоящие переменные темы по умолчанию в дизайн-системе Oruga UI

### Используйте настоящие переменные темы по умолчанию

Установленная необязательная тема задаёт --oruga-primary как #445e00, а --oruga-primary-invert — как white. Для цвета ошибки используется #b60000, а границы элементов управления имеют цвет #dbdbdb. Свойство варианта компонента выбирает соответствующую семантическую группу, поэтому для каждого поля или метки не нужно задавать отдельное правило CSS.

Эта же тема задаёт стандартный радиус в четыре пикселя, высоту элемента управления 2.25em и формулы отступов с вычитанием границы толщиной в один пиксель. Поскольку эти значения зависят от размера текста элемента управления, изменение масштаба шрифта влияет на геометрию. Промежуток темы в половину em описывает взаимосвязь компонентов, а не наличие полной шкалы отступов для макета страницы.

Прочитать вспомогательную спецификацию

## Самостоятельно задайте компоновку, которую Oruga намеренно не навязывает, в дизайн-системе Oruga UI

### Самостоятельно задайте компоновку, которую Oruga намеренно не навязывает

В каталоге используется гибкая колонка редактора и колонка карточки шириной 330px; ниже 760px они располагаются друг под другом. Для заголовка страницы выбран системный шрифт без засечек, а для заголовка карточки — Georgia, чтобы придать записи редакционный характер. Оба решения — авторские; внешние файлы шрифтов не нужны.

Oruga не предписывает сетку или утилитарный фреймворк. Поэтому в полной таблице стилей явно заданы внутренние отступы панелей, отступы на узких экранах и правила переноса. Счётчик меток не разрывает числитель и знаменатель, а заголовок карточки переносится при большой длине названия заметки, не смещая встроенную страницу по горизонтали.

Прочитать вспомогательную спецификацию

## Храните выбранные значения отдельно от поискового запроса в дизайн-системе Oruga UI

### Храните выбранные значения отдельно от поискового запроса

OTaginput связывает массив выбранных тем через v-model. Внутренний текст автодополнения фильтрует названия доступных вариантов, не заменяя этот массив. Словарь включает шесть оригинальных тем с конкретными определениями, а на карточке отображаются определения только выбранных тем.

По умолчанию поиск не учитывает регистр. В локальном тесте ввели Color и дождались завершения фильтрации, прежде чем выбрать найденный вариант. Немедленная проверка во время задержки обработки ввода ошибочно показала бы, что фильтрация не работает. После выбора поисковый запрос очищается, а ранее выбранные метки сохраняются.

1. Найдите Color и выберите соответствующий вариант.

2. Добавьте Forms, чтобы вместе с Navigation выбрать три темы.

3. Удалите метку, убедитесь, что карточка обновилась, и выберите замену перед сохранением.

Прочитать вспомогательную спецификацию

## Независимо задавайте словарь, дубликаты и количество элементов в дизайн-системе Oruga UI

### Независимо задавайте словарь, дубликаты и количество элементов

allow-new=false запрещает превращать произвольный введённый текст в метку. allow-duplicates=false не позволяет добавить одну и ту же существующую метку дважды. maxitems=3 ограничивает общее количество выбранных элементов и показывает счётчик. Каждая настройка отвечает за отдельный аспект контролируемого словаря.

При попытке сохранить приложение всё равно проверяет, выбрана ли хотя бы одна тема. Ограничение максимального количества не означает наличия минимального требования. Приложение также проверяет, что длина заголовка после удаления пробелов по краям составляет не менее пяти значимых символов, а нативный атрибут maxlength ограничивает его длину восемьюдесятью символами.

Прочитать вспомогательную спецификацию

## Используйте OField для подписей и конкретных сообщений валидации в дизайн-системе Oruga UI

### Используйте OField для подписей и конкретных сообщений валидации

OField отображает заголовок заметки и метки тем, а также сообщения к ним. После неудачной попытки сохранить соответствующее поле получает вариант danger и конкретное сообщение о том, что нужно исправить. Подсказка для тем заранее объясняет допустимый диапазон и ограничение по словарю.

Встроенный список раскрывающихся вариантов для ввода тегов использует шаблон combobox/listbox. В этой версии роль combobox назначена обёртке, а поле для ввода текста находится внутри неё. Поэтому тест QA заполняет именно поле Search topics, а не предполагает, что элемент с ролью combobox сам является полем ввода.

Прочитать вспомогательную спецификацию

## Дизайн-система Oruga UI: стандартному набору иконок всё ещё нужен файл шрифта

### Для набора иконок по умолчанию всё равно нужен файл шрифта

Для управления удалением тегов используется набор иконок MDI по умолчанию в Oruga. Подключение темы компонента не загружает этот шрифт автоматически, поэтому полная конфигурация включает @mdi/font. В автономном предпросмотре используется локальный файл WOFF2 и необходимые правила для иконок, благодаря чему не требуется загрузка шрифта из удалённого источника.

Для удаления используется настоящая кнопка с доступной меткой Remove topic. Декоративная иллюстрация папки не относится к этим элементам управления, поэтому она скрыта от вспомогательных технологий. Это не позволяет принять декоративный значок за интерактивный элемент.

Прочитать вспомогательную спецификацию

## Дизайн-система Oruga UI: сбрасывайте сохранённый снимок при изменении исходных данных

### Сбрасывайте сохранённый снимок при изменении исходных данных

Действие Save сохраняет предложение с обрезанным заголовком и количеством выбранных тем. Наблюдатель отслеживает заголовок и массив тем с глубокой проверкой; поэтому удаление элемента сбрасывает подтверждение так же, как и изменение заголовка. Кнопка Save отключена только тогда, когда текущий снимок сохранён.

Команда Clear note сбрасывает заголовок, все выбранные темы, состояние проверки и сохранённый статус. На карточке снова отображаются Untitled research note и No topics selected. Пользователь может пройти весь цикл от пустой заметки до редактирования и сохранения без скрытых за кнопкой операций с сервером, загрузкой или публикацией.

- Сохраняйте модель выбранного массива при изменении поискового запроса.

- Сбрасывайте подтверждение сохранения при изменениях вложенного массива.

- Описывайте результат как локальное состояние, а не как публикацию.

Прочитать вспомогательную спецификацию

## Дизайн-система Oruga UI: подключайте компоненты явно с актуальной моделью регистрации Oruga

### Импортируйте компоненты явно, используя актуальный способ регистрации Oruga

Проверенная конфигурация 0.14.4 создаёт экземпляр Oruga и устанавливает его в приложении Vue. В App.vue компоненты OField, OInput, OTaginput, OTag и OButton импортируются явно. Это соответствует актуальной модели регистрации; использование старых примеров, в которых предполагалась глобальная регистрация всех компонентов, может привести к неполной конфигурации приложения.

В README темы указано, что стандартная тема использует существующие имена классов Oruga и требует подключения таблицы стилей, но не дополнительного объекта конфигурации темы. Точка входа последовательно импортирует эту таблицу стилей, ресурс MDI и исходную компоновку. Все необходимые части есть в приведённых выше полных примерах исходного кода и ниже, в корне Vite.

Прочитать вспомогательную спецификацию

## Oruga UI Примеры компонентов дизайн-системы

### Полный SFC каталога тем

OTaginput, OField, OInput, OTag и OButton связывают ограниченный словарь с динамически обновляемой карточкой каталога.

```
<script setup>
import {ref,computed,watch} from 'vue';
import {OField,OInput,OTaginput,OButton,OTag} from '@oruga-ui/oruga-next';
const title=ref('Finding a calmer navigation'),topics=ref(['Navigation']),attempted=ref(false),saved=ref('');
const definitions={'Navigation':'Menus, wayfinding and the path through a product.','Typography':'Type hierarchy, reading rhythm and legibility.','Color':'Semantic roles, contrast and theme behavior.','Forms':'Input labels, validation and correction.','Motion':'Transitions, reduced motion and continuity.','Accessibility':'Keyboard flow, semantics and assistive technology.'};
const options=Object.keys(definitions),valid=computed(()=>title.value.trim().length>=5&&topics.value.length>=1&&topics.value.length<=3);
watch([title,topics],()=>saved.value='',{deep:true});
function save(){attempted.value=true;if(valid.value)saved.value=`Saved locally: “${title.value.trim()}” with ${topics.value.length} ${topics.value.length===1?'topic':'topics'}.`}
function reset(){title.value='';topics.value=[];attempted.value=false;saved.value=''}
</script>
<template><main class="catalog-shell"><header><p class="eyebrow">RESEARCH CATALOG · LABEL A NOTE</p><h1>Give the next reader a useful starting point.</h1><p>Name a research note and choose up to three topics from a controlled vocabulary.</p></header><div class="catalog-layout"><section class="editor"><h2>Note details</h2><OField label="Note title" :variant="attempted&&title.trim().length<5?'danger':undefined" :message="attempted&&title.trim().length<5?'Use at least five meaningful characters.':undefined"><OInput v-model="title" maxlength="80" expanded placeholder="What did you learn?"/></OField><OField label="Topics" :variant="attempted&&!topics.length?'danger':undefined" :message="attempted&&!topics.length?'Choose at least one topic.':'Choose 1–3 existing topics; duplicate and new labels are not added.'"><OTaginput v-model="topics" :options="options" :allow-new="false" :allow-duplicates="false" :maxitems="3" open-on-focus :keep-open="false" expanded variant="primary" placeholder="Search topics" aria-close-label="Remove topic"><template #empty>No matching topic. Try Color, Forms or Motion.</template></OTaginput></OField><div class="actions"><OButton variant="primary" @click="save" :disabled="!!saved">Save local note</OButton><OButton @click="reset">Clear note</OButton></div><p role="status" class="result">{{saved||'The preview keeps only local page state.'}}</p><h3>Vocabulary guide</h3><dl class="vocabulary"><div v-for="(meaning,name) in definitions" :key="name"><dt>{{name}}</dt><dd>{{meaning}}</dd></div></dl></section><aside class="note-card"><div class="folder-art" aria-hidden="true"><i></i><b></b><span></span></div><p class="eyebrow">CATALOG CARD PREVIEW</p><h2>{{title.trim()||'Untitled research note'}}</h2><div class="topic-tags"><OTag v-for="topic in topics" :key="topic" variant="primary">{{topic}}</OTag><span v-if="!topics.length" class="empty-topics">No topics selected</span></div><p class="card-label">This note will appear under</p><ul><li v-for="topic in topics" :key="topic"><strong>{{topic}}</strong><span>{{definitions[topic]}}</span></li></ul><p class="card-foot">Original sample note · no upload or publishing</p></aside></div></main></template>
```

Справочник по коду

- Модель выбранного массива отличается от внутреннего текста поиска.

- Можно выбирать только существующие метки, без повторов.

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

### Полная исходная компоновка каталога

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

```
html,body,#app{height:auto;min-height:0;margin:0}*{box-sizing:border-box}body{font-family:system-ui,sans-serif;background:#f4f4ed;color:#34392b}.catalog-shell{max-width:1100px;margin:auto;padding:32px}.eyebrow{font-size:10px;letter-spacing:.14em;font-weight:700;color:#6e775f}h1{font-size:34px;line-height:1.15;max-width:700px;margin:12px 0}header>p:last-child{font-size:15px;line-height:1.6;color:#727965;max-width:630px}.catalog-layout{display:grid;grid-template-columns:minmax(0,1fr) 330px;gap:24px;margin-top:28px}.editor,.note-card{background:white;border:1px solid #dfe3d4;border-radius:14px;padding:24px;min-width:0}.editor>h2{font-size:20px;margin:0 0 24px}.editor .o-field{margin-bottom:22px}.editor .o-field__message{font-size:12px;line-height:1.6}.actions{display:flex;gap:12px;flex-wrap:wrap}.result{font-size:12px;line-height:1.6;color:#596d2e;margin:16px 0 28px}.editor h3{font-size:14px}.vocabulary{margin:0}.vocabulary>div{padding:12px 0;border-bottom:1px solid #eaede3}.vocabulary dt{font-size:13px;font-weight:650}.vocabulary dd{font-size:12px;line-height:1.6;margin:4px 0 0;color:#707763}.note-card{align-self:start;background:#fcfcf5}.note-card h2{font-family:Georgia,serif;font-size:29px;line-height:1.25;font-weight:400;overflow-wrap:anywhere}.folder-art{height:145px;background:#e3e8cf;border-radius:8px;position:relative;overflow:hidden;margin-bottom:24px}.folder-art i{position:absolute;left:15%;top:40px;width:70%;height:100px;border-radius:7px;background:#7e8e52;transform:rotate(-8deg)}.folder-art b{position:absolute;left:21%;top:24px;width:60%;height:115px;background:#fffef5;transform:rotate(5deg);border-radius:4px}.folder-art span{position:absolute;left:16%;top:71px;width:70%;height:80px;background:#a6b57a;border-radius:7px}.topic-tags{display:flex;gap:7px;flex-wrap:wrap}.card-label{font-size:11px;color:#737b65;margin-top:24px}.note-card ul{list-style:none;padding:0}.note-card li{border-top:1px solid #e0e4d6;padding:13px 0}.note-card li strong{font-size:13px;display:block}.note-card li span{font-size:12px;color:#6c765b;line-height:1.6;display:block;margin-top:5px}.card-foot{font-size:10px;line-height:1.6;color:#7c846e;margin-top:20px}.empty-topics{font-size:12px;color:#7c846e}.o-taginput{max-width:100%}.o-taginput__container{min-width:0}.o-taginput .o-input{min-width:0}@media(max-width:760px){.catalog-layout{grid-template-columns:minmax(0,1fr)}.catalog-shell{padding:20px}h1{font-size:29px}}@media(max-width:360px){.catalog-shell{padding:14px}.editor,.note-card{padding:16px}.actions>*{width:100%}}
.o-taginput__counter{white-space:nowrap;flex-shrink:0}
```

Справочник по коду

- Oruga не предоставляет обязательную систему сеток; эта компоновка явно задана в приложении CSS.

- Текст счётчика остаётся в одну строку даже при узкой ширине.

## Oruga UI Настройка агента дизайн-системы

### Отправная точка для реализации

Проверенные версии: Oruga 0.14.4, необязательная стандартная тема 0.10.0 и MDI 7.4.47. Компоненты импортируются явно; стандартной теме не требуется дополнительная конфигурация темы JavaScript.

```
// npm create vite@latest oruga-catalog -- --template vue
// cd oruga-catalog && npm install
// npm install @oruga-ui/oruga-next@0.14.4 @oruga-ui/theme-oruga@0.10.0 @mdi/font@7.4.47
// Save the complete examples as src/App.vue and src/style.css.
// src/main.js:
import {createApp} from 'vue';
import {createOruga} from '@oruga-ui/oruga-next';
import '@oruga-ui/theme-oruga/style.css';
import '@mdi/font/css/materialdesignicons.css';
import './style.css';
import App from './App.vue';
createApp(App).use(createOruga()).mount('#app');
// index.html: <div id="app"></div><script type="module" src="/src/main.js"></script>
// npm run dev
```

### Запрос для вашего проекта

```
Начните с каталога исследовательских заметок на Oruga 0.14.4 и темы 0.10.0. Сохраните управляемый выбор OTaginput из словаря из шести тем, поиск без учёта регистра, запрет на добавление новых и повторяющихся тегов и ограничение в три тега. Свяжите определения тем и проверку заголовка с сохранённым снимком; при изменениях сбрасывайте подтверждение сохранения. Включите настройку createOruga, темы CSS и локального ресурса MDI. Сброс выполняйте до пустого черновика; не придумывайте данные для сравнения продуктов или обновление удалённого каталога.
```

## Дизайн-система Oruga UI: источники и область применения

Oruga 0.14.4 и необязательная стандартная тема 0.10.0. Оригинальный словарь и иллюстрация каталога. Сохранение изменяет только локальное состояние страницы, без загрузки, публикации и сохранения после перезагрузки.

- Введение Актуальная регистрация плагина и явная регистрация компонентов.

- Варианты темы Необязательные параметры оформления.

- Конфигурация Настройка классов для всего приложения и отдельных компонентов.

- Поле ввода тегов Ограничения словаря, модель, лимиты и удаление.

- Автодополнение Фильтрация, вложенное поведение combobox и встроенное всплывающее окно.

- Field Видимые метки и сообщения проверки.

- Иконка Настройка набора иконок.

- Исходный код темы по умолчанию Официальная настройка темы и источник токенов.

## Oruga UI Связанные материалы по дизайн-системе

### Pico CSS

Pico CSS стилизует семантический HTML с адаптивной шкалой типографики в rem и переменными темы. Стандартная, безклассовая и условная сборки рассчитаны на разные сценарии интеграции; в этом руководстве используется стандартная сборка для формы предпочтений чтения со встроенными раскрывающимися блоками и диалогом.

### Preline UI

Встроенный планировщик занятий Preline со связанными вкладками, ограниченным плагином для числового ввода, установленными псевдонимами темы, реальными шкалами Tailwind и локальной оценкой материалов, которая обновляется при выборе занятия.

### Prime UI

Реализация PrimeVue с фиксированной версией из экосистемы Prime UI: дерево документов в теме Aura с реальными ссылками на пресеты, управляемым раскрытием, фильтрацией, выбором и локальным закреплением.


- [Справочник по реализации](https://oruga-ui.com/components/taginput)
- [Источник](https://oruga-ui.com/documentation/themes)
- [Источник](https://oruga-ui.com/components/taginput)
- [Прочитать вспомогательную спецификацию](https://oruga-ui.com/documentation/)
- [Прочитать вспомогательную спецификацию](https://oruga-ui.com/documentation/themes)
- [Прочитать вспомогательную спецификацию](https://oruga-ui.com/components/taginput)
- [Прочитать вспомогательную спецификацию](https://oruga-ui.com/components/field)
- [Прочитать вспомогательную спецификацию](https://oruga-ui.com/components/icon)
- [Прочитать вспомогательную спецификацию](https://oruga-ui.com/components/button)
- [Справочник по коду](https://oruga-ui.com/components/taginput)
- [Справочник по коду](https://oruga-ui.com/documentation/configuration)
- [Введение Актуальная регистрация плагина и явная регистрация компонентов.](https://oruga-ui.com/documentation/)
- [Варианты темы Необязательные параметры оформления.](https://oruga-ui.com/documentation/themes)
- [Конфигурация Настройка классов для всего приложения и отдельных компонентов.](https://oruga-ui.com/documentation/configuration)
- [Поле ввода тегов Ограничения словаря, модель, лимиты и удаление.](https://oruga-ui.com/components/taginput)
- [Автодополнение Фильтрация, вложенное поведение combobox и встроенное всплывающее окно.](https://oruga-ui.com/components/autocomplete)
- [Field Видимые метки и сообщения проверки.](https://oruga-ui.com/components/field)
- [Иконка Настройка набора иконок.](https://oruga-ui.com/components/icon)
- [Исходный код темы по умолчанию Официальная настройка темы и источник токенов.](https://github.com/oruga-ui/theme-oruga)