js/gallery/Gallery.stories.svelte

<script>
	import { Meta, Template, Story } from "@storybook/addon-svelte-csf";
	import Gallery from "./Index.svelte";
</script>

<Meta
	title="Components/Gallery"
	component={Gallery}
	argTypes={{
		label: {
			control: "text",
			description: "The gallery label",
			name: "label",
			value: "Gradio Button"
		},
		show_label: {
			options: [true, false],
			description: "Whether to show the label",
			control: { type: "boolean" },
			defaultValue: true
		},
		columns: {
			options: [1, 2, 3, 4],
			description: "The number of columns to show in grid",
			control: { type: "select" },
			defaultValue: 2
		},
		rows: {
			options: [1, 2, 3, 4],
			description: "The number of rows to show in grid",
			control: { type: "select" },
			defaultValue: 2
		},
		height: {
			options: ["auto", 500, 600],
			description: "The height of the grid",
			control: { type: "select" },
			defaultValue: "auto"
		},
		preview: {
			options: [true, false],
			description: "Whether to start the gallery in preview mode",
			control: { type: "boolean" },
			defaultValue: true
		},
		allow_preview: {
			options: [true, false],
			description: "Whether to allow a preview mode in the gallery",
			control: { type: "boolean" },
			defaultValue: true
		},
		object_fit: {
			options: ["contain", "cover", "fill", "none", "scale-down"],
			description: "How to display each indivial image in the grid",
			control: { type: "select" },
			defaultValue: "contain"
		},
		show_share_button: {
			options: [true, false],
			description: "Whether to show the share button in the gallery",
			control: { type: "boolean" },
			defaultValue: false
		}
	}}
/>

<Template let:args>
	<Gallery
		value={[
			{
				image: {
					path: "https://gradio-builds.s3.amazonaws.com/demo-files/cheetah_running.avif",
					url: "https://gradio-builds.s3.amazonaws.com/demo-files/cheetah_running.avif",
					orig_name: "cheetah_running.avif"
				},
				caption: "A fast cheetah"
			},
			{
				image: {
					path: "https://gradio-builds.s3.amazonaws.com/demo-files/cheetah-002.jpg",
					url: "https://gradio-builds.s3.amazonaws.com/demo-files/cheetah-002.jpg",
					orig_name: "cheetah-002.jpg"
				}
			},
			{
				image: {
					path: "https://gradio-builds.s3.amazonaws.com/demo-files/cheetah-003.jpg",
					url: "https://gradio-builds.s3.amazonaws.com/demo-files/cheetah-003.jpg",
					orig_name: "cheetah-003.jpg"
				}
			},
			{
				image: {
					path: "https://gradio-builds.s3.amazonaws.com/demo-files/cheetah3.webp",
					url: "https://gradio-builds.s3.amazonaws.com/demo-files/cheetah3.webp",
					orig_name: "cheetah3.webp"
				}
			},
			{
				image: {
					path: "https://gradio-builds.s3.amazonaws.com/demo-files/ghepardo-primo-piano.jpg",
					url: "https://gradio-builds.s3.amazonaws.com/demo-files/ghepardo-primo-piano.jpg",
					orig_name: "ghepardo-primo-piano.jpg"
				}
			},
			{
				image: {
					path: "https://gradio-builds.s3.amazonaws.com/demo-files/main-qimg-0bbf31c18a22178cb7a8dd53640a3d05-lq.jpeg",
					url: "https://gradio-builds.s3.amazonaws.com/demo-files/main-qimg-0bbf31c18a22178cb7a8dd53640a3d05-lq.jpeg",
					orig_name: "main-qimg-0bbf31c18a22178cb7a8dd53640a3d05-lq.jpeg"
				}
			},
			{
				image: {
					path: "https://gradio-builds.s3.amazonaws.com/demo-files/TheCheethcat.jpg",
					url: "https://gradio-builds.s3.amazonaws.com/demo-files/TheCheethcat.jpg",
					orig_name: "TheCheethcat.jpg"
				}
			}
		]}
		{...args}
	/>
</Template>

<Story
	name="Gallery with label"
	args={{ label: "My Cheetah Gallery", show_label: true }}
/>
<Story
	name="Gallery without label"
	args={{ label: "My Cheetah Gallery", show_label: false }}
/>
<Story
	name="Gallery with rows=3 and columns=3"
	args={{
		label: "My Cheetah Gallery",
		show_label: true,
		rows: 3,
		columns: 3
	}}
/>
<Story
	name="Gallery with columns=4"
	args={{
		label: "My Cheetah Gallery",
		show_label: true,
		columns: 4
	}}
/>
<Story
	name="Gallery with height=600"
	args={{
		label: "My Cheetah Gallery",
		height: 600
	}}
/>
<Story
	name="Gallery with allow_preview=false"
	args={{
		label: "My Cheetah Gallery",
		show_label: true,
		allow_preview: false
	}}
/>
<Story
	name="Gallery with preview"
	args={{
		label: "My Cheetah Gallery",
		show_label: true,
		preview: true
	}}
/>
<Story
	name="Gallery with object_fit=scale-down"
	args={{
		label: "My Cheetah Gallery",
		show_label: true,
		object_fit: "scale-down"
	}}
/>
<Story
	name="Gallery with object_fit=contain"
	args={{
		label: "My Cheetah Gallery",
		show_label: true,
		object_fit: "contain"
	}}
/>
<Story
	name="Gallery with object_fit=cover"
	args={{
		label: "My Cheetah Gallery",
		show_label: true,
		object_fit: "cover"
	}}
/>
<Story
	name="Gallery with object_fit=none"
	args={{
		label: "My Cheetah Gallery",
		show_label: true,
		object_fit: "none"
	}}
/>
<Story
	name="Gallery with object_fit=fill"
	args={{
		label: "My Cheetah Gallery",
		show_label: true,
		object_fit: "fill"
	}}
/>
<Story
	name="Gallery with share button"
	args={{
		label: "My Cheetah Gallery",
		show_label: true,
		show_share_button: true
	}}
/>

<Story
	name="Gallery with overflow of images"
	args={{
		label: "My Cheetah Gallery",
		show_label: true,
		rows: 2,
		columns: 2,
		height: 400
	}}
/>

<Story
	name="Gallery with download button"
	args={{
		label: "My Cheetah Gallery",
		rows: 2,
		height: 400,
		show_download_button: true
	}}
/>