17 lines
1.8 KiB
JSON
17 lines
1.8 KiB
JSON
{
|
|
"name": "ScrollAreaHorizontalDemo",
|
|
"type": "registry:example",
|
|
"dependencies": [],
|
|
"registryDependencies": [
|
|
"scroll-area"
|
|
],
|
|
"files": [
|
|
{
|
|
"path": "example/ScrollAreaHorizontalDemo.vue",
|
|
"content": "<script setup lang=\"ts\">\nimport { ScrollArea, ScrollBar } from '@/registry/default/ui/scroll-area'\n\ninterface Artwork {\n id: string\n artist: string\n art: string\n}\n\nconst works: Artwork[] = [\n {\n id: '1',\n artist: 'Ornella Binni',\n art: 'https://images.unsplash.com/photo-1465869185982-5a1a7522cbcb?auto=format&fit=crop&w=300&q=80',\n },\n {\n id: '2',\n artist: 'Tom Byrom',\n art: 'https://images.unsplash.com/photo-1548516173-3cabfa4607e9?auto=format&fit=crop&w=300&q=80',\n },\n {\n id: '3',\n artist: 'Vladimir Malyavko',\n art: 'https://images.unsplash.com/photo-1494337480532-3725c85fd2ab?auto=format&fit=crop&w=300&q=80',\n },\n]\n</script>\n\n<template>\n <ScrollArea class=\"border rounded-md w-96 whitespace-nowrap\">\n <div class=\"flex p-4 space-x-4 w-max\">\n <div v-for=\"artwork in works\" :key=\"artwork.id\">\n <figure class=\"shrink-0\">\n <div class=\"overflow-hidden rounded-md\">\n <img\n :src=\"artwork.art\"\n :alt=\"`Photo by ${artwork.artist}`\"\n class=\"aspect-[3/4] w-36 h-56 object-cover\"\n >\n </div>\n <figcaption class=\"pt-2 text-xs text-muted-foreground\">\n Photo by\n <span class=\"font-semibold text-foreground\">\n {{ artwork.artist }}\n </span>\n </figcaption>\n </figure>\n </div>\n </div>\n <ScrollBar orientation=\"horizontal\" />\n </ScrollArea>\n</template>\n",
|
|
"type": "registry:example",
|
|
"target": ""
|
|
}
|
|
]
|
|
}
|