mirror of
https://github.com/gradio-app/gradio.git
synced 2025-01-30 11:00:11 +08:00
Add storybook for Gallery (#4818)
* Add stories * Add show_share_button story + label * Fix typo
This commit is contained in:
Freddy Boulton
GitHub
parent
df804ca281
commit
4b7cb2a436
180
js/app/src/components/Gallery/Gallery.stories.svelte
Normal file
180
js/app/src/components/Gallery/Gallery.stories.svelte
Normal file
@ -0,0 +1,180 @@
|
||||
<script>
|
||||
import { Meta, Template, Story } from "@storybook/addon-svelte-csf";
|
||||
import Gallery from "./Gallery.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 gallery",
|
||||
control: { type: "boolean" },
|
||||
defaultValue: true
|
||||
},
|
||||
grid_cols: {
|
||||
options: [1, 2, 3, 4],
|
||||
description: "The number of colums to show in grid",
|
||||
control: { type: "select" },
|
||||
defaultValue: 2
|
||||
},
|
||||
grid_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 view 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
|
||||
{...args}
|
||||
value={[
|
||||
[
|
||||
"https://gradio-builds.s3.amazonaws.com/demo-files/cheetah_running.avif",
|
||||
"A fast cheetah"
|
||||
],
|
||||
"https://gradio-builds.s3.amazonaws.com/demo-files/cheetah-002.jpg",
|
||||
"https://gradio-builds.s3.amazonaws.com/demo-files/cheetah-003.jpg",
|
||||
"https://gradio-builds.s3.amazonaws.com/demo-files/cheetah3.webp",
|
||||
"https://gradio-builds.s3.amazonaws.com/demo-files/ghepardo-primo-piano.jpg",
|
||||
"https://gradio-builds.s3.amazonaws.com/demo-files/main-qimg-0bbf31c18a22178cb7a8dd53640a3d05-lq.jpeg",
|
||||
"https://gradio-builds.s3.amazonaws.com/demo-files/TheCheethcat.jpg"
|
||||
]}
|
||||
/>
|
||||
</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 grid_rows=3 and grid_cols=3"
|
||||
args={{
|
||||
label: "My Cheetah Gallery",
|
||||
show_label: true,
|
||||
grid_rows: 3,
|
||||
grid_cols: 3
|
||||
}}
|
||||
/>
|
||||
<Story
|
||||
name="Gallery with grid_cols=4"
|
||||
args={{
|
||||
label: "My Cheetah Gallery",
|
||||
show_label: true,
|
||||
grid_cols: 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
|
||||
}}
|
||||
/>
|
||||
Loading…
Reference in New Issue
Block a user