O componente Theme permite sobrescrever as classes de slot e as props padrão de todos os componentes filhos sem modificar cada um individualmente. Ele usa o mecanismo provide / inject do Vue internamente, então as sobrescritas se aplicam em qualquer profundidade.
app.config.ts.vite.config.ts.Use a prop ui para sobrescrever as classes de slot dos componentes descendentes. As chaves são os nomes dos componentes (camelCase) e os valores são as sobrescritas das classes de slot deles.
Use a prop props para sobrescrever o valor padrão de qualquer prop nos componentes descendentes. Cada chave corresponde a um parcial das props daquele componente.
<NButton color="primary" />) sempre prevalecem sobre <NTheme :props>. Os padrões do Theme só se aplicam quando a prop não foi passada explicitamente.Use chaves diferentes em ui ou props para tematizar vários tipos de componentes de uma vez.
Aninhe vários componentes Theme para compor as sobrescritas. O Theme mais interno tem precedência, enquanto as chaves não sobrescritas são herdadas do Theme externo.
Definir explicitamente qualquer prop (incluindo ui) em um componente individual sempre tem prioridade sobre o componente Theme.
As sobrescritas ficam disponíveis para todos os componentes descendentes, independentemente de quão profundamente aninhados eles estejam.
MyButton é um componente personalizado que renderiza um UButton internamente. As sobrescritas de tema ainda se aplicam porque se propagam por toda a árvore de componentes.Use o componente Theme para aplicar uma estilização consistente em um grupo de componentes de formulário.
<NFormField>, <NFieldGroup> and <NAvatarGroup> keep precedence over <NTheme :props> for size, color and highlight. Validation errors also force the error color over any theme value.Use o namespace prose para tematizar os componentes de tipografia. As chaves ficam aninhadas sob prose (ex.: prose.p, prose.code).
This is a paragraph with a tighter typographic scale applied through the Theme component.
The spacing and font sizes are smaller than the defaults, making it ideal for compact content areas.
| Prop | Default | Type |
|---|---|---|
props | ThemeDefaultsPer-component prop defaults that flow through | |
ui | ThemeUIPer-component slot class overrides (flat shorthand for |
| Slot | Type |
|---|---|
default | {} |