Zeen Component Library

# ZeenSidebar

# Примеры:

Размеры:

zeenSidebar

zeen-sidebar-width

zeen-sidebar-padding-top

zeen-sidebar-padding-bottom

zeen-sidebar-padding-left

zeen-sidebar-padding-right

zeen-sidebar-filter-blur

Цвета:

zeen-sidebar-background

По умолчанию наследуется от main-light

zeen-sidebar-overlay-background

По умолчанию наследуется от main-transparent

Александра Бетырмиджоева

День

Залы

# props

Название Тип Обязательный По умолчанию Описание
sidebar Boolean - false активный компонент или нет
width Number - 270 Максимальная ширинa компонента

# emits

Название Тип Обязательный Описание
sidebar Boolean - Для закрытия компонента после клика по overlay. Передайте сюда значение props sidebar = false

# Source Code - исходный код компонента

<template>
  <div v-show="sidebar">
    <div
      class="zeen-sidebar"
      :style="{
        '--zeen-sidebar-width': width ? width + 'px' : undefined,
      }"
    >
      <ZeenScrollBar class="zeen-sidebar__content">
        <div class="zeen-sidebar__content-scroller">
          <slot></slot>
        </div>
      </ZeenScrollBar>
      <div class="zeen-sidebar__overlay" @click="$emit('sidebar')" />
    </div>
  </div>
</template>

<script>
import ZeenScrollBar from '../ZeenScrollBar/ZeenScrollBar'
import {disablePageScroll, enablePageScroll} from 'scroll-lock'

export default {
  name: 'ZeenSidebar',
  components: {ZeenScrollBar},
  props: {
    width: {
      type: Number,
    },
    sidebar: {
      type: Boolean,
      default: false,
    },
    scrollLock: {
      type: Boolean,
      default: false,
    },
  },
  watch: {
    scrollLock(newVal) {
      if (newVal) {
        disablePageScroll()
      } else {
        enablePageScroll()
      }
    },
  },
}
</script>

<style>
:root {
  /* Размеры */
  --zeen-sidebar-width: 300px;
  --zeen-sidebar-filter-blur: 5px;
  --zeen-sidebar-padding-top: 0;
  --zeen-sidebar-padding-bottom: 0;
  --zeen-sidebar-padding-left: 0;
  --zeen-sidebar-padding-right: 0;

  /* Цвета */
  --zeen-sidebar-background: var(--main-light);
  --zeen-sidebar-overlay-background: var(--main-transparent);
}
</style>

<style lang="scss" scoped>
.zeen-sidebar {
  position: fixed;
  right: 0;
  top: 0;
  left: 0;
  bottom: 0;
  z-index: 1000;
  box-sizing: border-box;

  &__content {
    padding-top: var(--zeen-sidebar-padding-top);
    padding-bottom: var(--zeen-sidebar-padding-bottom);
    padding-left: var(--zeen-sidebar-padding-left);
    padding-right: var(--zeen-sidebar-padding-right);
    max-width: 100%;
    width: var(--zeen-sidebar-width);
    background: var(--zeen-sidebar-background);
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    overflow: auto;
    z-index: 2;

    &-scroller {
      width: 100%;
      overflow: hidden;
    }
  }
  &__overlay {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    z-index: 1;
    background: var(--zeen-sidebar-overlay-background);
    backdrop-filter: blur(var(--zeen-sidebar-filter-blur));
  }
}
</style>

← ZeenChat →