Listes et tables
Organisez les informations avec des listes stylisées et des tableaux réactifs pour une lisibilité claire et cohérente.
listes
Markdown prend en charge les listes non ordonnées, ordonnées et imbriquées pour divers besoins de contenu.
Listes non répertoriées
Utilisez des listes non ordonnées pour les éléments sans séquence spécifique. Commencez chaque élément par un symbole -.
- I est un élément de liste.
- I est un autre élément de liste.
- I est le dernier élément de la liste.
- 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'
}
}
}
})
]
})Listes commandées
Utilisez des listes ordonnées lorsque l'ordre des éléments est important, comme les étapes d'un processus. Commencez chaque élément par un numéro.
- I est un élément de liste.
- I est un autre élément de liste.
- I est le dernier élément de la liste.
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'
}
}
}
})
]
})Listes imbriquées
Créez des listes hiérarchiques avec des sous-éléments pour les structures complexes. Retrait des sous-éléments par quatre espaces pour l'imbrication.
- I est un élément de liste.
- I est un élément de liste imbriqué.
- I est un autre élément de liste imbriqué.
- I est un autre élément de liste.
- Autre élément imbriqué
- Objet imbriqué profond
- Un autre élément imbriqué profond
- Retour au deuxième niveau
- Autre élément imbriqué
- 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
Listes mixtes
Vous pouvez combiner des listes ordonnées et non ordonnées pour des hiérarchies complexes.
- Première étape importante
- Sous-exigence A
- Sous-exigence B
- Deuxième étape importante
- Autre sous-article
- Dernier sous-point
- Étape finale
1. First major step
- Sub-requirement A
- Sub-requirement B
2. Second major step
- Another sub-item
- Final sub-item
3. Final step
Tables
Présentez clairement des données structurées en lignes et en colonnes. Les tableaux sont idéaux pour comparer des données ou répertorier des propriétés.
| Prop à | Défaut | type |
|---|---|---|
name | stringx{lang="ts-type"} | |
size | md | stringx{lang="ts-type"} |
color | neutral | stringx{lang="ts-type"} |
| 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'
}
}
}
}
})
]
})