O markdown suporta listas não ordenadas, ordenadas e aninhadas para diversas necessidades de conteúdo.
Use listas não ordenadas para itens sem uma sequência específica. Comece cada item com o símbolo -.
- I'm a list item.
- I'm another list item.
- I'm the last list item.
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'
}
}
}
})
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import ui from '@nitro/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'
}
}
}
})
]
})
Use listas ordenadas quando a ordem dos itens importa, como etapas de um processo. Comece cada item com um número.
1. I'm a list item.
2. I'm another list item.
3. I'm the last list item.
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'
}
}
}
})
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import ui from '@nitro/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'
}
}
}
})
]
})
Crie listas hierárquicas com subitens para estruturas complexas. Recue os subitens em quatro espaços para o aninhamento.
- 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
Você pode combinar listas ordenadas e não ordenadas para hierarquias complexas.
1. First major step
- Sub-requirement A
- Sub-requirement B
2. Second major step
- Another sub-item
- Final sub-item
3. Final step
Apresente dados estruturados em linhas e colunas com clareza. Tabelas são ideais para comparar dados ou listar propriedades.
| Prop | Default | 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"} |
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-tl-md [&:first-child>th:last-child]:rounded-tr-md [&:last-child>td:first-child]:rounded-bl-md [&:last-child>td:last-child]:rounded-br-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-left',
center: 'text-center',
right: 'text-right'
}
},
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-left',
center: 'text-center',
right: 'text-right'
}
},
defaultVariants: {
align: 'left'
}
}
}
}
})
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import ui from '@nitro/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-tl-md [&:first-child>th:last-child]:rounded-tr-md [&:last-child>td:first-child]:rounded-bl-md [&:last-child>td:last-child]:rounded-br-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-left',
center: 'text-center',
right: 'text-right'
}
},
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-left',
center: 'text-center',
right: 'text-right'
}
},
defaultVariants: {
align: 'left'
}
}
}
}
})
]
})