カードでのテーブル コントロール
テーブル コントロールを使用して、行と列に最適にレイアウトされた表形式のデータまたは構造化情報を表示します。 テーブルは 3 つの個別のカード要素で構成されます。
- Tables
- テーブルの行
- テーブルのセル
テーブルはテーブル行の最上位コンテナです。 このため、テーブルに含まれるすべてのテーブルのセルと行の外観とレイアウトに適用されるプロパティが多数あります。
グリッド ラインの表示 – グリッド ラインを表示すべきかどうかを指定します。
表示可能 – テーブルを表示または非表示にします。 true または false にできます。
間隔 – このコントロールと直前のコントロールの間に確保する間隔を制御します。
区切り線 – true の場合、コントロールの上部に区切り線を描画します。
垂直方向の位置合わせ – テーブルのすべての子に対してコンテンツを垂直方向に配置する方法を定義します。
水平方向の位置合わせ – テーブルのすべての子に対してコンテンツを水平方向に配置する方法を定義します。
高さ – テーブルをデータのサイズに合わせて拡大するか (自動)、コンテナーの高さを満たすまで拡大するか (ストレッチ) を指定します。
グリッド スタイル – テーブル内のすべてのテーブル セルのスタイル ヒント。 許可される値: デフォルト、強調、良好、注意、警告、アクセント。
すべてに対して繰り返す – このコントロールの複数のインスタンスを表示するために使用されるデータのソース。 すべてに対して繰り返すを使用する方法について説明します。
列の数はテーブル自体で定義されます。 列は "列" タブから追加および削除できます。各列には次のプロパティがあります。
幅 – 列の幅を指定します。 数値で表す場合、幅はテーブル内の他の列に対する列の重みを表します。 文字列として表現する場合、幅は "{{number}}px" 形式 (たとえば、"50px") にする必要があり、明示的なピクセル数を表します。
水平方向の配置 – 列内のすべてのセルの内容をデフォルトで水平方向に配置する方法を制御します。 指定すると、この値はテーブル レベルの設定をオーバーライドします。 指定しない場合、水平方向の配置はテーブル、行、またはセルのレベルで定義されます。
垂直方向の配置 – 列内のすべてのセルの内容をデフォルトで垂直方向に配置する方法を制御します。 指定すると、この値はテーブル レベルの設定をオーバーライドします。 指定しない場合、垂直方向の配置はテーブル、行、またはセルのレベルで定義されます。
テーブル カード要素の直接の子はテーブル行です。 複数のテーブル セルを水平方向にグループ化し、その行内のすべての項目に適用されるいくつかのプロパティを持ちます。
表示可能 – 要素を表示または非表示にします。 true または false にできます。
間隔 – このコントロールと直前のコントロールの間に確保する間隔を制御します。
区切り線 – true の場合、コントロールの上部に区切り線を描画します。
垂直方向の位置合わせ – 行のすべてのセルに対してコンテンツを垂直方向に配置する方法を定義します。
水平方向の位置合わせ – 行のすべてのセルに対してコンテンツを水平方向に配置する方法を定義します。
高さ – テーブル行をデータのサイズに合わせて拡大するか (自動)、コンテナーの高さを満たすまで拡大するか (ストレッチ) を指定します。
スタイル – 行のすべてのテーブル セルのスタイル ヒント。 許可される値: デフォルト、強調、良好、注意、警告、アクセント。
すべて繰り返します – 子セルの複数のインスタンスを表示するために使用されるデータのソース。 すべてに対して繰り返すを使用する方法について説明します。
テーブル要素の 1 行内のセルを表します。 スタンドアロンのカード要素を子として含めることができ、次のプロパティを含めることができます。
ブリード – コントロールが親のパディングを通してブリードされるかどうかを決定します。
背景画像 – 背景画像を指定します。 許容できるフォーマットは PNG、JPEG および GIF です。
最小高さ – テーブル セルの高さの最小値をピクセル単位で指定します ("80px" など)。
間隔 – このコントロールと直前のコントロールの間に確保する間隔を制御します。
区切り線 – true の場合、コントロールの上部に区切り線を描画します。
水平方向の位置合わせ – テーブルのすべての子に対してコンテンツを水平方向に配置する方法を定義します。
垂直方向の位置合わせ – セルの子カード要素に対してコンテンツを配置する方法を定義します。
右から左に表示 – 有効にすると、テーブル セル内のコンテンツが右から左に表示されます。
高さ – テーブル セルをデータのサイズに合わせて拡大するか ("自動")、コンテナーの高さを満たすまで拡大するか ("ストレッチ") を指定します。
スタイル – テーブルセルの背景のスタイルヒント。 許可される値: デフォルト、強調、良好、注意、警告、アクセント。