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

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

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

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

Этот ресурс Prime UI реализует PrimeVue 4.5.5 с @primeuix/themes 1.2.5 Aura, а не заявляет о существовании единой взаимозаменяемой API для PrimeVue, PrimeReact и PrimeNG. Значения проверены в установленном пресете. На странице задан размер корневого шрифта 16px; размеры в rem рассчитаны исходя из этого значения.

### Примитивы Aura для изумрудной палитры

| Название / правило | Значение / конфигурация | Применение |
| --- | --- | --- |
| primitive.emerald.50 | #ecfdf5 | Фактический примитивный цвет, используемый в стандартной основной цветовой шкале. |
| primitive.emerald.100 | #d1fae5 | Фактический примитивный цвет, используемый в стандартной основной цветовой шкале. |
| primitive.emerald.200 | #a7f3d0 | Фактический примитивный цвет, используемый в стандартной основной цветовой шкале. |
| primitive.emerald.300 | #6ee7b7 | Фактический примитивный цвет, используемый в стандартной основной цветовой шкале. |
| primitive.emerald.400 | #34d399 | Фактический примитивный цвет, используемый в стандартной основной цветовой шкале. |
| primitive.emerald.500 | #10b981 | Фактический примитивный цвет, используемый в стандартной основной цветовой шкале. |
| primitive.emerald.600 | #059669 | Фактический примитивный цвет, используемый в стандартной основной цветовой шкале. |
| primitive.emerald.700 | #047857 | Фактический примитивный цвет, используемый в стандартной основной цветовой шкале. |
| primitive.emerald.800 | #065f46 | Фактический примитивный цвет, используемый в стандартной основной цветовой шкале. |
| primitive.emerald.900 | #064e3b | Фактический примитивный цвет, используемый в стандартной основной цветовой шкале. |
| primitive.emerald.950 | #022c22 | Фактический примитивный цвет, используемый в стандартной основной цветовой шкале. |
### Семантические роли Aura для светлой темы

| Название / правило | Значение / конфигурация | Применение |
| --- | --- | --- |
| semantic.colorScheme.light.primary.color | {primary.500} | Фактическое значение пресета Aura; фигурные скобки сохраняют ссылку на токен. |
| semantic.colorScheme.light.primary.contrastColor | #ffffff | Фактическое значение пресета Aura; фигурные скобки сохраняют ссылку на токен. |
| semantic.colorScheme.light.primary.hoverColor | {primary.600} | Фактическое значение пресета Aura; фигурные скобки сохраняют ссылку на токен. |
| semantic.colorScheme.light.primary.activeColor | {primary.700} | Фактическое значение пресета Aura; фигурные скобки сохраняют ссылку на токен. |
| semantic.colorScheme.light.highlight.background | {primary.50} | Фактическое значение пресета Aura; фигурные скобки сохраняют ссылку на токен. |
| semantic.colorScheme.light.highlight.focusBackground | {primary.100} | Фактическое значение пресета Aura; фигурные скобки сохраняют ссылку на токен. |
| semantic.colorScheme.light.highlight.color | {primary.700} | Фактическое значение пресета Aura; фигурные скобки сохраняют ссылку на токен. |
| semantic.colorScheme.light.highlight.focusColor | {primary.800} | Фактическое значение пресета Aura; фигурные скобки сохраняют ссылку на токен. |
| semantic.colorScheme.light.text.color | {surface.700} | Фактическое значение пресета Aura; фигурные скобки сохраняют ссылку на токен. |
| semantic.colorScheme.light.text.hoverColor | {surface.800} | Фактическое значение пресета Aura; фигурные скобки сохраняют ссылку на токен. |
| semantic.colorScheme.light.text.mutedColor | {surface.500} | Фактическое значение пресета Aura; фигурные скобки сохраняют ссылку на токен. |
| semantic.colorScheme.light.text.hoverMutedColor | {surface.600} | Фактическое значение пресета Aura; фигурные скобки сохраняют ссылку на токен. |
### Радиусы Aura и отступы полей

