RSS-подписка

RSS-лента

Новые статьи

Последние комментарии


Получать обновления на эл. почту

Ваш e-mail:

Рассылка новостей от Loco

Yii2: Улучшаем юзабилити. Вид хлебных крошек (breadcrumbs)

Yii2: Улучшаем юзабилити. Вид хлебных крошек (breadcrumbs) Работаем над хлебными крошками.

Используем стандартный виджет Yii2 Breadcrumbs

<?= Breadcrumbs::widget([
             'links' => isset($this->params['breadcrumbs']) ? $this->params['breadcrumbs'] : [],
          ]) ?>

Не забывая в самом начале этого файла подключить класс крошек

use yii\widgets\Breadcrumbs;

Дальше в нужных шаблонах видов можем записывать в массив крошек нужные ссылки

$this->params['breadcrumbs'][] = ['label' => 'Блог', 'url' => ['/blog']];
$this->params['breadcrumbs'][] = Yii::$app->controller->substr_content($this->title, '90');

(здесь substr_content обезает title до длины в 90 символов, затем что иногда заголовки не удаётся сделать короткими и лаконичными, а перенос строки хлебных крошек на следующую смотрится не очень красиво)

Далее мы можем "перебить" вид для разделя хлебных крошек, предлагаемый Bootstrap (косая черта - /), заменяем на двойную кавычку "»".

.breadcrumb > li + li::before {
padding: 0 5px;
color: #ccc;
content: "\00bb ";
}

Ещё красиво смотрится угловая скобка. Вы можете попробовать другие символы и выбрать тот, что нравится вам - http://www.evotech.net/blog/2007/04/named-html-entities-in-numeric-order/

Вот как выглядели мои варианты. Мне понравились 1-й и предпоследний (со скобкой - &rsaquo;)

yii2 breadcrumbs разделитель крошек кавычка

Холли Берри в фильме Пароль Рыба-меч

Источник: loco.ru

almix
Разработчик Loco, автор статей по веб-разработке на Yii, CodeIgniter, MODx и прочих инструментах. Создатель Team Sense.

Вы можете почитать все статьи от almix'а.



Другие статьи по этой теме:

Комментарии (0)     Подпишитесь на RSS комментариев к этой статье.

Leave a Comment

Fields with * are required.

Картинка с кодом валидации
Пожалуйста введите символы с картинки. Регистр букв неважен.