Ordinal



Ordinalレスポンシブ対応コンポーネント（AlexaOrdinal）は、リスト項目の番号を表示します。このレスポンシブ対応コンポーネントは、複数の子コンポーネント（Sequence、Container、Pagerなど）を持ち、リスト項目に番号を割り当てるために使用します。

• alexa-layoutsパッケージを読み込む
• AlexaOrdinalパラメーター
• 番号を表示する
• AlexaOrdinalの例
• 関連トピック

alexa-layoutsパッケージを読み込む

AlexaOrdinalを使用するには、alexa-layoutsパッケージを読み込みます。

alexa-layoutsパッケージの最新バージョンは1.1.0です。AlexaOrdinalはバージョン1.1.0で導入されました。

AlexaOrdinalパラメーター

type以外のパラメーターはすべてオプションです。

番号を表示する

AlexaOrdinalは、データバインディングコンテキストでordinalプロパティを使用して、リスト項目の番号を表示します。このプロパティは、複数の子を持つことが可能なコンポーネント内で使用される、以下の子コンポーネントに適用できます。

• Container
• Pager
• Sequence

番号を表示するには、ContainerまたはSequenceのnumberedプロパティもtrueに設定します。numberedがfalseの場合、AlexaOrdinalは番号のない円を表示します。

AlexaOrdinalの例

この例では、テキスト行の横にAlexaOrdinalを表示するSequenceを示しています。

{
  "type": "Sequence",
  "id": "textList",
  "numbered": true,
  "height": "100vh",
  "width": "100vw",
  "data": [
    "これは最初の項目です",
    "これは2番目の項目です",
    "これは3番目の項目です"
  ],
  "item": {
    "type": "Container",
    "direction": "row",
    "inheritParentState": true,
    "paddingLeft": "@spacingMedium",
    "paddingTop": "@spacingMedium",
    "items": [
      {
        "theme": "dark",
        "type": "AlexaOrdinal"
      },
      {
        "type": "Text",
        "text": "${data}",
        "textAlign": "center",
        "paddingLeft": "@spacingMedium"
      }
    ]
  }
}

関連トピック

• Alexaデザインシステムの概要
• レスポンシブ対応コンポーネントとテンプレート