PageList
Um layout de lista vertical para exibir conteúdo em formato empilhado.
Uso
O componente PageList oferece uma maneira flexível de exibir conteúdo em um layout de lista vertical. Ele é perfeito para criar listas empilhadas de componentes PageCard ou quaisquer outros elementos, com divisórias opcionais entre os itens.
Divisória
Use a prop divide para adicionar uma divisória entre cada elemento filho.
API
Props
| Prop | Default | Type |
|---|---|---|
as | 'div' | anyThe element or component this component should render as. |
divide | false | boolean |
ui | { base?: any; } |
Slots
| Slot | Type |
|---|---|
default | {} |
Tema
app.config.ts
export default defineAppConfig({
ui: {
pageList: {
base: 'relative flex flex-col',
variants: {
divide: {
true: '*:not-last:after:absolute *:not-last:after:inset-x-1 *:not-last:after:bottom-0 *:not-last:after:bg-border *:not-last:after:h-px'
}
}
}
}
})
vite.config.ts
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import ui from '@nitro/ui/vite'
export default defineConfig({
plugins: [
vue(),
ui({
ui: {
pageList: {
base: 'relative flex flex-col',
variants: {
divide: {
true: '*:not-last:after:absolute *:not-last:after:inset-x-1 *:not-last:after:bottom-0 *:not-last:after:bg-border *:not-last:after:h-px'
}
}
}
}
})
]
})
Changelog
No recent changes