Markdown 支持无序、有序和嵌套列表，以满足各种内容需求。
用于项目之间没有特定顺序的情况。每个项目以 - 符号开头。
- 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 '@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'
}
}
}
})
]
})
当项目顺序很重要时，例如流程中的步骤，请使用有序列表。每个项目以数字开头。
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 '@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'
}
}
}
})
]
})
使用子项创建分层列表，以实现复杂的结构。子项缩进四个空格以进行嵌套。
- 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
您可以结合使用有序和无序列表来创建复杂的层次结构。
1. First major step
- Sub-requirement A
- Sub-requirement B
2. Second major step
- Another sub-item
- Final sub-item
3. Final step
清晰地呈现行和列中的结构化数据。表格非常适合比较数据或列出属性。
| 属性 | 默认值 | 类型 |
|---|---|---|
name | string | |
尺寸 | 中等尺寸 | 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',
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 text-left border-e border-b first:border-s border-t border-muted'
},
td: {
base: 'py-3 px-4 text-sm text-left 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'
}
}
}
})
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',
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 text-left border-e border-b first:border-s border-t border-muted'
},
td: {
base: 'py-3 px-4 text-sm text-left 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'
}
}
}
})
]
})