Listas y tablas
Organice la información con listas con estilo y tablas de respuesta para una legibilidad clara y consistente.
Listados
Markdown admite listas ordenadas, ordenadas y anidadas para diversas necesidades de contenido.
Listas desordenadas
Utilice listas no ordenadas para elementos sin una secuencia específica. Comience cada elemento con un símbolo -.
- Soy un elemento de lista.
- I es otro elemento de la lista.
- I soy el último elemento de la lista.
- 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'
}
}
}
})
]
})Listas ordenadas
Use listas ordenadas cuando el orden de los elementos sea importante, como los pasos de un proceso.
- I soy un elemento de lista.
- I es otro elemento de la lista.
- I soy el último elemento de la lista.
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'
}
}
}
})
]
})Listados anidados
Cree listas jerárquicas con subelementos para estructuras complejas. Indique los subelementos con cuatro espacios para anidar.
- Soy un elemento de lista.
- I es un elemento de lista anidado.
- I soy otro elemento de lista anidado.
- I es otro elemento de la lista.
- Otro elemento anidado
- Objeto anidado profundo
- Otro elemento anidado profundo
- Volver al segundo nivel
- Otro elemento anidado
- 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
Listas mixtas
Puede combinar listas ordenadas y no ordenadas para jerarquías complejas.
- Primer paso importante
- Sub-requisito A
- Sub-requisito B
- Segundo paso importante
- Otro sub-artículo
- Subartículo final
- El último paso
1. First major step
- Sub-requirement A
- Sub-requirement B
2. Second major step
- Another sub-item
- Final sub-item
3. Final step
Tables (Edición española)
Presentar datos estructurados en filas y columnas con claridad. Las tablas son ideales para comparar datos o enumerar propiedades.
| El Prop | por defecto | Tipo |
|---|---|---|
| xf070x | stringx{lang="ts-type"} (Edición española) | |
| xf073x | xf074x | stringxx{lang="ts-type"} (Edición española) |
| xf077x | neutral | stringxx{lang="ts-type"} (Edición española) |
| 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'
}
}
}
}
})
]
})