| Название / правило | Значение / конфигурация | Применение |
| --- | --- | --- |
| primitive.borderRadius.none | 0 | Фактическое значение пресета Aura; фигурные скобки сохраняют ссылку на токен. |
| primitive.borderRadius.xs | 2px | Фактическое значение пресета Aura; фигурные скобки сохраняют ссылку на токен. |
| primitive.borderRadius.sm | 4px | Фактическое значение пресета Aura; фигурные скобки сохраняют ссылку на токен. |
| primitive.borderRadius.md | 6px | Фактическое значение пресета Aura; фигурные скобки сохраняют ссылку на токен. |
| primitive.borderRadius.lg | 8px | Фактическое значение пресета Aura; фигурные скобки сохраняют ссылку на токен. |
| primitive.borderRadius.xl | 12px | Фактическое значение пресета Aura; фигурные скобки сохраняют ссылку на токен. |
| semantic.formField.paddingX | 0.75rem | Фактическая ссылка на общие внутренние отступы или радиус поля. |
| semantic.formField.paddingY | 0.5rem | Фактическая ссылка на общие внутренние отступы или радиус поля. |
| semantic.formField.borderRadius | {border.radius.md} | Фактическая ссылка на общие внутренние отступы или радиус поля. |
| semantic.focusRing.width | 1px | Фактическое значение пресета Aura; фигурные скобки сохраняют ссылку на токен. |
| semantic.focusRing.style | solid | Фактическое значение пресета Aura; фигурные скобки сохраняют ссылку на токен. |
| semantic.focusRing.color | {primary.color} | Фактическое значение пресета Aura; фигурные скобки сохраняют ссылку на токен. |
| semantic.focusRing.offset | 2px | Фактическое значение пресета Aura; фигурные скобки сохраняют ссылку на токен. |
| semantic.focusRing.shadow | none | Фактическое значение пресета Aura; фигурные скобки сохраняют ссылку на токен. |
### Геометрия встроенного дерева

| Название / правило | Значение / конфигурация | Применение |
| --- | --- | --- |
| components.tree.root.padding | 1rem | Фактическое значение макета корневого элемента Tree. |
| components.tree.root.gap | 2px | Фактическое значение макета корневого элемента Tree. |
| components.tree.root.indent | 1rem | Фактическое значение макета корневого элемента Tree. |
| components.tree.node.padding | 0.25rem 0.5rem | Фактический интервал между узлами или роль выделения. |
| components.tree.node.gap | 0.25rem | Фактический интервал между узлами или роль выделения. |
| components.tree.node.selectedBackground | {highlight.background} | Фактический интервал между узлами или роль выделения. |
| components.tree.node.selectedColor | {highlight.color} | Фактический интервал между узлами или роль выделения. |
| components.tree.nodeToggleButton.size | 1.75rem | Геометрия встроенной кнопки раскрытия. |
### Явно заданные типографика и интервалы приложения

| Название / правило | Значение / конфигурация | Применение |
| --- | --- | --- |
| Root font size | 16px | Исходная явно заданная базовая настройка этого примера. |
| Font family | system-ui, sans-serif | Исходный шрифт страницы; это не загружаемый шрифт Aura. |
| Page heading | 34px / 1.15; 29px mobile | Исходная редакционная иерархия. |
| Detail body | 15px / 1.7 | Исходный стиль оформления документов для чтения. |
| Sidebar / gap | 340px / 24px | Исходный макет для настольных экранов. |
| Mobile breakpoint | 760px | Граница исходного макета с вертикальным расположением элементов. |
## Полное руководство по дизайн-системе Prime UI

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

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

## Дизайн-система Prime UI — экосистема, а не один импорт

### Prime UI — экосистема, а не один импорт

> Экосистема пользовательских интерфейсов PrimeTek включает реализации для разных фреймворков. Здесь выбрана конкретная конфигурация: PrimeVue 4.5.5 с Vue 3 и пресетом Aura из @primeuix/themes 1.2.5. Полный файл входа, импорты и пример компонента относятся к этой настройке Vue. Для проекта на React или Angular нужен соответствующий пакет и API — копировать эти теги Vue без изменений не следует.

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

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

## В дизайн-системе Prime UI примитивные, семантические токены и токены компонентов образуют цепочку

### Примитивные, семантические токены и токены компонентов образуют цепочку

