Карточка

Суреті, контенті, бағасы және әрекеті бар product preview үшін қарапайым island карточка.

Орнату

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	-	Қосымша action батырмасының мәтіні.
@on-tap	() => void	-	Батырма басылғанда шығарылады.