Table

逐行书写、支持列跨、页脚与说明文字的表格，外观与 Table 一致，即 uikit:Table。

示例可交互

Table — Avalonia UIKit

Live demo unavailable

<uikit:Table Width="560" HorizontalAlignment="Left">
  <uikit:TableHeader>
    <uikit:TableRow>
      <uikit:TableHead PreferredWidth="150">Invoice</uikit:TableHead>
      <uikit:TableHead ColSpan="2">Status</uikit:TableHead>
      <uikit:TableHead HorizontalContentAlignment="Right">Amount</uikit:TableHead>
      <uikit:TableHead HorizontalContentAlignment="Right">Date</uikit:TableHead>
    </uikit:TableRow>
  </uikit:TableHeader>
  <uikit:TableBody>
    <uikit:TableRow>
      <uikit:TableCell PreferredWidth="150">INV001</uikit:TableCell>
      <uikit:TableCell><uikit:TagLabel Classes="success outline xsmall" Content="Paid" /></uikit:TableCell>
      <uikit:TableCell>Credit Card</uikit:TableCell>
      <uikit:TableCell HorizontalContentAlignment="Right">$250.00</uikit:TableCell>
      <uikit:TableCell HorizontalContentAlignment="Right">2024-01-15</uikit:TableCell>
    </uikit:TableRow>
    <uikit:TableRow>
      <uikit:TableCell PreferredWidth="150">INV002</uikit:TableCell>
      <uikit:TableCell><uikit:TagLabel Classes="warning outline xsmall" Content="Pending" /></uikit:TableCell>
      <uikit:TableCell>PayPal</uikit:TableCell>
      <uikit:TableCell HorizontalContentAlignment="Right">$150.00</uikit:TableCell>
      <uikit:TableCell HorizontalContentAlignment="Right">2024-02-01</uikit:TableCell>
    </uikit:TableRow>
    <uikit:TableRow>
      <uikit:TableCell PreferredWidth="150">INV003</uikit:TableCell>
      <uikit:TableCell><uikit:TagLabel Classes="danger outline xsmall" Content="Unpaid" /></uikit:TableCell>
      <uikit:TableCell>Bank Transfer</uikit:TableCell>
      <uikit:TableCell HorizontalContentAlignment="Right">$350.00</uikit:TableCell>
      <uikit:TableCell HorizontalContentAlignment="Right">2024-02-15</uikit:TableCell>
    </uikit:TableRow>
    <uikit:TableRow>
      <uikit:TableCell PreferredWidth="150">INV004</uikit:TableCell>
      <uikit:TableCell><uikit:TagLabel Classes="success outline xsmall" Content="Paid" /></uikit:TableCell>
      <uikit:TableCell>Credit Card</uikit:TableCell>
      <uikit:TableCell HorizontalContentAlignment="Right">$450.00</uikit:TableCell>
      <uikit:TableCell HorizontalContentAlignment="Right">2024-03-01</uikit:TableCell>
    </uikit:TableRow>
  </uikit:TableBody>
  <uikit:TableFooter>
    <uikit:TableRow>
      <uikit:TableCell ColSpan="3">Total</uikit:TableCell>
      <uikit:TableCell ColSpan="2" HorizontalContentAlignment="Right">$1,200.00</uikit:TableCell>
    </uikit:TableRow>
  </uikit:TableFooter>
  <uikit:TableCaption>A list of your recent invoices.</uikit:TableCaption>
</uikit:Table>

用法

uikit:Table 具有 Table 的外观，但它是逐行书写而非绑定到数据项：按给定顺序堆叠 uikit:TableHeader、uikit:TableBody 与 uikit:TableFooter（各自包含若干 uikit:TableRow），以及 uikit:TableCaption。表头行放置 uikit:TableHead，其他行放置 uikit:TableCell。页脚位于一条分隔线之下、使用页脚颜色，说明文字为弱化颜色、居中的文本，内边距与单元格相同。

每一行都独立布局其单元格：单元格占该行的比例由其 ColSpan 决定（默认为 1），每列单元格的宽度不会小于 100px（或其 MinWidth），PreferredWidth 请求的宽度在行过窄时会随其他单元格一起收缩，而 Width 则保持不变。跨列总和相同的行会对齐。单元格文本保持单行，HorizontalContentAlignment 决定单元格内容的位置。该表格不做虚拟化。

Table 的样式类同样适用：xsmall、small、large 与 stripe；带边框的表格使用 BorderThickness="1" CornerRadius="5.5"。

该演示包含一个跨两列的表头单元格、单元格中的标签、总计跨三列的页脚，以及一段说明文字。

示例

带边框、斑马纹与 small。

斑马纹可交互

Live demo unavailable

<uikit:Table Classes="small stripe" BorderThickness="1" CornerRadius="5.5" Width="440" HorizontalAlignment="Left">
  <uikit:TableHeader>
    <uikit:TableRow>
      <uikit:TableHead>Invoice</uikit:TableHead>
      <uikit:TableHead>Method</uikit:TableHead>
      <uikit:TableHead HorizontalContentAlignment="Right">Amount</uikit:TableHead>
      <uikit:TableHead HorizontalContentAlignment="Right">Date</uikit:TableHead>
    </uikit:TableRow>
  </uikit:TableHeader>
  <uikit:TableBody>
    <uikit:TableRow>
      <uikit:TableCell>INV001</uikit:TableCell>
      <uikit:TableCell>Credit Card</uikit:TableCell>
      <uikit:TableCell HorizontalContentAlignment="Right">$250.00</uikit:TableCell>
      <uikit:TableCell HorizontalContentAlignment="Right">2024-01-15</uikit:TableCell>
    </uikit:TableRow>
    <uikit:TableRow>
      <uikit:TableCell>INV002</uikit:TableCell>
      <uikit:TableCell>PayPal</uikit:TableCell>
      <uikit:TableCell HorizontalContentAlignment="Right">$150.00</uikit:TableCell>
      <uikit:TableCell HorizontalContentAlignment="Right">2024-02-01</uikit:TableCell>
    </uikit:TableRow>
    <uikit:TableRow>
      <uikit:TableCell>INV003</uikit:TableCell>
      <uikit:TableCell>Bank Transfer</uikit:TableCell>
      <uikit:TableCell HorizontalContentAlignment="Right">$350.00</uikit:TableCell>
      <uikit:TableCell HorizontalContentAlignment="Right">2024-02-15</uikit:TableCell>
    </uikit:TableRow>
    <uikit:TableRow>
      <uikit:TableCell>INV004</uikit:TableCell>
      <uikit:TableCell>Credit Card</uikit:TableCell>
      <uikit:TableCell HorizontalContentAlignment="Right">$450.00</uikit:TableCell>
      <uikit:TableCell HorizontalContentAlignment="Right">2024-03-01</uikit:TableCell>
    </uikit:TableRow>
  </uikit:TableBody>
</uikit:Table>

Table

#用法

#示例

用法

示例