# Sistema de design Prime UI

## Prévia da interface do sistema de design Prime UI

Filtre uma questão hierárquica, selecione um documento, expanda ou recolha pastas e fixe referências locais.

## Referência de design do sistema de design Prime UI

Este recurso de Prime UI implementa PrimeVue 4.5.5 com @primeuix/themes 1.2.5 Aura, em vez de afirmar que existe um único API intercambiável entre PrimeVue, PrimeReact e PrimeNG. Os valores foram examinados na predefinição instalada. A página fixa a raiz em 16px; a geometria em rem é interpretada com base nessa escolha explícita.

### Primitivos esmeralda do Aura

| Nome / Regra | Valor / Configuração | Uso |
| --- | --- | --- |
| primitive.emerald.50 | #ecfdf5 | Cor primitiva real usada pela escala primária padrão. |
| primitive.emerald.100 | #d1fae5 | Cor primitiva real usada pela escala primária padrão. |
| primitive.emerald.200 | #a7f3d0 | Cor primitiva real usada pela escala primária padrão. |
| primitive.emerald.300 | #6ee7b7 | Cor primitiva real usada pela escala primária padrão. |
| primitive.emerald.400 | #34d399 | Cor primitiva real usada pela escala primária padrão. |
| primitive.emerald.500 | #10b981 | Cor primitiva real usada pela escala primária padrão. |
| primitive.emerald.600 | #059669 | Cor primitiva real usada pela escala primária padrão. |
| primitive.emerald.700 | #047857 | Cor primitiva real usada pela escala primária padrão. |
| primitive.emerald.800 | #065f46 | Cor primitiva real usada pela escala primária padrão. |
| primitive.emerald.900 | #064e3b | Cor primitiva real usada pela escala primária padrão. |
| primitive.emerald.950 | #022c22 | Cor primitiva real usada pela escala primária padrão. |
### Papéis semânticos do Aura claro

| Nome / Regra | Valor / Configuração | Uso |
| --- | --- | --- |
| semantic.colorScheme.light.primary.color | {primary.500} | Valor real da predefinição Aura; as chaves preservam uma referência a token. |
| semantic.colorScheme.light.primary.contrastColor | #ffffff | Valor real da predefinição Aura; as chaves preservam uma referência a token. |
| semantic.colorScheme.light.primary.hoverColor | {primary.600} | Valor real da predefinição Aura; as chaves preservam uma referência a token. |
| semantic.colorScheme.light.primary.activeColor | {primary.700} | Valor real da predefinição Aura; as chaves preservam uma referência a token. |
| semantic.colorScheme.light.highlight.background | {primary.50} | Valor real da predefinição Aura; as chaves preservam uma referência a token. |
| semantic.colorScheme.light.highlight.focusBackground | {primary.100} | Valor real da predefinição Aura; as chaves preservam uma referência a token. |
| semantic.colorScheme.light.highlight.color | {primary.700} | Valor real da predefinição Aura; as chaves preservam uma referência a token. |
| semantic.colorScheme.light.highlight.focusColor | {primary.800} | Valor real da predefinição Aura; as chaves preservam uma referência a token. |
| semantic.colorScheme.light.text.color | {surface.700} | Valor real da predefinição Aura; as chaves preservam uma referência a token. |
| semantic.colorScheme.light.text.hoverColor | {surface.800} | Valor real da predefinição Aura; as chaves preservam uma referência a token. |
| semantic.colorScheme.light.text.mutedColor | {surface.500} | Valor real da predefinição Aura; as chaves preservam uma referência a token. |
| semantic.colorScheme.light.text.hoverMutedColor | {surface.600} | Valor real da predefinição Aura; as chaves preservam uma referência a token. |
### Raios e espaçamento dos campos no Aura

