列表和表格
使用样式化的列表和响应式表格组织信息，实现清晰一致的可读性。
列表
Markdown 支持无序列表、有序列表和嵌套列表，满足各种内容需求。
无序列表
对于没有特定顺序的项目，请使用无序列表。每个项目都以 - 符号开头。
- 我是一个列表项。
- 我是另一个列表项。
- 我是最后一个列表项。
- 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'
}
}
}
})
]
})
有序列表
当项目顺序很重要时，例如过程中的步骤，请使用有序列表。每个项目都以数字开头。
- 我是一个列表项。
- 我是另一个列表项。
- 我是最后一个列表项。
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'
}
}
}
})
]
})
嵌套列表
使用子项创建分层列表，以实现复杂结构。将子项缩进四个空格即可实现嵌套。
- 我是一个列表项。
- 我是一个嵌套列表项。
- 我是另一个嵌套列表项。
- 我是另一个列表项。
- 另一个嵌套项
- 深度嵌套项
- 另一个深度嵌套项
- 回到第二级
- 另一个嵌套项
- 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
混合列表
您可以混合使用有序列表和无序列表来实现复杂的层级结构。
- 第一个主要步骤
- 子需求 A
- 子需求 B
- 第二个主要步骤
- 另一个子项
- 最终子项
- 最后一步
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"} |
app.config.ts
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'
}
}
}
})
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',
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'
}
}
}
})
]
})