ウィジェット
コンポーネントの節で説明したように、複数の基本コンポーネントを組み合わせてウィジェットを作成できます。
ウィジェットを使用して、新しい「より複雑な」コンポーネントを作成したり、コンポーネントの項目に構造を設定したりできます。
ウィジェットの概念について説明しましょう。
まず、言語のリストを表示する簡単なウィジェットを作成します。
const widgetJSON = {
"component": "div",
"id": "widget_languages",
"items": [ // adding components to the widget
{
"component": "div",
"items": [
{
"component": "icon",
"icon": "info"
},
{
"component": "label",
"label": "List of some languages"
}
]
},
{
"component": "list",
"data": "@languages"
}
]
},
ここで @languages
は、次のモデルで定義された配列です: widget_languages
形式: ["英語", "フランス語", "ヒンディー語", "スペイン語", "ウルドゥー語"]
レンダリングされた基本ウィジェットは次のようになります。
recommendation-more-help
11125c99-e1a1-4369-b5d7-fb3098b9b178