| Nome / Regra | Valor / Configuração | Uso |
| --- | --- | --- |
| primitive.borderRadius.none | 0 | Valor real da predefinição Aura; as chaves preservam uma referência a token. |
| primitive.borderRadius.xs | 2px | Valor real da predefinição Aura; as chaves preservam uma referência a token. |
| primitive.borderRadius.sm | 4px | Valor real da predefinição Aura; as chaves preservam uma referência a token. |
| primitive.borderRadius.md | 6px | Valor real da predefinição Aura; as chaves preservam uma referência a token. |
| primitive.borderRadius.lg | 8px | Valor real da predefinição Aura; as chaves preservam uma referência a token. |
| primitive.borderRadius.xl | 12px | Valor real da predefinição Aura; as chaves preservam uma referência a token. |
| semantic.formField.paddingX | 0.75rem | Referência real compartilhada de preenchimento ou raio dos campos. |
| semantic.formField.paddingY | 0.5rem | Referência real compartilhada de preenchimento ou raio dos campos. |
| semantic.formField.borderRadius | {border.radius.md} | Referência real compartilhada de preenchimento ou raio dos campos. |
| semantic.focusRing.width | 1px | Valor real da predefinição Aura; as chaves preservam uma referência a token. |
| semantic.focusRing.style | solid | Valor real da predefinição Aura; as chaves preservam uma referência a token. |
| semantic.focusRing.color | {primary.color} | Valor real da predefinição Aura; as chaves preservam uma referência a token. |
| semantic.focusRing.offset | 2px | Valor real da predefinição Aura; as chaves preservam uma referência a token. |
| semantic.focusRing.shadow | none | Valor real da predefinição Aura; as chaves preservam uma referência a token. |
### Geometria nativa da Tree

| Nome / Regra | Valor / Configuração | Uso |
| --- | --- | --- |
| components.tree.root.padding | 1rem | Valor real do layout raiz da Tree. |
| components.tree.root.gap | 2px | Valor real do layout raiz da Tree. |
| components.tree.root.indent | 1rem | Valor real do layout raiz da Tree. |
| components.tree.node.padding | 0.25rem 0.5rem | Espaçamento dos nós ou papel de seleção real. |
| components.tree.node.gap | 0.25rem | Espaçamento dos nós ou papel de seleção real. |
| components.tree.node.selectedBackground | {highlight.background} | Espaçamento dos nós ou papel de seleção real. |
| components.tree.node.selectedColor | {highlight.color} | Espaçamento dos nós ou papel de seleção real. |
| components.tree.nodeToggleButton.size | 1.75rem | Geometria nativa do alvo de expansão. |
### Tipografia e espaçamento definidos explicitamente pela aplicação

| Nome / Regra | Valor / Configuração | Uso |
| --- | --- | --- |
| Root font size | 16px | Referência original explícita para este exemplo. |
| Font family | system-ui, sans-serif | Fonte original da página; não é uma fonte baixada do Aura. |
| Page heading | 34px / 1.15; 29px mobile | Hierarquia editorial original. |
| Detail body | 15px / 1.7 | Estilo original de leitura de documentos. |
| Sidebar / gap | 340px / 24px | Layout original para desktop. |
| Mobile breakpoint | 760px | Limite original do layout empilhado. |
## Guia completo do sistema de design Prime UI

Um guia prático para escolher, aplicar e avaliar este sistema em uma interface real.

Orientações completas, um ponto de partida para a implementação e links para o código-fonte.

## O sistema de design Prime UI é um ecossistema, não uma única importação

### Prime UI é um ecossistema, não uma única importação

> O ecossistema de interface do usuário da PrimeTek inclui implementações para diferentes frameworks. Esta página escolhe uma implementação concreta: PrimeVue 4.5.5 com Vue 3 e a predefinição Aura de @primeuix/themes 1.2.5. O arquivo de entrada completo, as importações e o exemplo de componente fazem parte dessa configuração do Vue. Um projeto React ou Angular precisa do pacote e do API correspondentes, em vez de copiar estas tags do Vue sem alterações.

Fixar a versão é importante neste caso. O pacote instalado 4.5.5 tem licença MIT, e o exemplo local verificado funciona sem uma chave de licença. Um teste com o runtime mais recente, 5.0.2, exibiu um erro de licença do PrimeUI; por isso, este exemplo não apresenta deliberadamente um comando para a versão mais recente sem ressalvas nem sugere que os termos de autorização sejam idênticos entre versões.

Consulte a especificação de apoio

## Tokens primitivos, semânticos e de componentes formam uma cadeia no sistema de design Prime UI

### Tokens primitivos, semânticos e de componentes formam uma cadeia

O Aura separa os primitivos de cores brutas dos papéis semânticos e dos valores dos componentes. A escala primária padrão faz referência a primitivos esmeralda. No modo claro, primary.color faz referência a primary.500, hoverColor a primary.600 e activeColor a primary.700. Os papéis de destaque usam superfícies primárias mais claras e cores de primeiro plano mais escuras para a seleção.

