Боковая панель

С чего начать

Подключите модуль

import { QSidePanelModule } from '@diasoft/qpalette-visual';

Встройте компонент с помощью тэга q-side-panel.

Описание

Боковые панели позволяют визуально разграничить единовременно отображаемые, но различные типы данных на странице.

Свойства

Свойствоsideможет принимать значениеleftилиright

Свойствоlabelотображает заголовок

Свойствоclosedпозволяет установить панель закрытой по умолчанию

Кнопка скрытия и заголовок стараются оказаться в центре экрана. Это необходимо для случаев, когда высота панели превышает высоту экрана пользователя.

Настройка ширины

Переменная--q-side-panel-content-widthпозволяет установить ширину панели

Пример:

Пример

Здесь может быть любой узкий контент

Боковые панели

Lorem ipsum, dolor sit amet consectetur adipisicing elit. Id, debitis nihil? Voluptates quidem nemo rem consectetur voluptas tempore, dignissimos consequatur alias pariatur nam cum possimus veritatis ratione. Qui obcaecati quidem quas, incidunt eius consequatur! Velit ad natus quidem ducimus illo, dignissimos quo at pariatur, dolorum exercitationem expedita. Eligendi, accusamus excepturi earum quam vitae error voluptatem omnis culpa totam, repellendus necessitatibus unde asperiores ullam consequatur officia facilis quo reiciendis natus, eos aut doloremque dolor recusandae illo! Totam, ipsa rem, quibusdam eligendi aperiam deleniti minus neque ad alias, tempora modi aliquid repellendus cumque vero corrupti hic? A, debitis architecto! Nam, voluptas! Quas!

Здесь может быть любой узкий контент

С меню

Здесь может быть любой узкий контент

Боковые панели с меню

Вы может добавить в боковую панель меню, настроив в нем лейблы, ссылки и иконки.

Lorem ipsum dolor, sit amet consectetur adipisicing elit. Id, architecto quod, eum veritatis quas quidem eveniet consequuntur laudantium porro, laborum delectus! Magnam dolorum repellat tempore illum! Dolorum voluptas corrupti voluptatem nemo rem eos saepe, beatae ullam, repudiandae aspernatur mollitia laborum dolores cupiditate! Animi minus doloribus quo laborum nemo qui iure veritatis impedit placeat corrupti explicabo, vitae voluptas! Nisi quasi est ipsa, quaerat dicta, adipisci nam deleniti doloremque laudantium sunt dolores quod, ut vitae sequi temporibus nihil cumque ipsum placeat facere sapiente. Voluptatem illo exercitationem laborum veritatis, alias ratione nobis perferendis quia, minima unde deleniti ea laudantium saepe odit? Libero, sunt.

Здесь может быть любой узкий контент

<div class="q-grid" style="--q-grid-template-columns: auto 1fr auto">
  <q-side-panel side="left" label="Left side panel" [menuItems]="myMenu">
    <p>Здесь может быть любой узкий контент</p>
  </q-side-panel>
  <div class="q-card" style="width: 100%; margin-bottom: 0">
    <h3 id="nav-example">Боковые панели с меню</h3>
    <p>Вы может добавить в боковую панель меню, настроив в нем лейблы, ссылки и иконки.</p>
    <p>
      Lorem ipsum dolor, sit amet consectetur adipisicing elit. Id, architecto quod, eum veritatis quas quidem eveniet consequuntur
      laudantium porro, laborum delectus! Magnam dolorum repellat tempore illum! Dolorum voluptas corrupti voluptatem nemo rem eos
      saepe, beatae ullam, repudiandae aspernatur mollitia laborum dolores cupiditate! Animi minus doloribus quo laborum nemo qui iure
      veritatis impedit placeat corrupti explicabo, vitae voluptas! Nisi quasi est ipsa, quaerat dicta, adipisci nam deleniti doloremque
      laudantium sunt dolores quod, ut vitae sequi temporibus nihil cumque ipsum placeat facere sapiente. Voluptatem illo exercitationem
      laborum veritatis, alias ratione nobis perferendis quia, minima unde deleniti ea laudantium saepe odit? Libero, sunt.
    </p>
  </div>
  <q-side-panel side="right" label="Right side panel" [menuItems]="myMenu">
    <p>Здесь может быть любой узкий контент</p>
  </q-side-panel>
</div>

Stacked

<p-card styleClass="p-card--no-padding">
  <div class="p-d-flex">
    <q-side-panel side="left" label="Left side panel" [menuItems]="myMenu" [stacked]="true">
      <p>Здесь может быть любой узкий контент</p>
    </q-side-panel>
    <div class="p-p-3">
      <h3 style="margin-top: 0">Режим Stacked</h3>
      <p>В этом режиме панель "прилипает" к соседней контентной области.</p>
      <p>
        Lorem ipsum dolor sit, amet consectetur adipisicing elit. Veniam reprehenderit nulla optio. Consequatur, eos? Ab dolor qui
        minima! Deserunt ab neque quia labore minus? Esse, id quis. Magni dolor cupiditate possimus ullam, ex aliquam quibusdam. Iste
        eius rem, soluta quasi provident perferendis reprehenderit facilis aspernatur placeat repudiandae a accusamus. Optio suscipit
        aspernatur est eius aut adipisci nisi eaque labore delectus vero quaerat, eligendi cupiditate molestias, vel sapiente. Libero
        sit provident, unde earum nostrum quam aliquid qui saepe illum aliquam error nemo inventore laborum veritatis perferendis ad
        recusandae eaque ullam? Laboriosam nemo deleniti voluptas aliquid. Facilis saepe blanditiis illo harum ipsa.
      </p>
    </div>
    <q-side-panel side="right" label="Right side panel" [menuItems]="myMenu" [stacked]="true">
      <p>Здесь может быть любой узкий контент</p>
    </q-side-panel>
  </div>
</p-card>

Форматирование чисел Боковое всплывающее окно