最新
购物车Slide-over Cart Drawer
A right-anchored cart panel over a dimmed backdrop, with line items, a subtotal and a checkout button.
#cart#drawer#slide-over
3 个框架中级
Loading…
A centred empty-cart placeholder with a decorative icon, a message and a start-shopping CTA.
<!--
The icon is decorative and aria-hidden - the heading already says "empty", so
announcing the glyph would just be noise. The CTA is the only actionable thing
here, and it's a real link so it works with keyboard and middle-click.
-->
<div class="mx-auto flex w-full max-w-md flex-col items-center px-4 py-12 text-center">
<div class="flex h-16 w-16 items-center justify-center rounded-full bg-gray-100 text-gray-400 dark:bg-gray-800 dark:text-gray-500" aria-hidden="true">
<svg viewBox="0 0 24 24" fill="none" class="h-8 w-8"><path d="M3 4h2l2.4 12h9.2l1.8-8H6" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/><circle cx="9" cy="20" r="1.4" fill="currentColor"/><circle cx="17" cy="20" r="1.4" fill="currentColor"/></svg>
</div>
<h2 class="mt-5 text-lg font-semibold text-gray-900 dark:text-gray-100">Your cart is empty</h2>
<p class="mt-2 text-sm text-gray-600 dark:text-gray-400">Browse the catalogue and add something you love - it will show up right here.</p>
<a href="#" class="mt-6 inline-flex items-center justify-center rounded-lg bg-blue-600 px-5 py-2.5 text-sm font-semibold text-white hover:bg-blue-700 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-blue-600 focus-visible:ring-offset-2 dark:focus-visible:ring-offset-gray-900">Start shopping</a>
</div>| Prop | 类型 | 默认值 | 说明 |
|---|---|---|---|
title | string | 'Your cart is empty' | 卡片的标题文本。 |
copy | string | - | 显示在标题下方的正文文本。 |
ctaLabel | string | 'Start shopping' | 行动号召按钮的文案。 |
ctaHref | string | '#' | 行动号召链接的目标地址。 |
className | string | - | 合并到根元素上的额外类名。 |
The cart glyph is `aria-hidden` because the heading already says "empty" - announcing the icon would be noise. Everything but the title is a prop, and the CTA is a real link so it works with keyboard and middle-click. Show this when the item list is empty.