アセット

assetsフォルダーには、他のディレクトリに属さないファイルやサブフォルダーを含めることができます。次の目的で使用できます:

  • JavaScriptスタイル (assets/js内にある必要があります)
  • CSSスタイル (assets/css内にある必要があります)
  • 画像
  • フォント
  • その他、含める必要のあるもの

assets/js

assets/jsディレクトリは予約されており、JavaScriptファイルのみを含める必要があります。 ウィジェットで使用するには、これらのファイルを[manifest.json](/devel/modules/file_ Structure/manifest)で指定します。

例:

"assets": {
    "js": ["class.widget.js"]
}

assets/css

assets/cssは予約されており、CSSスタイルファイルのみを含める必要があります。 ウィジェットで使用するには、これらのファイルを[manifest.json](/devel/modules/file_ Structure/manifest)で指定します。

例:

"assets": {
    "css": ["mywidget.css"]
}
CSSスタイル

CSSファイルには、特定のフロントエンドテーマの異なるスタイルを定義するためのカスタム属性themeが含まれる場合があります。

利用可能なテーマとその属性値:

  • ブルー - [theme='blue-theme']
  • ダーク - [theme='dark-theme']
  • ハイコントラストライト - [theme='hc-light']
  • ハイコントラストダーク - [theme='hc-dark']

例:

.widget {
    background-color: red;
}

[theme='dark-theme'] .widget {
    background-color: green;
}