В Aura исходные цветовые примитивы отделены от семантических ролей и значений компонентов. В стандартной основной цветовой шкале используются изумрудные примитивы. В светлой теме primary.color ссылается на primary.500, hoverColor — на primary.600, а activeColor — на primary.700. Для ролей выделения используются более светлые поверхности основного цвета и более тёмные цвета переднего плана.

Затем Tree связывает фон и текст выбранного элемента с ролями выделения, а не задаёт второй, не связанный с ними оттенок зелёного. В спецификации сохранены ссылки в фигурных скобках, поскольку они показывают, как изменения распространяются по теме. Если заменить каждый псевдоним отдельным значением hex, эта полезная связь станет незаметной.

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

## В дизайн-системе Prime UI читайте значения из соответствующего пресета

### Читайте значения из соответствующего пресета

В зафиксированном пресете Aura внутренний отступ корневого элемента Tree и отступ уровней вложенности составляют по одному rem, внутренние отступы узла — 0.25rem 0.5rem, а размер кнопки-переключателя — 1.75rem. В примере для html задан размер шрифта шестнадцать пикселей, поэтому эти размеры однозначны. В разных версиях пресета или при другом размере корневого шрифта плотность может отличаться, даже если разметка компонента выглядит одинаково.

Примитивы скругления границ охватывают значения от нуля до двух, четырёх, шести, восьми и двенадцати пикселей. Общие внутренние отступы поля составляют 0.75rem по горизонтали и 0.5rem по вертикали. Заголовок размером тридцать четыре пикселя, системный шрифт и промежуток между столбцами в двадцать четыре пикселя — это исходные настройки макета страницы, не относящиеся к теме встроенного компонента.

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

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

### Ключи узлов обеспечивают стабильное раскрытие и выделение

Дерево содержит одну задачу, три папки и шесть документов-листьев. У каждого узла есть стабильный ключ и метка. Для узлов-папок задано selectable:false: они формируют иерархию, но не притворяются документами для чтения. Модель expandedKeys управляет открытыми папками; команды Expand и Collapse намеренно заменяют эту карту.

Для одиночного выбора используются selectionKeys и обработчик node-select. Панель сведений обновляется только в том случае, если ключ найден в карте документов. Изменение видимой метки не требует менять идентификатор; сворачивание папки не удаляет выбранный документ и не снимает с него отметку закрепления.

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

## В дизайн-системе Prime UI встроенная фильтрация сохраняет контекст совпадения

### Встроенная фильтрация сохраняет контекст совпадения

В Tree включён встроенный фильтр с режимом filterMode lenient и видимой подсказкой «Найти документ». Поиск по слову maps сужает отображаемую иерархию до совпавшего документа и его предков. Читатель по-прежнему понимает, к какой части структуры относится результат, вместо того чтобы получить несвязанный плоский список подсказок.

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

1. Найдите «maps» и проверьте, что контекст задачи и папки сохраняется.

2. Выберите Three regional maps, чтобы обновить панель документа.

3. Очистите фильтр и убедитесь, что выбранный документ по-прежнему доступен в иерархии.

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

## В дизайн-системе Prime UI выбранному документу нужно отдельное полезное содержимое

### Выбранному документу нужно отдельное полезное содержимое

У каждого документа есть тип, владелец, статус, описание, список для проверки и особая заметка. Для эссе важно проверить последовательность и подписи; для картографического справочника — согласованность ориентации и независимость масштаба; для списка проверки проб — читаемость и обрезку. Содержимое меняется в зависимости от выбора, а не повторяет один и тот же абзац под шестью заголовками.

Теги статуса служат описательными метаданными образца. Они не запускают внешний процесс публикации. Контурная иллюстрация — оригинальная декоративная геометрия; там, где это уместно, она обозначена как таковая. Это не географическая карта, и воспринимать её как карту не следует.

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

## Prime UI Закреплённое состояние в дизайн-системе не зависит от модели дерева

### Закрепление не зависит от модели дерева

Кнопка «Закрепить этот документ» добавляет ключ текущего документа в локальный массив. После добавления кнопка меняется на «Закреплено» и становится неактивной, чтобы исключить дублирование. Удаление закреплённой строки удаляет только этот ключ и не затрагивает выбор в дереве. Количество закреплённых документов вычисляется по массиву.

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

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

