Выпадающие списки

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

Создание простого выпадающего списка

Для начала создадим элемент выпадающего списка. В HTML это будет стандартный элемент <select>, а внутри его — несколько <option>. Чтобы добавить реактивность, необходимо связать значение, выбранное пользователем, с переменной.

<div x-data="{ selected: 'option1' }">
  <select x-model="selected">
    <option value="option1">Опция 1</option>
    <option value="option2">Опция 2</option>
    <option value="option3">Опция 3</option>
  </select>

  <p>Вы выбрали: <span x-text="selected"></span></p>
</div>

В этом примере используется директива x-model, которая связывает выбранное значение с переменной selected. Теперь, когда пользователь выбирает один из вариантов, значение переменной будет обновляться автоматически.

Множественный выбор

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

<div x-data="{ selected: [] }">
  <select x-model="selected" multiple>
    <option value="option1">Опция 1</option>
    <option value="option2">Опция 2</option>
    <option value="option3">Опция 3</option>
  </select>

  <p>Вы выбрали: <span x-text="selected.join(', ')"></span></p>
</div>

В этом примере создается массив selected, в который добавляются все выбранные значения. В конце мы отображаем выбранные опции с помощью join(), чтобы отобразить их через запятую.

Динамическое создание опций

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

<div x-data="{ options: ['option1', 'option2', 'option3'], selected: 'option1' }">
  <select x-model="selected">
    <template x-for="option in options" :key="option">
      <option :value="option" x-text="option"></option>
    </template>
  </select>

  <p>Вы выбрали: <span x-text="selected"></span></p>
</div>

Здесь список опций генерируется на основе массива options, и каждая опция добавляется с помощью директивы x-for. Это позволяет гибко и динамично менять содержание выпадающего списка в зависимости от данных.

Стилевые изменения

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

<div x-data="{ selected: 'option1' }">
  <select x-model="selected" class="border p-2 rounded">
    <option value="option1" :class="{ 'bg-blue-500': selected === 'option1' }">Опция 1</option>
    <option value="option2" :class="{ 'bg-blue-500': selected === 'option2' }">Опция 2</option>
    <option value="option3" :class="{ 'bg-blue-500': selected === 'option3' }">Опция 3</option>
  </select>

  <p>Вы выбрали: <span x-text="selected"></span></p>
</div>

Здесь с помощью директивы :class добавляется динамическая подсветка выбранной опции. Если текущий выбранный элемент совпадает с опцией, её фон изменится на синий.

Адаптивные выпадающие списки

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

<div x-data="{ selected: 'option1', isMobile: window.innerWidth < 600 }">
  <select x-model="selected" x-show="!isMobile" class="border p-2 rounded">
    <option value="option1">Опция 1</option>
    <option value="option2">Опция 2</option>
    <option value="option3">Опция 3</option>
  </select>

  <div x-show="isMobile">
    <button x-on:click="isMobile = !isMobile">Выбрать</button>
    <div x-show="isMobile">
      <div @click="selected = 'option1'" class="border p-2">Опция 1</div>
      <div @click="selected = 'option2'" class="border p-2">Опция 2</div>
      <div @click="selected = 'option3'" class="border p-2">Опция 3</div>
    </div>
  </div>

  <p>Вы выбрали: <span x-text="selected"></span></p>
</div>

В этом примере используется директива x-show, чтобы показывать стандартный выпадающий список на больших экранах и кнопки для выбора на мобильных устройствах. Реактивное свойство isMobile контролирует, какой элемент интерфейса будет видим.

Подсказки и фильтрация

Иногда полезно добавлять функциональность фильтрации или подсказок при поиске по выпадающему списку. Это помогает пользователю быстрее найти нужный элемент среди множества опций. В Petite-Vue это можно реализовать с помощью текстового ввода и фильтрации массива опций.

<div x-data="{ options: ['option1', 'option2', 'option3'], selected: 'option1', search: '' }">
  <input x-model="search" placeholder="Поиск..." class="border p-2 mb-2">
  <select x-model="selected" class="border p-2 rounded">
    <template x-for="option in options.filter(o => o.includes(search))" :key="option">
      <option :value="option" x-text="option"></option>
    </template>
  </select>

  <p>Вы выбрали: <span x-text="selected"></span></p>
</div>

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

Заключение

В библиотеке Petite-Vue создание и управление выпадающими списками — это простая, но мощная задача, которую можно реализовать с помощью небольшого количества кода. Благодаря реактивности, использованию директив x-model, x-for, x-show и других, можно создавать динамичные, удобные и адаптивные интерфейсы.