32 lines
1.4 KiB
Vue
32 lines
1.4 KiB
Vue
<template>
|
|
<Dropdown
|
|
v-model="model"
|
|
:options="aspectRatioOptions"
|
|
optionLabel="label"
|
|
optionValue="value"
|
|
placeholder="Выберите соотношение"
|
|
class="tw:w-full md:tw:w-96"
|
|
>
|
|
<template #option="slotProps">
|
|
<div class="tw:flex tw:flex-col">
|
|
<span class="tw:font-medium">{{ slotProps.option.label }}</span>
|
|
<span class="tw:text-xs tw:text-gray-500 tw:whitespace-normal">{{ slotProps.option.description }}</span>
|
|
</div>
|
|
</template>
|
|
</Dropdown>
|
|
</template>
|
|
|
|
<script setup>
|
|
import { Dropdown } from "primevue";
|
|
|
|
const model = defineModel();
|
|
|
|
const aspectRatioOptions = [
|
|
{ label: '1:1', value: '1:1', description: 'Универсально, аксессуары, мелкие товары, удобно для всех товаров — идеально для сетки.' },
|
|
{ label: '4:5', value: '4:5', description: 'Одежда, обувь, вертикальные товары, где нужно показать высоту (футболки, платья).' },
|
|
{ label: '3:4', value: '3:4', description: 'Одежда, обувь, вертикальные товары, где нужно показать высоту (футболки, платья).' },
|
|
{ label: '2:3', value: '2:3', description: 'Цветы, высокие предметы (бутылки, букеты, декоративные элементы).' },
|
|
];
|
|
</script>
|
|
|