gradio
89 строк · 2.2 Кб
1<script>
2import { Meta, Template, Story } from "@storybook/addon-svelte-csf";
3import DownloadButton from "./Index.svelte";
4</script>
5
6<Meta
7title="Components/DownloadButton"
8component={DownloadButton}
9argTypes={{
10label: {
11control: "text",
12description: "The text to display on the button",
13name: "label",
14value: "Gradio Button"
15},
16variant: {
17options: ["primary", "secondary", "stop"],
18description: "The variant of the button",
19control: { type: "select" },
20defaultValue: "primary"
21},
22size: {
23options: ["sm", "lg"],
24description: "The size of the button",
25control: { type: "select" },
26defaultValue: "lg"
27},
28visible: {
29options: [true, false],
30description: "Sets the visibility of the button",
31control: { type: "boolean" },
32defaultValue: true
33},
34interactive: {
35options: [true, false],
36description: "If false, the button will be in a disabled state",
37control: { type: "boolean" },
38defaultValue: true
39},
40disabled: {
41options: [true, false],
42control: { type: "boolean" },
43defaultValue: false
44},
45scale: {
46options: [null, 0.5, 1, 2],
47description:
48"relative size compared to adjacent Components. For example if Components A and B are in a Row, and A has scale=2, and B has scale=1, A will be twice as wide as B. Should be an integer. Only applies in Rows, or top-level Components in Blocks where fill_height=True. ",
49control: { type: "select" }
50}
51}}
52/>
53
54<Template let:args>
55<DownloadButton value="" interactive="true" {...args} />
56</Template>
57
58<Story
59name="Primary"
60args={{ label: "Download", variant: "primary", size: "lg", scale: 1 }}
61/>
62<Story
63name="Secondary"
64args={{ label: "Download", variant: "secondary", size: "lg" }}
65/>
66<Story name="Stop" args={{ label: "Download", variant: "stop", size: "lg" }} />
67<Story
68name="Button with external image icon"
69args={{
70label: "Download",
71icon: {
72path: "https://huggingface.co/front/assets/huggingface_logo-noborder.svg",
73url: "https://huggingface.co/front/assets/huggingface_logo-noborder.svg"
74}
75}}
76/>
77<Story
78name="Button with visible equal to false"
79args={{
80label: "Download",
81visible: false
82}}
83/>
84<Story
85name="Button with null label (should be collapsed)"
86args={{
87label: null
88}}
89/>
90