A Tree mapeia então o fundo e o texto selecionados para os papéis de destaque, em vez de definir outra cor verde sem relação. A especificação mantém intactas as referências entre chaves, pois elas mostram como um tema propaga alterações. Substituir cada alias por um valor hexadecimal isolado ocultaria essa dependência útil.

Consulte a especificação de apoio

## Leia os valores da predefinição correspondente no sistema de design Prime UI

### Leia os valores da predefinição correspondente

Na predefinição Aura fixada, o preenchimento e a indentação da raiz da Tree são de um rem, o preenchimento dos nós é de 0.25rem 0.5rem e o botão de alternância mede 1.75rem. O exemplo fixa o elemento html em dezesseis pixels, deixando essas dimensões explícitas. Versões diferentes da predefinição ou tamanhos de raiz distintos podem resultar em densidades diferentes, mesmo quando a marcação do componente é semelhante.

Os primitivos de raio da borda variam de zero a dois, quatro, seis, oito e doze pixels. O preenchimento horizontal compartilhado dos campos é de 0.75rem, e o vertical, de 0.5rem. O título de trinta e quatro pixels, a fonte do sistema e o espaço de vinte e quatro pixels entre colunas são escolhas originais de layout da página, externas ao tema nativo do componente.

Consulte a especificação de apoio

## As chaves dos nós mantêm estáveis a expansão e a seleção no sistema de design Prime UI

### As chaves dos nós mantêm estáveis a expansão e a seleção

A árvore modela uma questão, três pastas e seis documentos. Cada nó tem uma chave estável e um rótulo. Os nós de pasta têm selectable:false, organizando a hierarquia sem se passarem por documentos legíveis. O modelo expandedKeys controla as pastas abertas; Expandir e Recolher substituem esse mapa de forma deliberada.

A seleção única usa selectionKeys e um manipulador node-select. Somente uma chave encontrada no mapa de registros de documentos atualiza o painel de detalhes. Renomear um rótulo visível não exige alterar sua identidade, e recolher uma pasta não apaga o documento selecionado nem seu estado fixado.

Consulte a especificação de apoio

## A filtragem nativa preserva o contexto do resultado no sistema de design Prime UI

### A filtragem nativa preserva o contexto do resultado

A Tree ativa o filtro integrado com filterMode lenient e o texto de espaço reservado visível “Buscar um documento”. Ao pesquisar por maps, a hierarquia exibida é reduzida ao documento correspondente e seus ancestrais. Assim, o leitor ainda consegue entender onde o resultado se encaixa, em vez de receber uma lista plana e desconexa de sugestões.

Limpar o filtro restaura a hierarquia. A filtragem não altera os nós de origem nem remove documentos fixados. O painel de detalhes mantém a última folha selecionada explicitamente, evitando uma mudança inesperada de conteúdo a cada tecla. Uma coleção maior talvez precise carregar dados sob demanda, mas este exemplo completo usa seis registros locais e não afirma oferecer pesquisa no servidor.

1. Pesquise por “maps” e confira o contexto da questão e da pasta preservado.

2. Selecione “Three regional maps” para atualizar o painel do documento.

3. Limpe o filtro e confirme que o documento selecionado continua disponível na hierarquia.

Consulte a especificação de apoio

## Um documento selecionado precisa de conteúdo próprio e útil no sistema de design Prime UI

### Um documento selecionado precisa de conteúdo próprio e útil

Cada documento tem um tipo, responsável, status, introdução, lista de verificação e observação específica. Um ensaio pede que se confira a sequência e as legendas; uma referência de mapas, que se verifiquem a orientação consistente e a escala independente; e uma lista de verificação de provas, que se avaliem a legibilidade e o corte. O conteúdo muda conforme a seleção, em vez de repetir o mesmo parágrafo sob seis títulos.

As etiquetas de status são metadados descritivos de exemplo. Elas não acionam um fluxo de publicação externo. O gráfico de contorno é uma geometria decorativa original, identificado como tal quando relevante; não é um mapa geográfico e não deve ser interpretado dessa forma.

Consulte a especificação de apoio

## O estado fixado é independente do modelo da árvore no sistema de design Prime UI

### O estado fixado é independente do modelo da árvore

Fixar este documento adiciona a chave do documento atual a um array local. Quando a chave já está presente, o botão muda para “Fixado” e é desativado, impedindo entradas duplicadas. Remover uma linha fixada exclui apenas essa chave e não altera a seleção da árvore. A contagem de itens fixados é derivada do array.

