基本ウィジェットを作成するには

このガイドでは、SmartUXの基本的なウィジットの作成方法をステップバイステップで説明します。

ウィジットを作成する前に、ウィジットとは何かを理解する必要があります。

SmartUXウィジェットが何であるかを理解したところで、ウィジェットを作成しましょう。

現在のSmartUXウィジェットフォルダに移動します。このフォルダ内にいくつかのファイルとフォルダが表示されます。

srcフォルダには、必要な様々なウィジェットが格納されている。

component-groups.jsonファイルには、ウィジェット・グループとそのラベルのリストが含まれています。

component-groups-order.jsonで、ウィジェットの順序と、それらがUIに表示されるカテゴリを指定します。.

propertiesフォルダは、ウィジェットの様々なプロパティを定義します。いくつかのプロパティは、いくつかのウィジェット間で共通ですが、他のプロパティは、要件に応じて、いくつかの特定のウィジェットに固有である可能性があります。

property-groups.jsonファイルは、プロパティのグループ名を定義します。Widgetの定義でプロパティを割り当てる際、IDによってプロパティ用のグループも割り当てます。このjsonでは、これらのグループの名前を指定します。

3. srcフォルダへのアクセス

srcフォルダに移動します。

4. ウィジェット用フォルダの作成

ウィジェットの名前でフォルダを作成します。ここではデモ用に、labelという名前のウィジットを作成します。

ウィジェットフォルダ（ここではlabelフォルダ）の中に、templatesフォルダを作成します。

templatesフォルダ内にtemplate.htmlファイルを作成します。

テンプレートHTMLは、キャンバス上にドラッグ＆ドロップしたウィジェットのベースHTMLを含む必要があります。ラベルの場合、以下のようになります。

次に、component.jsonファイルをtemplatesフォルダと同じパスに作成します。

ウィジットが最後に必要とするのは、icon.svgファイルである。このアイコンは対応するウィジェットのWidgetペインに表示されます。

Widgetsフォルダに戻り、component-groups-order.jsonを更新します。

9. グループにウィジェットフォルダ名を追加する

グループの1つにWidgetフォルダ名を追加します。

SmartUX Studioでプロジェクトを開きます。

11. コンポーネントを開く

コンポーネントを開きます。

12. ウィジェットへのアクセス

左ペインからウィジェットペインに移動します。

13. ウィジェットリストの更新

SmartUXのウィジェットの最新リストを取得するには、SmartUXのウィジェットの更新ボタンをクリックしてください。

リフレッシュすると、最近追加されたウィジェットが表示され、コンポーネントのデザインに使用できます。