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"
}
]
}
}