README

该模块提供了一些有用的组件，使得能够在 Magento 2 中创建复杂的组件。

可用组件列表

图片选择器

允许在组件表单中使用 CMS 图片上传器，使得上传/选择图片变得简单。

该组件的功能

• 上传 CMS 图片
• 选择已上传的 CMS 图片
• 可配置图片选择按钮标签
• 限制允许的图片宽高
• 限制允许的图片文件大小
• (允许的文件类型在 CMS 模块中配置)

视频选择器

允许在组件表单中使用 CMS 上传器，使得上传/选择视频变得简单。

该组件的功能

• 上传 CMS 视频
• 选择已上传的 CMS 视频
• 可配置视频选择按钮标签
• 限制允许的视频文件大小
• (允许的文件类型在特定 XML 文件中配置)

日期选择器

允许使用默认的日期选择器 JS 组件来选择日期。

该组件的功能

• 日期格式可配置
• 时间格式可配置（如果没有提供，则只显示日期选择器）
• 日期选择器组件的图片可配置
• 日期字段可配置为禁用（只读）

日期时间选择器

与日期选择器组件相同，只是带有预配置的时间格式，因此默认显示为日期时间选择器。

文本区域

允许在组件表单中使用文本区域。

该组件的功能

• 文本区域的可见宽度（列）可配置
• 文本区域的可见行数（行）可配置
• 允许的最大字符数（maxlenght）可配置
• 如果配置了 maxlenght，则动态显示剩余字符数

复选框

允许在组件表单中使用复选框。用于替换常用的 Yes/No 选择。

该组件的功能

• 复选框值可配置（默认选中时为 '1'）

子组件

允许将一个组件嵌入到另一个组件中。用于创建可重复使用的自定义组件。例如，一个组合了 3 个字段（url、链接文本和“是否在新窗口中打开”）的链接子组件可以在许多组件中使用。

该组件的功能

• 子组件配置按钮的标签可配置
• 允许在任意深度嵌入组件（子组件也可以有子组件）

有关更多信息，请参阅使用部分。

兼容性

Magento 2.X（已在 Magento 2.0.10、2.1.2、2.2.3 中测试）

使用

图片选择器

<parameter name="my_param" xsi:type="block" visible="true" required="false">
    <label translate="true">Image</label>
    <block class="MX\WidgetComponent\Block\Adminhtml\Component\ImagePicker">
        <!-- Optional configuration parameters -->
        <data>
            <item name="dimension" xsi:type="array">
                <item name="max-width" xsi:type="string">500</item>
                <item name="max-height" xsi:type="string">500</item>
            </item>
            <item name="max-size" xsi:type="string">50000</item>
            <item name="button" xsi:type="array">
                <item name="open" xsi:type="string">Select Image...</item>
            </item>
        </data>
        <!-- Optional configuration parameters -->
    </block>
</parameter>

视频选择器

<parameter name="my_param" xsi:type="block" visible="true" required="false">
    <label translate="true">Video</label>
    <block class="MX\WidgetComponent\Block\Adminhtml\Component\VideoPicker">
        <!-- Optional configuration parameters -->
        <data>
            <item name="max-size" xsi:type="string">500000</item>
            <item name="button" xsi:type="array">
                <item name="open" xsi:type="string">Select Video...</item>
            </item>
        </data>
        <!-- Optional configuration parameters -->
    </block>
</parameter>

日期选择器

<parameter name="my_param" xsi:type="block" visible="true" required="false">
    <label translate="true">Date</label>
    <block class="MX\WidgetComponent\Block\Adminhtml\Component\DatePicker">
        <!-- Optional configuration parameters -->
        <data>
            <item name="dateFormat" xsi:type="string">yyyy-MM-dd</item>
            <item name="timeFormat" xsi:type="string">HH:mm:ss</item>
            <item name="image" xsi:type="string">path-to/url</item>
            <item name="disabled" xsi:type="boolean">true</item>
        </data>
        <!-- Optional configuration parameters -->
    </block>
</parameter>

日期时间选择器

<parameter name="my_param" xsi:type="block" visible="true" required="false">
    <label translate="true">Datetime</label>
    <block class="MX\WidgetComponent\Block\Adminhtml\Component\DateTimePicker">
        <!-- Optional configuration parameters -->
        <data>
            <item name="dateFormat" xsi:type="string">yyyy-MM-dd</item>
            <item name="timeFormat" xsi:type="string">HH:mm:ss</item>
            <item name="image" xsi:type="string">path-to/url</item>
            <item name="disabled" xsi:type="boolean">true</item>
        </data>
        <!-- Optional configuration parameters -->
    </block>
</parameter>

文本区域

<parameter name="my_param" xsi:type="block" visible="true" required="false">
    <label translate="true">Textarea</label>
    <block class="MX\WidgetComponent\Block\Adminhtml\Component\Textarea">
        <!-- Optional configuration parameters -->
        <data>
            <item name="cols" xsi:type="string">visible width of a text area</item>
            <item name="rows" xsi:type="string">visible number of lines in a text area</item>
            <item name="maxlength" xsi:type="string">maximum number of characters allowed in the text area</item>
        </data>
        <!-- Optional configuration parameters -->
    </block>
</parameter>

复选框

<parameter name="my_param" xsi:type="block" visible="true" required="false">
    <label translate="true">Checkbox</label>
    <block class="MX\WidgetComponent\Block\Adminhtml\Component\Checkbox">
        <!-- Optional configuration parameters -->
        <data>
            <item name="value" xsi:type="string">checkbox_value</item>
        </data>
        <!-- Optional configuration parameters -->
    </block>
</parameter>

子组件

<parameter name="my_param" xsi:type="block" visible="true" required="true" sort_order="10">
    <label translate="true">Sub-Widget</label>
    <block class="MX\WidgetComponent\Block\Adminhtml\Component\SubWidget">
        <data>
            <!-- Optional configuration parameters -->
            <item name="button-label" xsi:type="string">Subwidget configuration button text</item>
            <!-- Optional configuration parameters -->
            <item name="widget-type-id" xsi:type="string">the_id_of_the_sub_widget</item>
        </data>
    </block>
</parameter>