Lijsten en tabellen
Organiseer informatie met gestileerde lijsten en responsieve tabellen voor duidelijke, consistente leesbaarheid.
Lijsten
Markdown ondersteunt ongeordende, geordende en geneste lijsten voor verschillende inhoudsbehoeften.
Ongeordende lijsten
Gebruik ongeordende lijsten voor items zonder een specifieke volgorde. Start elk item met een --symbool.
- Ik ben een lijstitem.
- Ik ben een ander lijstitem.
- Ik ben het laatste lijstitem.
- I'm a list item.
- I'm another list item.
- I'm the last list item.
app.config.ts
export default defineAppConfig({
ui: {
prose: {
ul: {
base: 'list-disc ps-6 my-5 marker:text-(--ui-border-accented)'
},
li: {
base: 'my-1.5 ps-1.5 leading-7 [&>ul]:my-0'
}
}
}
})vite.config.ts
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import ui from '@nuxt/ui/vite'
export default defineConfig({
plugins: [
vue(),
ui({
ui: {
prose: {
ul: {
base: 'list-disc ps-6 my-5 marker:text-(--ui-border-accented)'
},
li: {
base: 'my-1.5 ps-1.5 leading-7 [&>ul]:my-0'
}
}
}
})
]
})Bestelde lijsten
Gebruik geordende lijsten wanneer de bestelling belangrijk is, zoals stappen in een proces. Begin elk item met een nummer.
- Ik ben een lijstitem.
- Ik ben een ander lijstitem.
- Ik ben het laatste lijstitem.
1. I'm a list item.
2. I'm another list item.
3. I'm the last list item.
app.config.ts
export default defineAppConfig({
ui: {
prose: {
ol: {
base: 'list-decimal ps-6 my-5 marker:text-muted'
},
li: {
base: 'my-1.5 ps-1.5 leading-7 [&>ul]:my-0'
}
}
}
})vite.config.ts
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import ui from '@nuxt/ui/vite'
export default defineConfig({
plugins: [
vue(),
ui({
ui: {
prose: {
ol: {
base: 'list-decimal ps-6 my-5 marker:text-muted'
},
li: {
base: 'my-1.5 ps-1.5 leading-7 [&>ul]:my-0'
}
}
}
})
]
})Genestelde lijsten
Maak hiërarchische lijsten met subitems voor complexe structuren. Indent subitems met vier spaties om te nestelen.
- Ik ben een lijstitem.
- Ik ben een geneste lijst item.
- Ik ben een ander geneste lijstitem.
- Ik ben een ander lijstitem.
- Een ander genest item
- Diep genest item
- Nog een diep genest item
- Terug naar tweede niveau
- I'm a list item.
- I'm a nested list item.
- I'm another nested list item.
- I'm another list item.
- Another nested item
- Deep nested item
- Another deep nested item
- Back to second level
Gemengde lijsten
U kunt geordende en ongeordende lijsten combineren voor complexe hiërarchieën.
- Eerste grote stap
- Sub-requirement A
- Sub-requirement B
- Tweede grote stap
- Nog een subitem
- Laatste subitem
- Laatste stap
1. First major step
- Sub-requirement A
- Sub-requirement B
2. Second major step
- Another sub-item
- Final sub-item
3. Final step
Tabellen
Geef gestructureerde gegevens duidelijk weer in rijen en kolommen. Tabellen zijn ideaal voor het vergelijken van gegevens of het aanbieden van eigenschappen.
| Prop | Standaard | Type |
|---|---|---|
name | string | |
size | md | string |
color | neutral | string |
| Prop | Default | Type |
|---------|-----------|--------------------------|
| `name` | | `string`{lang="ts-type"} |
| `size` | `md` | `string`{lang="ts-type"} |
| `color` | `neutral` | `string`{lang="ts-type"} |
app.config.ts
export default defineAppConfig({
ui: {
prose: {
table: {
slots: {
root: 'relative my-5 overflow-x-auto rounded-md outline-primary/25 focus-visible:outline-3',
base: 'w-full border-separate border-spacing-0 rounded-md'
}
},
thead: {
base: 'bg-muted'
},
tbody: {
base: ''
},
tr: {
base: '[&:first-child>th:first-child]:rounded-ss-md [&:first-child>th:last-child]:rounded-se-md [&:last-child>td:first-child]:rounded-es-md [&:last-child>td:last-child]:rounded-ee-md'
},
th: {
base: 'py-3 px-4 font-semibold text-sm border-e border-b first:border-s border-t border-muted',
variants: {
align: {
left: 'text-start',
center: 'text-center',
right: 'text-end'
}
},
defaultVariants: {
align: 'left'
}
},
td: {
base: 'py-3 px-4 text-sm align-top border-e border-b first:border-s border-muted [&_code]:text-xs/5 [&_p]:my-0 [&_p]:leading-6 [&_ul]:my-0 [&_ol]:my-0 [&_ul]:ps-4.5 [&_ol]:ps-4.5 [&_li]:leading-6 [&_li]:my-0.5',
variants: {
align: {
left: 'text-start',
center: 'text-center',
right: 'text-end'
}
},
defaultVariants: {
align: 'left'
}
}
}
}
})vite.config.ts
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import ui from '@nuxt/ui/vite'
export default defineConfig({
plugins: [
vue(),
ui({
ui: {
prose: {
table: {
slots: {
root: 'relative my-5 overflow-x-auto rounded-md outline-primary/25 focus-visible:outline-3',
base: 'w-full border-separate border-spacing-0 rounded-md'
}
},
thead: {
base: 'bg-muted'
},
tbody: {
base: ''
},
tr: {
base: '[&:first-child>th:first-child]:rounded-ss-md [&:first-child>th:last-child]:rounded-se-md [&:last-child>td:first-child]:rounded-es-md [&:last-child>td:last-child]:rounded-ee-md'
},
th: {
base: 'py-3 px-4 font-semibold text-sm border-e border-b first:border-s border-t border-muted',
variants: {
align: {
left: 'text-start',
center: 'text-center',
right: 'text-end'
}
},
defaultVariants: {
align: 'left'
}
},
td: {
base: 'py-3 px-4 text-sm align-top border-e border-b first:border-s border-muted [&_code]:text-xs/5 [&_p]:my-0 [&_p]:leading-6 [&_ul]:my-0 [&_ol]:my-0 [&_ul]:ps-4.5 [&_ol]:ps-4.5 [&_li]:leading-6 [&_li]:my-0.5',
variants: {
align: {
left: 'text-start',
center: 'text-center',
right: 'text-end'
}
},
defaultVariants: {
align: 'left'
}
}
}
}
})
]
})