ウィジェットのレンダリング

id を使用して参照することで、ウィジェットをレンダリングできます

アプリ内の任意の場所でウィジェット widget_languages をレンダリングするには、シンプルな構文を使用できます。

{
    "component": "widget",
    "id": "widget_languages"
}

ウィジェットは、複雑な項目をレンダリングするためにも使用できます。例えば、各ファイルに対する投稿者のリストをレンダリングするとします。
ここでは、ウィジェットは次のように構築できます。

const widgetJSON =  {
    component: "div",
    id: "file_contributors",
    items: [ // adding components to the widget
        {
            component: "div",
            items: [
                {
                    component: "icon",
                    icon: "file"
                },
                {
                    component: "label",
                    label: "@fileName"
                }
            ]
        },
        {
            component: "list",
            data: "@contributors",
            itemConfig: {
                component: "label"
            }
        }
    ]
},

次に、各ファイルの投稿者のリストをレンダリングするために、リストを次のように記述します。

const listJSON = {
    component: "list"
    data: "@files"
    itemConfig: {
        component: "widget",
        id: "file_contributors"
    }
}

フィールド @files 含まれるファイルオブジェクトのリストを以下に示します

- fileName: string
- contributors: Array<String>
recommendation-more-help
11125c99-e1a1-4369-b5d7-fb3098b9b178