Essa separação é importante porque seleção, expansão e referências salvas atendem a tarefas diferentes. É possível recolher todas as pastas e manter um ensaio selecionado aberto, ou filtrar outra parte da questão sem perder uma referência fixada. Nenhuma dessas ações implica que um documento remoto tenha sido editado.

Consulte a especificação de apoio

## Mantenha o modelo de teclado nativo da Tree no sistema de design Prime UI

### Mantenha o modelo de teclado nativo da Tree

A Tree nativa expõe a hierarquia por meio dos papéis tree e treeitem, dos atributos de seleção e expansão e da relação entre níveis aninhados. Seu modelo de teclado usa as setas para percorrer os nós visíveis e expandir ou recolher ramificações; Enter ou Espaço seleciona o nó em foco. A página fornece um aria-label claro para a coleção.

O painel de detalhes e a lista de itens fixados usam títulos, listas e botões identificados por nomes comuns. Em dispositivos móveis, o navegador aparece antes do documento na ordem de leitura. O layout se empilha no ponto de interrupção original de 760px, sem cortar a árvore nem remover as instruções do documento, e uma linha de status informa a seleção atual.

- Use chaves estáveis quando a ordem visível da árvore mudar.

- Mantenha as pastas não selecionáveis quando não tiverem conteúdo de detalhes associado.

- Dê aos botões “Remover” um nome de documento específico, em vez de repetir um rótulo ambíguo.

Consulte a especificação de apoio

## Registre o tema uma vez na raiz do Vue no sistema de design Prime UI

### Registre o tema uma vez na raiz do Vue

O arquivo de entrada importa PrimeVue de primevue/config, Aura de @primeuix/themes/aura e o App.vue completo. Ele registra o plugin com theme.preset definido como Aura. darkModeSelector é false neste exemplo fixo em modo claro; em um tema de produção, a alternância de tema deve ser configurada usando as opções compatíveis da versão correspondente, em vez de misturar a documentação de uma versão principal mais recente.

Os componentes com estilos do PrimeVue geram os estilos necessários a partir da predefinição. O arquivo style.css fornecido define apenas o layout original da página e a ilustração. Nenhuma importação legada de primevue/resources/theme.css é usada. Na configuração verificada, foi selecionada uma folha da árvore, ela foi fixada, a hierarquia foi filtrada e a interface foi renderizada em 390px sem aviso de licença inválida.

Consulte a especificação de apoio

## Exemplos de componentes do sistema de design Prime UI

### Tree nativa completa e visualização de detalhes

Chaves de nó estáveis, mapas controlados de expansão/seleção, filtragem e tratamento de seleção de nó.

```
<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>
```

Referência de código

- Os nós de pasta usam selectable:false; somente as folhas de documento alteram a visualização de detalhes.

- O filtro nativo é leniente e preserva a hierarquia correspondente.

- Os documentos fixados pertencem a um estado separado da aplicação.

### Layout editorial original