## Prime UI Сохраняйте встроенную модель клавиатурной навигации дерева в дизайн-системе

### Сохраняйте встроенную модель клавиатурной навигации дерева

Встроенный Tree передаёт иерархию с помощью ролей tree и treeitem, атрибутов выбора и раскрытия, а также связей между вложенными уровнями. Модель клавиатурной навигации использует клавиши со стрелками для перемещения по видимым узлам и раскрытия или сворачивания ветвей; Enter или Space выбирает узел в фокусе. На странице для коллекции задан понятный aria-label.

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

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

- Отключайте выбор папок, если с ними не связаны подробные сведения.

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

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

## Дизайн-система Prime UI Регистрируйте тему один раз в корневом компоненте Vue

### Зарегистрируйте тему один раз в корне Vue-приложения

В файле входа импортируются PrimeVue из primevue/config, Aura из @primeuix/themes/aura и приложение App.vue целиком. Плагин регистрируется с параметром theme.preset, установленным в Aura. В этом неизменяемом светлом примере darkModeSelector равен false; для переключения темы в production-среде используйте параметры, поддерживаемые соответствующим выпуском, а не смешивайте документацию разных основных версий.

Стили компонентов PrimeVue генерируются из пресета. В предоставленном style.css определены только оригинальные стили макета страницы и иллюстрации. Импорт устаревшего primevue/resources/theme.css не используется. В проверенной конфигурации был выбран конечный узел дерева, он был закреплён, иерархия отфильтрована, а интерфейс отображён при ширине 390px без уведомления о недействительной лицензии.

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

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

### Встроенный Tree и панель сведений

Стабильные ключи узлов, управляемые объекты состояния раскрытия и выбора, обработчики фильтрации и выбора узла.

