Display

Эффективная настройка отображения компонента с помощью утилит отображения PrimeFlex.

Описание

Классы отображения используют формат p-d-value и формат p-d-breakpoint-value для адаптивного дизайна.

Значения

Поле значения может быть одним из следующих вариантов.

• none
• inline
• inline-block
• block
• flex
• inline-flex

Брейкпоинты

Брейкпоинты определяют, как должно определяться свойство отображения в зависимости от размера экрана. Используется принцип mobile first, поэтому меньшие значения могут также применяться к большим значениям, например, md также применяется к lg или xl, если они явно не определены.

• sm: маленькие экраны, например, телефоны
• md: средние экраны, например, планшеты
• lg: большие экраны, например, ноутбуки
• xl: большие экраны. например, мониторы

Примеры

Displayed as inline.Displayed as a flexbox container.Inline for larger screens and block for others.Visible on a Small ScreenHidden on a Small Screen

<div class="p-d-inline">Displayed as inline.</div>
<div class="p-d-flex">Displayed as a flexbox container.</div>
<div class="p-d-block p-d-lg-inline">Inline for larger screens and block for others.</div>
<div class="p-d-md-none">Visible on a Small Screen</div>
<div class="p-d-none p-d-md-inline-flex">Hidden on a Small Screen</div>

Кастомизация

Пользовательскую сборку с различными значениями можно получить из PrimeFlex, используя файл_variables.scss.

Inline

Block

Отображение на маленьком экране

Уменьшите размер экрана, чтобы отобразить кнопку.

Скрытие на маленьком экране

Уменьшите размер экрана, чтобы спрятать кнопку.