Um navegador responsivo de documentos em torno de componentes nativos estilizados com 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}}
```

Referência de código

- A ilustração de curvas de nível é uma geometria decorativa original, não um mapa real.

- O tamanho da raiz é definido explicitamente como 16px para que as dimensões em rem sejam reproduzíveis.

## Configuração do agente do sistema de design Prime UI

### Ponto de partida para implementação

PrimeVue 4.5.5 verificado com @primeuix/themes 1.2.5. O pacote instalado do PrimeVue 4 usa a licença MIT. Não presuma que a mesma configuração ou os mesmos requisitos de licença se aplicam a outra versão principal.

```
// 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
```

### Um prompt para seu projeto

```
Desenvolva com base na biblioteca editorial de documentos fornecida, feita com PrimeVue 4.5.5 e a predefinição Aura correspondente de @primeuix/themes 1.2.5. Preserve a expansão, a filtragem e a seleção da Tree nativa com chaves de nó estáveis, mantendo os detalhes do documento selecionado separados da lista de documentos fixados. Fixe e desafixe documentos reais sem transformar nós de categoria em documentos nem duplicar itens fixados. Mantenha toda a configuração do provedor e o CSS responsivo original. Este é o exemplo verificado da versão quatro; não o substitua silenciosamente por um runtime de uma versão principal mais recente nem o transforme em um fluxo de trabalho de compras.
```

## Fontes e escopo do sistema de design Prime UI

Ecossistema Prime UI, implementado especificamente com PrimeVue 4.5.5 e Aura 1.2.5. Esta página não afirma que as APIs ou os requisitos de licença são idênticos entre pacotes de frameworks ou versões principais mais recentes. Todos os registros e itens fixados são locais.

- Versão fixada do PrimeVue Linha de implementação exata usada nesta página.

- Licença fixada Licença MIT para o pacote de exemplo.

- Propriedades de Tree Propriedades de estado controlado e filtragem.

- Implementação de Tree Comportamento de seleção e hierarquia.

- Origem da predefinição Aura Estrutura de predefinições primitivas, semânticas e de componentes; os valores aqui correspondem à versão 1.2.5 instalada e fixada.

- Guia atual do tema Referência de arquitetura; verifique as diferenças entre versões principais antes de copiar valores.

- Guia de Tree Referência de hierarquia e teclado.

## Recursos relacionados ao sistema de design Prime UI

### Pure CSS

Pure CSS é uma folha de estilos modular para grades, formulários, botões, menus e tabelas, sem um runtime de widgets. Este guia mostra como o módulo opcional de grade responsiva e os elementos semânticos nativos se combinam em um catálogo de equipamentos filtrável, com ordenação e seleção implementadas explicitamente.

### Quasar

Um fluxo guiado nativo do Quasar, com valores reais de marca e espaçamento, validação do QForm, um criador de brief em três etapas, opções de formato por botões de opção e uma agenda dinâmica de quarenta e cinco minutos.

### React Native Elements

Crie um compositor completo de plano de foco com React Native Elements 5.0.0: funções reais de tema, campos e seleções controlados, validação, confirmação local e uma compilação web testada.


- [Referência de implementação](https://github.com/primefaces/primevue/blob/4.5.5/packages/primevue/src/tree/Tree.vue)
- [Fonte](https://github.com/primefaces/primeuix/tree/main/packages/themes/src/presets/aura)
- [Fonte](https://github.com/primefaces/primevue/blob/4.5.5/packages/primevue/src/tree/Tree.vue)
- [Fonte](https://primevue.org/theming/styled/)
- [Consulte a especificação de apoio](https://github.com/primefaces/primevue/blob/4.5.5/LICENSE.md)
- [Consulte a especificação de apoio](https://github.com/primefaces/primeuix/tree/main/packages/themes/src/presets/aura)
- [Consulte a especificação de apoio](https://github.com/primefaces/primevue/blob/4.5.5/packages/primevue/src/tree/BaseTree.vue)
- [Consulte a especificação de apoio](https://github.com/primefaces/primevue/blob/4.5.5/packages/primevue/src/tree/Tree.vue)
- [Consulte a especificação de apoio](https://primevue.org/tree/)
- [Consulte a especificação de apoio](https://primevue.org/button/)
- [Consulte a especificação de apoio](https://github.com/primefaces/primevue/blob/4.5.5/packages/primevue/src/config/PrimeVue.js)
- [Referência de código](https://github.com/primefaces/primevue/blob/4.5.5/packages/primevue/src/tree/Tree.vue)
- [Referência de código](https://primevue.org/theming/styled/)
- [Versão fixada do PrimeVue Linha de implementação exata usada nesta página.](https://github.com/primefaces/primevue/tree/4.5.5)
- [Licença fixada Licença MIT para o pacote de exemplo.](https://github.com/primefaces/primevue/blob/4.5.5/LICENSE.md)
- [Propriedades de Tree Propriedades de estado controlado e filtragem.](https://github.com/primefaces/primevue/blob/4.5.5/packages/primevue/src/tree/BaseTree.vue)
- [Implementação de Tree Comportamento de seleção e hierarquia.](https://github.com/primefaces/primevue/blob/4.5.5/packages/primevue/src/tree/Tree.vue)
- [Origem da predefinição Aura Estrutura de predefinições primitivas, semânticas e de componentes; os valores aqui correspondem à versão 1.2.5 instalada e fixada.](https://github.com/primefaces/primeuix/tree/main/packages/themes/src/presets/aura)
- [Guia atual do tema Referência de arquitetura; verifique as diferenças entre versões principais antes de copiar valores.](https://primevue.org/theming/styled/)
- [Guia de Tree Referência de hierarquia e teclado.](https://primevue.org/tree/)