```
<script setup>
import {ref,computed} from 'vue';import Tree from 'primevue/tree';import Button from 'primevue/button';import Tag from 'primevue/tag';
const nodes=[{key:'issue',label:'Issue 04 · Fieldwork',selectable:false,children:[{key:'essays',label:'Essays',selectable:false,children:[{key:'ridge',label:'The ridge path'},{key:'river',label:'A river after rain'}]},{key:'visuals',label:'Visual material',selectable:false,children:[{key:'maps',label:'Three regional maps'},{key:'captions',label:'Caption reference sheet'}]},{key:'production',label:'Production',selectable:false,children:[{key:'proof',label:'Print proof checklist'},{key:'credits',label:'Credits and permissions'}]}]}];
const documents={ridge:{type:'Essay',owner:'Alex Morgan',status:'Editing',title:'The ridge path',intro:'A field essay about following the contour rather than the shortest route.',items:['Opening: the first view above the tree line','Middle: how a contour changes the pace of walking','Close: the landmarks remembered on the return'],note:'Review the transition between the weather observation and the first-person account.'},river:{type:'Essay',owner:'Jules Chen',status:'Review',title:'A river after rain',intro:'An observational essay that follows sediment, sound and changing water levels.',items:['Keep the time sequence explicit','Pair each field image with an observation','Check the final geographic names'],note:'Compare the image captions with the text before locking the layout.'},maps:{type:'Visual reference',owner:'Sam Rivera',status:'Review',title:'Three regional maps',intro:'A consistent reference treatment for ridge, river and open plain.',items:['Same north orientation','Shared legend and label size','Scale shown independently on each map'],note:'The miniature map below is original decorative geometry, not a geographic claim.'},captions:{type:'Reference',owner:'Maya Patel',status:'Editing',title:'Caption reference sheet',intro:'One place to keep subject, location, credit and contextual description.',items:['Subject and date','Location at an appropriate level of precision','Author or source credit'],note:'Do not use the visible caption as a substitute for a useful image alt description.'},proof:{type:'Checklist',owner:'Alex Morgan',status:'Ready',title:'Print proof checklist',intro:'Review the physical proof at actual scale before choosing the final stock.',items:['Body text and small labels remain legible','Images preserve the intended tonal range','Trim and page sequence match the layout'],note:'This is a sample editorial workflow, not a print vendor specification.'},credits:{type:'Reference',owner:'Maya Patel',status:'Review',title:'Credits and permissions',intro:'Keep attribution close to each asset record so it survives layout changes.',items:['Creator name and source','Allowed uses recorded separately','Credit wording copied accurately'],note:'This sample does not provide legal permission for any external image.'}};
const expanded=ref({issue:true,essays:true,visuals:true,production:true}),selection=ref({'ridge':true}),current=ref('ridge'),saved=ref([]);const doc=computed(()=>documents[current.value]);function select(node){if(documents[node.key])current.value=node.key;}function pin(){if(!saved.value.includes(current.value))saved.value.push(current.value);}function expandAll(){expanded.value={issue:true,essays:true,visuals:true,production:true};}
</script>
<template><main class="editorial-library"><header><div><p class="eyebrow">PRIME UI · PRIMEVUE IMPLEMENTATION</p><h1>Find the thread of an issue.</h1><p class="intro">A native tree navigator for an editorial collection, using the Aura theme.</p></div><Tag value="Local specimen" severity="secondary" /></header><div class="library-layout"><aside class="library-nav"><div class="nav-heading"><h2>Issue contents</h2><div><Button label="Expand" text size="small" @click="expandAll"/><Button label="Collapse" text size="small" @click="expanded={}"/></div></div><Tree :value="nodes" v-model:expandedKeys="expanded" v-model:selectionKeys="selection" selectionMode="single" :filter="true" filterMode="lenient" filterPlaceholder="Find a document" aria-label="Editorial document tree" @node-select="select" /><section class="pinned"><h2>Pinned documents <span>{{saved.length}}</span></h2><ul v-if="saved.length"><li v-for="key in saved" :key="key"><span>{{documents[key].title}}</span><Button label="Remove" text size="small" :aria-label="`Remove ${documents[key].title}`" @click="saved=saved.filter(x=>x!==key)"/></li></ul><p v-else>No documents pinned yet.</p></section></aside><article class="document"><div class="document-top"><span>{{doc.type}}</span><Tag :value="doc.status" :severity="doc.status==='Ready'?'success':doc.status==='Review'?'info':'warn'"/></div><h2>{{doc.title}}</h2><p class="owner">{{doc.owner}} · ISSUE 04</p><div class="map-art" aria-hidden="true"><i></i><i></i><i></i><span>FIELD NOTES / 04</span></div><p class="intro">{{doc.intro}}</p><h3>What to inspect</h3><ol><li v-for="item in doc.items" :key="item">{{item}}</li></ol><aside class="document-note">{{doc.note}}</aside><Button :label="saved.includes(current)?'Pinned':'Pin this document'" :disabled="saved.includes(current)" @click="pin"/><p class="local-note">Sample records only. Pinning changes this page’s local state.</p></article></div><p class="selection-status" role="status">Selected document: {{doc.title}}</p></main></template>
```

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

- Для узлов-папок задано selectable:false; только выбор конечного узла документа меняет панель сведений.

- Встроенный фильтр работает по нестрогому принципу и сохраняет соответствующую иерархию.

- Закреплённые документы хранятся отдельно в состоянии приложения.

### Оригинальный редакционный макет

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

