Ordinal
Ordinal
Ordinalレスポンシブ対応コンポーネント（AlexaOrdinal）は、リスト項目の番号を表示します。このレスポンシブ対応コンポーネントは、複数の子コンポーネント（Sequence、Container、Pagerなど）を持ち、リスト項目に番号を割り当てるために使用します。
alexa-layoutsパッケージを読み込む
AlexaOrdinalを使用するには、alexa-layoutsパッケージを読み込みます。
alexa-layoutsパッケージの最新バージョンは1.1.0です。AlexaOrdinalはバージョン1.1.0で導入されました。
AlexaOrdinalパラメーター
type以外のパラメーターはすべてオプションです。
| 名前 | 型 | デフォルト | 説明 | 追加されたバージョン |
|---|---|---|---|---|
|
|
文字列 |
表示する番号を指定します。このコンポーネントを |
1.1.0 |
|
|
|
文字列 |
dark |
指定したテーマ（lightまたはdark）に応じて色が切り替わります。デフォルトのテーマはdarkです。 |
1.1.0 |
|
|
文字列 |
なし |
常に |
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"
}
]
}
}
