Публикация в группе: Otshelnik-Fm - мои работы (код, плагины, дополнения, статьи и руководства)

Категории группы: Работаем с Wp-Recall

На пути к 17-й версии WP-Recall мы получили единое апи кнопок.
API Buttons вошло в ядро плагина в версии 16.21 и описывается классом classes/class-rcl-button.php

Целью введения стала стандартизация кнопок, их внешнего вида и состояний.


Внешний вид кнопок:

 

Как видно из скриншота выше - кнопки разделены на 3 основных вида: primary (по умолчанию), simple и clear.

В будущем возможны некоторые косметические изменения в стилях кнопок. Это первая реализация - высказывайтесь "за" и "против" и аргументируйте. Мы открыты к обсуждению.

Кнопки имеют размеры:

 

Кнопки имеют состояния (status): loading, disabled, active и атрибуты. Полный список вы найдёте ниже.

Разработчикам предлагается использовать функцию rcl_get_button( $args ); где в аргументах передают все возможные параметры для формирования кнопки.


Список аргументов:

Базовое использование:

Получим стандартную кнопку с иконкой:

 


Примеры:

Простая кнопка - иконка:

 

Текст и иконка справа и счётчик и маска:

 

Аватарка и текст и счетчик:

 

Полная ширина:

 

Полная ширина. Иконки разнесены и ограничения на макс. ширину:

 

В атрибут style вписывайте дополнительные стили для кнопки. Например можно передать:

и получим:

 


Использование состояний кнопок:

status — active:

Активная кнопка (текущая страница, вкладка) — клик по ней не ведет никуда

status — disabled:

для переходных процессов (например пока выполняется js)

status — loading:

режим ожидания и загрузки. Например пока выполняется ajax-запрос

 


Использование обёрток (wrappers):

Если не оборачивать в дополнительный div — то все кнопки будут горизонтально выравниваться от левого края.
— но в таком случае они будут инлайновые. Если вам все же надо чтобы кнопки шли с новой строки — оборачивайте в div с классом rcl-wrap — тогда кнопки будут идти в начале строки и позиционироваться слева (по умолчанию).

Но если нам надо кнопку или несколько кнопок выводить иначе — смотрим примеры ниже: потребуется тег «a» (наши кнопки) обернуть так:

rcl-wrap — задает общий контейнер-обертку. После него надо дописывать еще модификатор.

Почему выбрано имя, например: rcl-wrap__right, а не rcl-wrap__bttn-right? Потому что контейнер-обёртку для позиционирования можно будет использовать не только для кнопок. А вообще глобально (картинки, другие блоки…) — используя единые стили и значит писать меньше стилей придётся

одна кнопка — слева:

Просто rcl-wrap устанавливает выравнивание слева. т.е. для кнопок слева больше писать кроме rcl-wrap не нужно.

одна кнопка — справа:

Добавляем основную обёртку и модификатор: rcl-wrap rcl-wrap__right

пример:

Кнопки вертикально — слева:

Структура:

Добавляем rcl-wrap__vertical — для расположения столбцом. Выравнивание добавлять не нужно — по умолчанию выравнивается слева:

Кнопки вертикально — справа:

Структура:

— в этом случае блок позиционируется справа, а кнопки выровнены по левому краю. Если надо их вывести на всю ширину или по центру (при расположении обертки справа и в вертикальном представлении кнопок конечно же) — пишите свои стили. т.к. в этом блоке могут быть разные типы кнопок (с иконками и без, текстовые или нет, ну и так далее) — тут тонко самостоятельно настраивайте под свои задачи.

Пример выравнивания:


Специальный стиль:

Идеально подойдет для сайдбаров и виджетов, для меню. Готовый к использованию напоминает виджеты ютуба
p.s. ширину здесь я специально ограничил 350px — в стилях апи кнопок ее нет — полная ширина. Учитывайте это.
Структура:

Мы рассмотрели примеры нового апи кнопок и оберток. Уже сейчас можно начинать использовать. И что хорошо - не задумываться о стилизации. Всё стремится к тому чтобы вся экосистема плагина выглядела единой системой.

Есть идеи, замечания, предложения?
- пишите в комментариях.

4

Автор публикации

не в сети 6 часов

Владимир (Otshelnik-Fm)

3 737
Я завёл себе кота. Время перемен. Скоро
Комментарии: 2103Публикации: 237Регистрация: 27-01-2013Продаж/Покупок: 19407/267