```
*{box-sizing:border-box}html{font-size:16px}body{margin:0;background:#f4f6f4;color:#26342d;font-family:system-ui,sans-serif}.editorial-library{max-width:1120px;padding:32px;margin:auto}header{display:flex;align-items:flex-start;justify-content:space-between;gap:24px;margin-bottom:32px}.eyebrow{font-size:11px;letter-spacing:.12em;font-weight:700;color:#5f7566}h1{font-size:34px;line-height:1.15;margin:14px 0}.intro{font-size:15px;line-height:1.7;color:#5f6b63}.library-layout{display:grid;grid-template-columns:340px 1fr;gap:24px}.library-nav,.document{background:white;border:1px solid #dfe5df;border-radius:12px;min-width:0}.nav-heading{padding:18px 18px 0}.nav-heading h2,.pinned h2{font-size:15px;margin:0 0 8px}.nav-heading>div{display:flex;gap:4px}.pinned{border-top:1px solid #dfe5df;padding:20px}.pinned h2{display:flex;justify-content:space-between}.pinned p{font-size:13px;color:#6a766e}.pinned ul{list-style:none;padding:0;margin:0}.pinned li{display:flex;align-items:center;justify-content:space-between;gap:8px;font-size:12px;padding:8px 0}.document{padding:28px}.document-top{display:flex;justify-content:space-between;align-items:center;font-size:12px;color:#617265}.document h2{font-size:28px;line-height:1.2;margin:16px 0 8px}.owner{font-size:11px;letter-spacing:.08em;color:#6a766e}.map-art{height:130px;background:#dae4d4;border-radius:6px;position:relative;overflow:hidden;margin:24px 0}.map-art i{position:absolute;width:300px;height:130px;border:1px solid #63845a;opacity:.55;border-radius:50%;left:10%;top:30%;transform:rotate(-20deg)}.map-art i:nth-child(2){width:240px;height:100px;top:42%;left:16%}.map-art i:nth-child(3){width:180px;height:70px;top:54%;left:22%}.map-art span{position:absolute;top:16px;left:18px;font-size:9px;font-weight:700;letter-spacing:.16em;color:#496342}.document h3{font-size:15px;margin-top:24px}.document ol{padding-left:21px;font-size:14px;line-height:1.7}.document li{margin:10px 0}.document-note{border-left:3px solid #8aad88;background:#f1f5ee;padding:12px 16px;font-size:13px;line-height:1.7;margin:24px 0}.local-note,.selection-status{font-size:12px;color:#6a766e;line-height:1.6}.selection-status{margin-top:20px}@media(max-width:760px){.editorial-library{padding:24px 14px}header{flex-direction:column;gap:6px}h1{font-size:29px}.library-layout{grid-template-columns:1fr}.document{padding:22px}}
```

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

- Контурная иллюстрация — оригинальная декоративная геометрия, а не настоящая карта.

- Размер корневого шрифта явно задан как 16px, чтобы размеры в rem воспроизводились точно.

## Дизайн-система Prime UI Настройка агента

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

Проверено с PrimeVue 4.5.5 и @primeuix/themes 1.2.5. Установленный пакет PrimeVue 4 распространяется по лицензии MIT. Не предполагайте, что для другой основной версии подойдут те же настройки или лицензионные условия.

```
// Create the project first:
// npm create vite@latest prime-ui-specimen -- --template vue
// cd prime-ui-specimen && npm install
// In a Vite Vue 3 project:
// npm install primevue@4.5.5 @primeuix/themes@1.2.5
// Save the complete SFC as App.vue and layout as style.css.
import {createApp} from 'vue';
import PrimeVue from 'primevue/config';
import Aura from '@primeuix/themes/aura';
import App from './App.vue';
import './style.css';
createApp(App).use(PrimeVue, {
  theme: {preset: Aura, options: {darkModeSelector: false}}
}).mount('#app');
// index.html contains <div id="app"></div>.
// This example is pinned to 4.5.5, not the newer 5.x runtime.
// Keep the template index.html and replace its entry with the code above.
// npm run dev
```

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

```
Создайте проект на основе предоставленной библиотеки редакционных документов PrimeVue 4.5.5 и соответствующего пресета Aura из @primeuix/themes 1.2.5. Сохраните встроенные раскрытие дерева, фильтрацию и выбор с использованием стабильных ключей узлов; сведения о выбранном документе храните отдельно от списка закреплённых документов. Закрепляйте и открепляйте существующие документы, не превращая узлы категорий в документы и не создавая дубликаты. Сохраните полную настройку провайдера и исходный адаптивный CSS. Это проверенный пример для четвёртой версии; не заменяйте его незаметно средой выполнения более новой основной версии и не превращайте в процесс закупок.
```

## Prime UI Источники и область применения дизайн-системы

Prime UI экосистемы, реализованная с помощью PrimeVue 4.5.5 и Aura 1.2.5. На этой странице не утверждается, что API или лицензионные условия одинаковы для разных пакетов фреймворка и новых основных версий. Все записи и закрепления хранятся локально.

- Закреплённый выпуск PrimeVue Точная версия реализации, использованная на этой странице.

