DashedContainer

Контейнер із пунктирною рамкою, іконкою та текстом; зазвичай використовується для дій «завантажити» чи «додати».

Живе демо

Додати елемент

Завантажити файл

Запланувати подію

Використання

<template>
  <orio-dashed-container
    icon="plus"
    text="Add Item"
    size="medium"
    @click="handleClick"
  />
  <orio-dashed-container
    icon="upload"
    text="Upload File"
    size="large"
    @click="handleClick"
  />
  <orio-dashed-container
    icon="calendar"
    text="Schedule Event"
    size="small"
    @click="handleClick"
  />
</template>

<script setup>
function handleClick() {
  alert("Container clicked!");
}
</script>

Пропси

Проп	Тип	За замовчуванням	Опис
icon	string	undefined	Назва іконки
text	string	undefined	Текстовий підпис
size	'small' | 'medium' | 'large'	'medium'	Розмір контейнера

Події

Подія	Дані	Опис
click	-	Генерується під час кліку на контейнер

Можливості

• Стилізація пунктирною рамкою
• Ефект градієнта під час наведення
• Розмір іконки підлаштовується під розмір контейнера
• Клікабельний, з курсором-вказівником