ユーティリティクラス.

Learn DXPR BuilderManage the siteJe huisstijl toepassen

すべてのエレメントには名前付きクラスの一覧を持つHTML classesフィールドがあります。Bootstrap 5ユーティリティとドロップシャドウは組み込みです。テーマは.info.yml経由で独自グループを追加でき、モジュールはalterフック経由で追加できます。このページでは一覧の内容と独自クラスの登録方法を説明し、編集者がクラス名を入力する代わりに名前でブランドの見た目を選べるようにします。

クラスを適用する

エレメントの設定を開き、Generalパネルの下部でHTML classesを探します。
ボックスをクリックして一覧からクラスを選びます。ボックスへの入力で一覧を絞り込めます。
一覧にないクラスを入力するには、Edit as textをクリックして入力します。
ダイアログのSaveをクリックし、次にビルダーツールバーのSaveをクリックします。

クラスは保存されるHTMLのエレメントのclass属性に入ります。よくある用途はHTML IDとクラスで編集者向けに説明しています。

一覧の内容

エディターは起動時に一覧を作成します。次の3つのソースをこの順序でマージします。

組み込み一覧です。Drop shadowsグループ、短いBootstrap classesグループ、Bootstrap 5ユーティリティが用途別にグループ化されています。Display & Visibility、Responsive Visibility、Margins、Padding、Text Colorsなどです。
対象は.info.ymlにdxpr_builder_classesキーを持つすべてのインストール済みテーマ用のグループです。グループにはテーマ名のラベルが付きます。
モジュールからの変更です。詳しくはモジュールからのクラス登録をご覧ください。

TextエレメントのGeneralパネルで開かれたHTML classes一覧。「DXPR Theme」というグループまでスクロールされ、「Inline Form」や「Background color: DXPR Theme accent1」などのエントリが表示されている

すべてのサイトにはスペース用のクラス(例: mt-3、px-4)、表示用のクラス(例: d-none)、テキスト用のクラス(例: text-center、fw-bold)があります。設定は不要です。

テーマでのクラス登録

テーマの.info.ymlにdxpr_builder_classesマッピングを追加します。各キーはクラス名またはスペース区切りの複数で、各値は編集者が見るラベルです。DXPR Themeはこの方法でクラスを登録しています。

dxpr_builder_classes:
  dxpr-theme-form-inline: 'Inline Form'
  dxpr-theme-util-background-accent1: 'Background color: DXPR Theme accent1'
  dxpr-theme-util-border-accent1: 'Border color: DXPR Theme accent1'

追加するのはthemes/custom/mytheme/mytheme.info.ymlへのマッピングです。

dxpr_builder_classes:
  brand-card: 'Brand card'
  brand-card shadow-lg: 'Brand card with shadow'

クラスのCSSはテーマがすべてのページで読み込むライブラリーに記述します。詳しくはカスタムCSSをご覧ください。
キャッシュはdrush crでクリアします。Drupalがinfoファイルを再度読み取ります。
エレメントの設定を開き、HTML classesにテーマ名のグループと2つのエントリが表示されることを確認します。

キーを持つすべてのインストール済みテーマがグループを追加します。デフォルトテーマだけではありません。グループには常にテーマ名が付きます。infoファイルで名前変更はできません。

モジュールからのクラス登録

カスタムモジュールはalterフックでクラスを追加したり、テーマが登録したクラスを削除したりできます。組み込みBootstrapエントリは削除できません。エディターがブラウザーで追加するためです。コードはHooks APIリファレンスにあります。

Bootstrapバージョン

組み込み一覧はBootstrap 5です。テーマがBootstrap 5を読み込まない場合は、Sideload Bootstrap filesをBootstrap 5に設定します。Bootstrap配下(DXPR Studio > DXPR Builder > General Settings)で、クラスに背後のCSSを持たせるためです。読み込む内容はパフォーマンスをご覧ください。

クラスが表示されない場合

HTML classesにテーマのグループがありません。Drupalはテーマのinfoファイルの古いコピーを使っています。Clear all cachesをConfiguration > Development > Performance (/admin/config/development/performance)でクリックするか、drush crを実行します。
キーを持つテーマがグループを追加しません。カウントされるのはインストール済みテーマのみです。Appearance (/admin/appearance)でテーマをインストールします。デフォルトテーマである必要はありません。
クラスを選んでもエレメントの見た目が同じです。ページにそのクラスのCSSが読み込まれていません。テーマが読み込むライブラリーにルールを追加します。詳しくはカスタムCSSをご覧ください。BootstrapクラスについてはBootstrapバージョンをご覧ください。

次のステップ

カスタムCSS：クラスの背後にあるルールを書く。
テキストエディター：Styles一覧で段落・単語用のクラスを提供する。
Hooks APIリファレンス：DXPR Builderが提供するその他のフック。