- Лицензия закреплённого выпуска Для пакета из примера действует лицензия MIT.

- Свойства Tree Свойства управляемого состояния и фильтрации.

- Реализация Tree Поведение выбора и иерархии.

- Источник пресета Aura Структура пресета: примитивы, семантические и компонентные токены; приведённые здесь значения относятся к установленной версии 1.2.5.

- Актуальное руководство по теме Справочник по архитектуре; перед копированием значений проверьте различия между основными версиями.

- Руководство по Tree Справочник по иерархии и клавиатурной навигации.

## Prime UI Связанные ресурсы дизайн-системы

### Pure CSS

Pure CSS — это модульная таблица стилей для сеток, форм, кнопок, меню и таблиц, не требующая среды выполнения виджетов. В этом руководстве показано, как дополнительный адаптивный модуль сетки сочетается со встроенными семантическими элементами в каталоге оборудования с фильтрацией; сортировка и выбор реализованы явно.

### Quasar

Встроенный пошаговый сценарий Quasar с фактическими значениями бренда и отступов, проверкой QForm, конструктором брифов из трёх шагов, выбором формата через переключатели и динамической программой на сорок пять минут.

### React Native Elements

Создайте полноценный конструктор плана концентрации с React Native Elements 5.0.0: реальные роли темы, управляемые поля ввода и варианты выбора, проверка данных, локальное подтверждение и протестированная веб-сборка.


- [Справочник по реализации](https://github.com/primefaces/primevue/blob/4.5.5/packages/primevue/src/tree/Tree.vue)
- [Источник](https://github.com/primefaces/primeuix/tree/main/packages/themes/src/presets/aura)
- [Источник](https://github.com/primefaces/primevue/blob/4.5.5/packages/primevue/src/tree/Tree.vue)
- [Источник](https://primevue.org/theming/styled/)
- [Прочитать вспомогательную спецификацию](https://github.com/primefaces/primevue/blob/4.5.5/LICENSE.md)
- [Прочитать вспомогательную спецификацию](https://github.com/primefaces/primeuix/tree/main/packages/themes/src/presets/aura)
- [Прочитать вспомогательную спецификацию](https://github.com/primefaces/primevue/blob/4.5.5/packages/primevue/src/tree/BaseTree.vue)
- [Прочитать вспомогательную спецификацию](https://github.com/primefaces/primevue/blob/4.5.5/packages/primevue/src/tree/Tree.vue)
- [Прочитать вспомогательную спецификацию](https://primevue.org/tree/)
- [Прочитать вспомогательную спецификацию](https://primevue.org/button/)
- [Прочитать вспомогательную спецификацию](https://github.com/primefaces/primevue/blob/4.5.5/packages/primevue/src/config/PrimeVue.js)
- [Справочник по коду](https://github.com/primefaces/primevue/blob/4.5.5/packages/primevue/src/tree/Tree.vue)
- [Справочник по коду](https://primevue.org/theming/styled/)
- [Закреплённый выпуск PrimeVue Точная версия реализации, использованная на этой странице.](https://github.com/primefaces/primevue/tree/4.5.5)
- [Лицензия закреплённого выпуска Для пакета из примера действует лицензия MIT.](https://github.com/primefaces/primevue/blob/4.5.5/LICENSE.md)
- [Свойства Tree Свойства управляемого состояния и фильтрации.](https://github.com/primefaces/primevue/blob/4.5.5/packages/primevue/src/tree/BaseTree.vue)
- [Реализация Tree Поведение выбора и иерархии.](https://github.com/primefaces/primevue/blob/4.5.5/packages/primevue/src/tree/Tree.vue)
- [Источник пресета Aura Структура пресета: примитивы, семантические и компонентные токены; приведённые здесь значения относятся к установленной версии 1.2.5.](https://github.com/primefaces/primeuix/tree/main/packages/themes/src/presets/aura)
- [Актуальное руководство по теме Справочник по архитектуре; перед копированием значений проверьте различия между основными версиями.](https://primevue.org/theming/styled/)
- [Руководство по Tree Справочник по иерархии и клавиатурной навигации.](https://primevue.org/tree/)