-
Notifications
You must be signed in to change notification settings - Fork 2.3k
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
* Add stories * Add show_share_button story + label * Fix typo
- Loading branch information
1 parent
df804ca
commit 4b7cb2a
Showing
1 changed file
with
180 additions
and
0 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -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 | ||
| }} | ||
| /> |
4b7cb2aThere was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Successfully deployed to the following URLs:
gradio – ./
gradio-hugging-face.vercel.app
gradio-git-main-hugging-face.vercel.app
gradio-two.vercel.app
www.gradio.app
gradio.app