Ibexa DXP の管理画面を拡張する

再利用可能なコンポーネント¶

バックオフィスを拡張する場合、テーブルやタブなどの一般的に使用されるUIコンポーネントにベースTwigテンプレートを使用できます。

使用可能なテンプレートは次のとおりです。

@ezdesign/ui/component/table/table.html.twig
@ezdesign/ui/component/tab/tabs.html.twig
コンポーネントを使用するにはembed、テンプレートでそれらを使用します。を使用embedすると、含まれているテンプレート内で定義されているブロックをオーバーライドできます。

テーブル¶

テーブルコンポーネントは、次のブロックで構成されています。

header -テーブルセクションの見出し
headline -テーブル名
actions -アクションボタン（作成、一括削除など）
table -テーブル自体
thead -テーブルヘッダーの内容
tbody -テーブル本体の内容
テーブルコンポーネントは、次の変数をサポートします。

table_class-

タグに付加された追加のCSSクラス

{% embed '@ezdesign/ui/component/table/table.html.twig' %}
    {% block headline %}
        Headline
    {% endblock %}

    {% block actions %}
        <a href="#" class="btn btn-icon">
            <svg class="ibexa-icon ibexa-icon--small ibexa-icon--create">
                <use xlink:href="{{ ez_icon_path('create') }}"></use>
            </svg>
        </a>
    {% endblock %}

    {% block thead %}
        <tr>
            <th></th>
            <th>Column A</th>
            <th>Column B</th>
            <th>Column C</th>
        </tr>
    {% endblock %}

    {% block tbody %}
        {% for i in 1..10 %}
            <tr>
                <td></td>
                <td>A{{ i }}</td>
                <td>B{{ i }}</td>
                <td>C{{ i }}</td>
            </tr>
        {% endfor %}
    {% endblock %}
{% endembed %}

タブ¶

タブコンポーネントは、次のブロックで構成されています。

tab_content -タブの内容
タブコンポーネントは、次の変数をサポートします。

tabs
id -タブID
label -タブの人間が読めるラベル
active -タブがアクティブな場合はtrue
content-tab_contentオーバーライドされていない場合のタブのHTMLコンテンツ
tab_content_class -追加のCSSクラスが添付されています .tab-content
tab_content_attributes -追加されたHTML属性 .tab-content

{% embed '@ezdesign/ui/component/tab/tabs.html.twig' with {
    tabs: [
        { id: 'first', label: 'First' },
        { id: 'second', label: 'Second' },
     ]
} %}
    {% block tab_content %}
        {% embed '@ezdesign/ui/component/tab/tab_pane.html.twig' with { id: 'first', active: true } %}
            {% block content %}
                First
            {% endblock %}
        {% endembed %}

        {% embed '@ezdesign/ui/component/tab/tab_pane.html.twig' with { id: 'second' } %}
            {% block content %}
                Second. <p>Some <b>Rich</b> HTML <a href="#">content</a></p>
            {% endblock %}
        {% endembed %}
    {% endblock %}
{% endembed %}

タブを使用includeするとembed 、テンプレートのレンダリング中にタブのコンテンツを変数として渡す場合の代わりに使用できます。

{% include '@ezdesign/ui/component/tab/tabs.html.twig' with {
        tabs: [
          { id: 'first', label: 'First', content: 'First tab content' },
          { id: 'second', label: 'Second', content: 'Second tab content', active: true },
        ]
} %}