数据表显示一组原始数据。它们通常出现在桌面企业产品中。
以下组件包含在内
表格
表头
表体
表格行
表格单元格
名称 | 类型 | 默认值 | 描述 |
---|---|---|---|
colors | 对象 | 带有 Tailwind CSS 颜色类别的对象 | |
colors.bgIos | 字符串 | 'hover:bg-black/5 dark:hover:bg-white/10' | 表格行悬停背景颜色 |
colors.bgMaterial | 字符串 | 'hover:bg-md-light-secondary-container dark:hover:bg-md-dark-secondary-container' | 表格行悬停背景颜色 |
colors.dividerMaterial | 字符串 | 'border-md-light-outline dark:border-md-dark-outline' | 表格行分隔线颜色 |
header | 布尔值 | 位于 TableHead 内部 |
名称 | 类型 | 默认值 | 描述 |
---|---|---|---|
colors | 对象 | 带有 Tailwind CSS 颜色类别的对象 | |
colors.textHeaderIos | 字符串 | 'text-black/45 dark:text-white/55' | 表格单元格标题文本颜色 |
colors.textHeaderMaterial | 字符串 | 'text-md-light-on-surface-variant dark:text-md-dark-on-surface-variant' | 表格单元格标题文本颜色 |
header | 布尔值 | 位于 TableHead 内部 |
<template><k-page><k-navbar title="Data Table" /><k-block-title>Plain table</k-block-title><div class="block overflow-x-auto mt-8"><k-table><k-table-head><k-table-row header><k-table-cell header>Dessert (100g serving)</k-table-cell><k-table-cell header class="text-right">Calories</k-table-cell><k-table-cell header class="text-right">Fat (g)</k-table-cell><k-table-cell header class="text-right">Carbs</k-table-cell><k-table-cell header class="text-right">Protein (g)</k-table-cell></k-table-row></k-table-head><k-table-body><k-table-row><k-table-cell>Frozen yogurt</k-table-cell><k-table-cell class="text-right">159</k-table-cell><k-table-cell class="text-right">6.0</k-table-cell><k-table-cell class="text-right">24</k-table-cell><k-table-cell class="text-right">4.0</k-table-cell></k-table-row><k-table-row><k-table-cell>Ice cream sandwich</k-table-cell><k-table-cell class="text-right">237</k-table-cell><k-table-cell class="text-right">9.0</k-table-cell><k-table-cell class="text-right">37</k-table-cell><k-table-cell class="text-right">4.4</k-table-cell></k-table-row><k-table-row><k-table-cell>Eclair</k-table-cell><k-table-cell class="text-right">262</k-table-cell><k-table-cell class="text-right">16.0</k-table-cell><k-table-cell class="text-right">24</k-table-cell><k-table-cell class="text-right">6.0</k-table-cell></k-table-row><k-table-row><k-table-cell>Cupcake</k-table-cell><k-table-cell class="text-right">305</k-table-cell><k-table-cell class="text-right">3.7</k-table-cell><k-table-cell class="text-right">67</k-table-cell><k-table-cell class="text-right">4.3</k-table-cell></k-table-row></k-table-body></k-table></div><k-block-title>Within card</k-block-title><k-card class="block overflow-x-auto mt-8" :content-wrap="false"><k-table><k-table-head><k-table-row header><k-table-cell header>Dessert (100g serving)</k-table-cell><k-table-cell header class="text-right">Calories</k-table-cell><k-table-cell header class="text-right">Fat (g)</k-table-cell><k-table-cell header class="text-right">Carbs</k-table-cell><k-table-cell header class="text-right">Protein (g)</k-table-cell></k-table-row></k-table-head><k-table-body><k-table-row><k-table-cell>Frozen yogurt</k-table-cell><k-table-cell class="text-right">159</k-table-cell><k-table-cell class="text-right">6.0</k-table-cell><k-table-cell class="text-right">24</k-table-cell><k-table-cell class="text-right">4.0</k-table-cell></k-table-row><k-table-row><k-table-cell>Ice cream sandwich</k-table-cell><k-table-cell class="text-right">237</k-table-cell><k-table-cell class="text-right">9.0</k-table-cell><k-table-cell class="text-right">37</k-table-cell><k-table-cell class="text-right">4.4</k-table-cell></k-table-row><k-table-row><k-table-cell>Eclair</k-table-cell><k-table-cell class="text-right">262</k-table-cell><k-table-cell class="text-right">16.0</k-table-cell><k-table-cell class="text-right">24</k-table-cell><k-table-cell class="text-right">6.0</k-table-cell></k-table-row><k-table-row><k-table-cell>Cupcake</k-table-cell><k-table-cell class="text-right">305</k-table-cell><k-table-cell class="text-right">3.7</k-table-cell><k-table-cell class="text-right">67</k-table-cell><k-table-cell class="text-right">4.3</k-table-cell></k-table-row></k-table-body></k-table></k-card></k-page></template><script>import {kPage,kNavbar,kNavbarBackLink,kBlockTitle,kCard,kTable,kTableHead,kTableBody,kTableCell,kTableRow,} from 'konsta/vue';export default {components: {kPage,kNavbar,kNavbarBackLink,kBlockTitle,kCard,kTable,kTableHead,kTableBody,kTableCell,kTableRow,},};</script>