アダプティブ カード レンダラーの動作ガイドライン

カード要素間のリレーションシップの解析に関するレンダラーの動作を実装する際に従う必要がある設計のガイドラインについて、以下の仕様で説明します。

このドキュメントに記載されている属性に関するカード要素をレンダリングする場合、レンダラーで次の動作を考慮する必要があります。

1. 制約
2. 画像のサイズ
3. Action.Submit

余白、パディング、高さ、幅の構成など、カードの要素とその子のさまざまな要素を考慮に入れて、レンダラーで制約を管理する必要があります。

1. 使用できる値 - auto、stretch、固定値 (pixels および weight 単位)
2. auto を指定すると、幅を拡張するための十分な領域が確保されます (最小の拡張をサポートします)
3. stretch を指定すると、残りのすべての幅が使用されます (最大の拡張をサポートします)

列のさまざまな幅の組み合わせによって、制約がどのように影響を受けるかについて、以下のシナリオを使って説明します

1. 幅が auto と stretch の列。

• 1 列目は幅が auto であり、コンテンツを表示できる十分な領域が使用されます。2 列目は幅が stretch であり、領域全体が使用されます。

2. 幅が stretch のみの列

• 列の幅が stretch のみの場合、均等に分割された後、残りのすべての領域が使用されます。

3. auto、stretch、auto

まず、要素が十分に収まるように 1 列目と 3 列目の幅が調整され、2 列目は拡張され、残りのすべての領域が使用されます。

4. auto 幅の列がある要素を表示する順序

• auto の列は、コンテンツをレンダリングできる十分な領域を確保するように配置されます。
• 画像ビューの場合、残っている幅に合わせて画像は縮小されます。
• 注: 画像が縮小されるのは、画像サイズが stretch と auto の場合のみです。ピクセル単位の固定の幅と高さの場合はされません。

1. 幅の組み合わせが weight と pixel の列

• 上のカードには、次のような幅構成の 3 列があります。
• Column1: Weight 50、 Column2: 100px、 Column3: Weight 50
• 列 2 の幅は pixel value によって決まります
• 列 1 と列 3 の幅は、weights と計算された weight ratio に基づいて調整されます。

2. 属性が weight、pixel width、auto の列

• 上のカードには、次のような幅構成の 4 列があります。
• Column1: Weight 50、Column2: 100px、Column3: Weight 50、および Column4: auto
• 注: 残りの領域に合わせて auto 幅の列が縮小された画像ビュー。

px > weight > auto > stretch

使用できる値 - auto と stretch

カード要素のさまざまな高さの組み合わせによって、制約がどのように影響を受けるかについて、下のシナリオを使って説明します

1. カードの高さが固定されていない場合、要素は垂直方向に自由に拡張されます

• auto と stretch の値に関係なく、いずれの列も垂直方向に十分に拡張できます。
• これは、テキスト ブロックに対して wrap プロパティが無効になっている場合です。

2. 以下のカードでは、テキスト ブロックに対して wrap プロパティが有効になっています。

1. Spacing - 使用できる値: none、small、default、medium、large、extra large、padding

• Spacing 属性を使用すると、この要素と前の要素の間に間隔が追加されます。

• ビュー コンテナーの最初の要素の場合、spacing 属性を使用しても効果がありません。

• 矢印が付いている要素は、兄弟要素の最初の要素であるため、spacing の効果がありません。

2. Separator - 使用できる値 (on と off の切り替え)

• 要素の上部に区切り線を描画します。

3. Spacing と Seperator の組み合わせ

• spacing と seperator の組み合わせの制約を次の図に示します。

• 指定された値に対して、全体的な spacing の間隔が維持されます。
• 区切りは、空けられた間隔の中央に追加されます。

[注: 区切りが spacing 領域に追加される間隔を確認する必要があります。 中央のように見えます]

• 列や列セットなどのコンテナーのスタイル指定のヒントを提供します
• 使用できる値: none、default、emphasis、good、attention、warning、accent
• これらの事前に定義されたスタイル オプションには、コンテナー内の要素のパディングと背景色が用意されています

1. カード A は、スタイル オプションのない列と列セットを示しています
2. カード B は、Attention スタイルの列セットを示しています。 列セット コンテナー内のパディングと背景色の変化に注目してください。
3. カード C は、スタイル指定のみの列を示しています。 前の列と同様に、列にはパディングと背景の変更が含まれています。
4. カード D は、いずれもスタイル オプションが指定された列と列セットを示しています。

[注: パディングのサイズがどのように決定されるかを確認する必要があります。 ホストによって決定されますか。 ]

• このプロパティを使用すると、列や列セットなどのコンテナーを、その親要素の領域まで広げることができます。
• 使用できる値: on と off。

1. カード A は、通常のスタイル指定の列と列セットを示しています。
2. カード B は、1 列目に bleed オプションが指定されています。 コンテンツは、その境界を越え、親の領域まで広がっています。

• 使用できる値 - auto、stretch、small、medium、large
• auto :画像は必要に応じて合わせて縮小されますが、領域を埋めるためにスケールアップされません。
• stretch :必要に応じて、スケールダウンとスケールアップの両方を備えた画像。
• small、 medium 、 large: イメージは固定幅で表示され、幅はホストによって決定されます。

1. auto と stretch

2. 列幅と画像サイズの組み合わせ

• 一般に、幅が stretch の列の場合、stretch のサイズで画像を自由に拡大できます。
• 幅が auto の列の場合、画像の auto と stretch のサイズに関係なく、画像は正確な領域を占めることができます。
• この配置で画像サイズを決定する際に列幅が優先されます。

• これを使用して、画面上で必要な画像の幅を指定します。
• 値を指定すると、size プロパティは上書きされます

• この配置で画像コンテンツ用の領域を確保する際に、幅が auto の列は stretch よりも優先されます。

• auto サイズの画像の場合、幅が weight と pixel の列の制約内で拡張 (または縮小) できる十分な領域が確保されます。
• stretch サイズの画像の場合、幅が weight と pixel の列の制約内で残りの領域を埋めるように拡張することができます。

• Action.Submit 要素により、入力フィールドが収集され、省略可能なデータ フィールドとマージされ、クライアントにイベントが送信されます。
• ACL レンダラーの 1.x バージョンと 2.x バージョンの間には、要素の動作に大きな違いがあります。

• 1.x Renderer - 入力は、階層内のどこに入力フィールドが存在するかに関係なく、すべてのフィールドから収集されます。
• 2.x Renderer - 入力は、Action.Submit 要素の親コンテナーに存在するフィールドから、または兄弟として収集されます。

• 画像のサイズを決定する際に、画像のサイズ (auto、stretch、最小幅など) よりも列幅が優先されます。
• コンテンツを十分に表示するために確保される列幅の優先順位 - px>weight>auto>stretch
• 画像のピクセル単位の size と が指定されている場合、画像の width (auto、stretch) はheight。
• 画像の stretch サイズ属性を指定すると、残っている領域があり、列の auto が auto場合にのみ、画像が拡大されます。
• 画像は、列の使用できる領域内で、縦横比を維持できる限界まで拡大されます。 次に、高さが自由に拡大されます。
• Spacing 属性は、その兄弟の中で最初の要素または唯一の要素である場合は効果がありません。