Карточка

Простая island-карточка для product preview с изображением, контентом, ценой и действием.

Установка

npx alixan-ui-nuxt add card

Использование

MacBook Pro 14 дюймов

Мощный ноутбук с высокой производительностью, ярким дисплеем и длительным временем автономной работы.

$640

<script setup lang="ts">
import Card from '@/components/ui/card/Card.vue';

const toast = useToast();

const onTap = () => {
  toast.open('card.addedToCard', 'success');
};
</script>

<template>
	<Card
		image="/examples/mac.webp"
		title="card.demoTitle"
		description="card.demoDescription"
		price="$640"
		button="card.addToCart"
		@on-tap="onTap"
	/>
</template>

Справочник API

Свойство	Тип	По умолчанию	Описание
image	string	-	URL изображения, которое отображается вверху карточки.
imageAlt	string	''	Доступный alt-текст для изображения.
title	string	-	Основной заголовок карточки.
description	string	-	Опциональный вспомогательный текст.
price	string	-	Текст цены рядом с кнопкой действия.
button	string	-	Опциональный текст кнопки действия.
@on-tap	() => void	-	Вызывается при клике на кнопку.