Ordinal

Ordinal

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

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

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

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

AlexaOrdinalパラメーター

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

名前 型 デフォルト 説明 追加されたバージョン

ordinalText

文字列

表示する番号を指定します。このコンポーネントをSequenceと併用する場合は、このプロパティを設定する必要はありません。各項目に自動的に番号が割り当てられます。

1.1.0

theme

文字列

dark

指定したテーマ（lightまたはdark）に応じて色が切り替わります。デフォルトのテーマはdarkです。

1.1.0

type

文字列

なし

常にAlexaOrdinalに設定されます。

1.1.0

番号を表示する

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

番号を表示するには、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"
      }
    ]
  }
}