Совет по Joomla: расположение полей Form в параметрах модулей и плагинов.

Совет по Joomla: расположение полей Form в параметрах модулей и плагинов.

Обычно поля настроек модулей и плагинов идут столбиком - сверху вниз. Название поля находится слева, а само поле - справа. В вёрстке админки мы видим div.control-group, в котором находятся label и поле. Посмотрим как можно просто кастомизировать админку.

Название поля НАД полем - parentclass="stack".

Если в XML-манифесте модуля или плагина добавить к полю атрибут parentclass, то мы можем указывать любые CSS-стили для div.control-group. Если указать CSS-класс stack, то название поля встанет над самим полем. Это удобно для больших сабформ - экономится место на экране.

<field type="text" name="map_center" label="MOD_WTYANDEXMAPITEMS_MAP_CENTER" description="MOD_WTYANDEXMAPITEMS_MAP_CENTER_DESC" default="51.533562, 46.034266" hint="51.533562, 46.034266" parentclass="stack" />

2 и более полей в ряд в параметрах модуля/плагина - классы span-*.

Мы можем 2 или 3 небольших поля поставить рядом (для десктопов). Табы настроек являются grid-сеткой из 4-х колонок. Для поля можно указать ширину в виде количества колонок. Нам нужно в parentclass добавить класс span-*-inline. Допустимы числа от 1 до 4.

  • span-1-inline - поле будет шириной в 1 колонку сетку.

  • span-4-inline - ширина в 4 колонки, равносильно поведению по умолчанию.

Этот код выведет 2 поля в админке в параметрах модуля рядом на десктопах. Поскольку используется также класс stack - название поля будет над самим полем.

<field type="list" name="map_zoom" label="MOD_WTYANDEXMAPITEMS_MAP_ZOOM" default="7" parentclass="stack span-2-inline" filter="integer"> <option value="0">0</option> <option value="1">1</option> <option value="21">21</option> </field> <field type="list" name="map_type" label="MOD_WTYANDEXMAPITEMS_MAP_TYPE" parentclass="stack span-2-inline" default="scheme"> <option value="scheme">MOD_WTYANDEXMAPITEMS_MAP_TYPE_MAP</option> <option value="satellite">MOD_WTYANDEXMAPITEMS_MAP_TYPE_SATELLITE</option> </field>

Полезные ссылки

Начать дискуссию