목록 및 테이블
명확하고 일관성 있는 가독성을 위해 스타일이 지정된 목록과 반응형 테이블로 정보를 구성합니다.
List 목록
Markdown은 다양한 콘텐츠 요구에 맞게 정렬되지 않은, 정렬된, 중첩된 목록을 지원합니다.Markdown supports unordered, ordered, and nested list for various content needs.
순서가 지정되지 않은 목록
특정 순서가 없는 항목에는 순서가 없는 목록을 사용합니다. - 기호로 각 항목을 시작합니다.
- I는 목록 항목입니다.
- 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는 또 다른 목록 항목입니다.
- 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'
}
}
}
})
]
})중첩된 목록
복잡한 구조에 대한 하위 항목이 있는 계층 목록을 만듭니다. 중첩할 하위 항목을 네 개의 공백으로 들여씁니다.
- I는 리스트 항목입니다.
- I는 중첩된 목록 항목입니다.
- I는 또 다른 중첩된 목록 항목입니다.
- I는 또 다른 목록 항목입니다.
- 다른 중첩된 항목
- 깊은 중첩 항목
- 다른 깊은 중첩 항목
- 두 번째 레벨로 돌아가기
- 다른 중첩된 항목
- 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
- 두 번째 주요 단계
- 다른 하위 항목
- Final 하위 항목
- 최종 단계
1. First major step
- Sub-requirement A
- Sub-requirement B
2. Second major step
- Another sub-item
- Final sub-item
3. Final step
테이블
행과 열에 구조화된 데이터를 명확하게 표시합니다. 테이블은 데이터를 비교하거나 등록 정보를 나열하는 데 적합합니다.
| 프로프 (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"} |
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'
}
}
}
}
})
]
})