Widget Studioカスタムコードエディタ

Widget Studioでカスタム CSSまたはJSコードを作成し、任意のウィジェット要素にカスタムスタイルを適用したり、コマンドでスクリプトを実行したりできます。この記事では、次の方法を学びます。

ユースケースの例

カスタムコードの一般的なユースケースは、各要素にスタイルプロパティを手動で設定するのではなく、ウィジェット要素に同じスタイルを複数回適用することです。技術者でないユーザーは、開発者に事前定義のCSSクラスを作成してもらうとよいでしょう。

Design セクションを開きます。
要素を選択します。この要素は、コードエディタで作成したクラスの1つに従ってスタイル設定されます。
下にスクロールして Css and classes セクションを展開します。
Element ClassName フィールドにクラス名を追加するか、親要素にこのクラスを適用したい場合は Container ClassName に追加します。

カスタムコードに従ってスタイル設定された選択された要素は、右側のプレビューエリアには表示されません。カメラアイコンをクリックして変更を確認する必要があります。

JSコードを追加すると、ウィジェットでカスタムスクリプトをオンデマンドで実行できます。

スクリプトの実行を確認するには、カメラアイコンをクリックします。

CSSとJSコードの両方を扱っている場合、両方のコードを同時に読みたいことがあります。複数のコードエディタを追加するには:

パネルを閉じるには、コードブックマーク（JSまたはCSS）の右側にある X をクリックします。

⌘I