magento2组件之container component

2年 前
阅读本文预计花费：2 分钟
作者：晓风拂月
7天成为Magento系统架构师，现在开始学习Magento全栈开发！

《Magento2.X企业级开发实战》

magento2容器UI组件用于用描述性文本包装字段或其他UI组件。可以在没有字段的情况下使用它来显示字段集的通知或说明。

配置选项

组件选项在UI组件的configuration.xml文件中设置。

OptionDescriptionTypeDefault
componentPath to the component’s .js file.String''
templatePath to the component’s .html template.Stringui/form/components/complex
sortOrderSort order of the Container.Number0
labelLabel displayed for the Container.String''
additionalClassesCSS class(es) applied to the root node of the component’s .html template.String''
textDescription for the Container.String''

原文件

magento2容器组件

带有组件的容器

以下是Select组件上容器组件的示例。节点必须位于节点的范围内。

<fieldset name="fieldset_name">
    ...
    <container name="container_name">
        <argument name="data" xsi:type="array">
            <item name="config" xsi:type="array">
                <item name="template" xsi:type="string">ui/form/components/complex</item>
                <item name="sortOrder" xsi:type="number">10</item>
                <item name="label" xsi:type="string">Container Label</item>
                <item name="additionalClasses" xsi:type="string">sample-additional-class</item>
                <item name="text" xsi:type="string" translate="true"><![CDATA[
                    <p>
                        Container Text.
                    </p>
                ]]></item>
            </item>
        </argument>
        <field name="sort_direction"
               sortOrder="20"
               formElement="select">
            <settings>
                <dataType>text</dataType>
                <label translate="true">Sort Direction</label>
                <dataScope>data.sort_direction</dataScope>
            </settings>
            <formElements>
                <select>
                    <settings>
                        <options class="Vendor\Module\Model\Source\Config\SortDirection" />
                        <caption translate="true">-- Please Select --</caption>
                    </settings>
                </select>
            </formElements>
        </field>
    </container>
    ...
</fieldset>

不带任何字段的组件：

<fieldset name="fieldset_name">
    ...
    <container name="container_name">
        <argument name="data" xsi:type="array">
            <item name="config" xsi:type="array">
                <item name="template" xsi:type="string">ui/form/components/complex</item>
                <item name="sortOrder" xsi:type="number">10</item>
                <item name="label" xsi:type="string">Container Label</item>
                <item name="additionalClasses" xsi:type="string">sample-additional-class</item>
                <item name="text" xsi:type="string" translate="true"><![CDATA[
                    <p>
                        Change these settings if you do not want to apply the global display configurations.
                    </p>
                ]]></item>
            </item>
        </argument>
    </container>
    ...
</fieldset>

如无特殊说明或标注，任何个人或组织，复制、转载、采集本站内容请注明：
本文来源于：【Magento中文网】，并添加本文地址链接。
如未按上述操作复制或转载，本站有权追究法律责任。
若本站内容侵犯了原著者的合法权益，可联系我们进行处理。
上一篇:
下一篇: