CSS стилизация

Vs Vue3 Select предлагает различные способы для настройки внешнего вида компонента. Вы можете использовать слоты, пользовательские дочерние компоненты или изменять встроенные свойства CSS.

Переменные CSS

Vs Vue3 Select использует пользовательские свойства CSS во всем компоненте для обработки визуальных отзывов. Это обеспечивает довольно большую гибкость в стилизации, без необходимости подключаться к системе сборки для создания собственных стилей. Если есть значение, которое, по вашему мнению, должно использовать свойство CSS вместо жестко заданного значения CSS, пожалуйста, отправьте PullRequest.

Пример

Не создавая самостоятельно никакого CSS, вы можете полностью настроить внешний вид Vs Vue3 Select с помощью переменных CSS. В этом примере мы настраиваем цвета компонента в отличном от остальных примеров стиле.

В этом случае область действия переменных ограничена только этой реализацией компонента, но вы могли бы разместить эти переменные в любом месте CSS-файла вашего приложения, чтобы реализовать их на глобальном уровне для вашего приложения.

Подробнее о переменных CSS можно почитать в документации MDN

Loading...

<template>
  <div class="demo">
    <v-select :options="countries" />
  </div>
</template>

<script setup>
import countries from '../data/countries.js'
</script>

<style scoped>
div {
  background: #282c34;
  padding: 1rem;
  border-radius: 0.3rem;
}

:deep(.demo) {
  --vs-controls-color: #664cc3;
  --vs-border-color: #664cc3;

  --vs-dropdown-bg: #282c34;
  --vs-dropdown-color: #cc99cd;
  --vs-dropdown-option-color: #cc99cd;

  --vs-selected-bg: #664cc3;
  --vs-selected-color: #eeeeee;

  --vs-search-input-color: #eeeeee;

  --vs-dropdown-option--active-bg: #664cc3;
  --vs-dropdown-option--active-color: #eeeeee;
}
</style>

В этой документации, для реализации темной темы, были добавлены следующий стили

html.dark{
  --vs-controls-color: #664cc3;

  --vs-border-color: #664cc3;

  --vs-dropdown-bg: #282c34;

  --vs-selected-bg: #664cc3;
  --vs-selected-color: #eeeeee;

  --vs-search-input-color: #eeeeee;

  --vs-dropdown-option--active-bg: #664cc3;
  --vs-dropdown-option--active-color: #eeeeee;

  --vs-open-indicator-color: #664cc3;

  --vs-state-disabled-bg: trasparent;
  --vs-state-disabled-color: #555;
}

Доступные переменные CSS

:root {
    --vs-colors--lightest: rgba(60, 60, 60, 0.26);
    --vs-colors--light: rgba(60, 60, 60, 0.5);
    --vs-colors--dark: #333;
    --vs-colors--darkest: rgba(0, 0, 0, 0.15);

    /* Font */
    --vs-font-size: 1rem;
    --vs-line-height: 1.4;

    /* vs__dropdown-toggle */
    --vs-height: 36px;
    --vs-bg-color: inherit;

    /* Search Input */
    --vs-search-input-color: inherit;
    --vs-search-input-placeholder-color: inherit;

    /* State - No drop */
    --vs-state-no-drop-bg: inherit;
    --vs-state-no-drop-cursor: default;

    /* State - Disabled */
    --vs-state-disabled-bg: rgb(248, 248, 248);
    --vs-state-disabled-color: var(--vs-colors--light);
    --vs-state-disabled-controls-color: var(--vs-colors--light);
    --vs-state-disabled-cursor: not-allowed;

    /* Borders */
    --vs-border-color: var(--vs-colors--lightest);
    --vs-border-width: 1px;
    --vs-border-style: solid;
    --vs-border-radius: 4px;

    /* Actions: house the component controls */
    --vs-actions-padding: 0px 6px 0 3px;

    /* Component Controls: Clear, Open Indicator */
    --vs-open-indicator-color: var(--vs-colors--dark);
    --vs-controls-color: var(--vs-colors--light);
    --vs-controls-size: 1;
    --vs-controls--deselect-text-shadow: 0 1px 0 #fff;
    --vs-controls--spinner-size: 1;

    /* Selected */
    --vs-selected-bg: #f0f0f0;
    --vs-selected-color: var(--vs-colors--dark);
    --vs-selected-border-color: var(--vs-border-color);
    --vs-selected-border-style: var(--vs-border-style);
    --vs-selected-border-width: var(--vs-border-width);
    --vs-selected-options-padding: 2px 0 2px 10px;
    --vs-selected-options-gap: 2px;
    --vs-selected-multiple-padding: 0 0 0 4px;

    /* Dropdown Menu */
    --vs-dropdown-bg: #fff;
    --vs-dropdown-color: inherit;
    --vs-dropdown-z-index: 1000;
    --vs-dropdown-min-width: 160px;
    --vs-dropdown-max-height: 350px;
    --vs-dropdown-box-shadow: 0px 3px 6px 0px var(--vs-colors--darkest);
    --vs-dropdown-overflow-x: auto;
    --vs-dropdown-overflow-y: auto;
    --vs-dropdown-border-radius: 4px;
    --vs-dropdown-options-gap: 2px;
    --vs-dropdown-padding: 5px 0;

    /* Dropdown Option */
    --vs-dropdown-option-color: var(--vs-dropdown-color);
    --vs-dropdown-option-padding: 5px 15px;
    --vs-dropdown-option-margin: 0px 5px;
    --vs-dropdown-option-border-radius: var(--vs-border-radius);

    /* optgroup option */
    --vs-dropdown-optgroup-option-bg: #dfdfdf;
    --vs-dropdown-optgroup-option-padding: 5px;

    /* Option */
    --vs-dropdown-option--active-bg: #5897fb;
    --vs-dropdown-option--active-color: #fff;
    --vs-dropdown-option--selected-bg: #5897fb;
    --vs-dropdown-option--selected-color: #fff;

    /* Deselect State */
    --vs-dropdown-option--deselect-bg: #fb5858;
    --vs-dropdown-option--deselect-color: #fff;

    /* Transitions */
    --vs-transition-timing-function: cubic-bezier(1, -0.115, 0.975, 0.855);
    --vs-transition-duration: 150ms;

}

Переопределение стилей

Vs Vue3 Select использует подход использования селекторов с одним уровнем, в то же время используя имена классов, которые специфичны для Vs Vue3 Select, чтобы избежать коллизий с вашим приложением.

Большинство классов в Vs Vue3 Select используют префикс vs__, а селекторы обычно представляют собой одно имя класса – если только к компоненту не применяется состояние.

Чтобы переопределить свойство по умолчанию в вашем приложении, вы должны добавить один уровень специфичности. Самый простой способ сделать это - добавить .v-select перед селектором vs__*, если вы хотите настроить все экземпляры Vs Vue3 Select, или добавить свое собственное имя класса, если вы хотите повлиять только на один.

Loading...

<template>
  <v-select
    class="style-chooser"
    placeholder="Choose a Styling Option"
    :options="['Components', 'CSS / Variables', 'Slots']"
  />
</template>

<style>
.style-chooser .vs__search::placeholder,
.style-chooser .vs__dropdown-toggle,
.style-chooser .vs__dropdown-menu {
  background: #dfe5fb;
  border: none;
  color: #394066;
  text-transform: lowercase;
  font-variant: small-caps;
}

.style-chooser svg.vs__open-indicator > path,
.style-chooser .vs__clear svg > path {
  fill: #394066;
}

.dark .style-chooser .vs__search::placeholder,
.dark .style-chooser .vs__dropdown-toggle,
.dark .style-chooser .vs__dropdown-menu {
  background: #323232;
  color: #ffc66d;
}

.dark .style-chooser svg.vs__open-indicator > path,
.dark .style-chooser .vs__clear svg > path {
  fill: #629755;
}
</style>

Анимация выпадающего списка

По умолчанию анимация выпадающего списка выполняется изменением непрозрачности по функции кубического безье (cubic-bezier) в течении 0.15 секунд исчезают. Компонент использует систему переходов VueJS. По умолчанию имя перехода - vs__fade. Есть несколько способов переопределить или изменить этот переход.

Функция перехода

Используйте опцию перехода. Применение этой опции изменит названия классов анимации и отменит CSS по умолчанию. Если вы хотите полностью удалить ее - передайте пустую строку

<v-select transition="" />

Переопределение переходов

Вы также можете переопределить CSS по умолчанию для перехода vs__fade. Опять же, если вы хотите полностью исключить переход:

.vs__fade-enter-active,
.vs__fade-leave-active {
  transition: none;
}

Переменные CSS

Так же есть две переменные для управления анимацией

  /* Transitions */
  --vs-transition-timing-function: cubic-bezier(1, -0.115, 0.975, 0.855);
  --vs-transition-duration: 150ms;