リストとテーブル
スタイル付きリストとレスポンシブテーブルで情報を整理し、明確で一貫した読みやすさを実現。
Lists
Markdownは様々なコンテンツニーズに対応しています。
順序付けされていないリスト
特定の順序のない項目には順序なしリストを使用します。各項目は-記号で開始します。
- Iはリスト項目です。
- は別のリスト項目です。
- Iは最後のリスト項目です。
- 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'
}
}
}
})
]
})順序付けられたリスト
プロセスのステップなど、項目の順序が重要な場合は、順序付きリストを使用します。
- Iはリスト項目です。
- 別のリスト項目です。
- Iは最後のリスト項目です。
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'
}
}
}
})
]
})ネストされたリスト
複雑な構造のサブ項目を含む階層リストを作成します。サブ項目を4つのスペースでインデントしてネストします。
- Iはリスト項目です。
- Iはネストされたリスト項目です。
- Iもネストされたリスト項目です。
- 別のリスト項目です。
- 別のネストされたアイテム
- Deepネストされたアイテム
- 別の深いネストされたアイテム
- 第2レベルに戻る
- 別のネストされたアイテム
- 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
- 第2大ステップ
- 別のサブアイテム
- Finalサブアイテム
- 最終ステップ
1. First major step
- Sub-requirement A
- Sub-requirement B
2. Second major step
- Another sub-item
- Final sub-item
3. Final step
Tables
行と列の構造化データを明確に表示します。テーブルはデータの比較やプロパティの一覧に最適です。
| プロップ | デフォルト | タイプ |
|---|---|---|
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'
}
}
}
}
})
]
})