File size: 1,888 Bytes
0bd62e5 |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 |
<script>
import { Meta, Template, Story } from "@storybook/addon-svelte-csf";
import MultimodalTextbox from "./Index.svelte";
</script>
<Meta
title="Components/MultimodalTextbox"
component={MultimodalTextbox}
argTypes={{
label: {
control: "text",
description: "The textbox label",
name: "label"
},
show_label: {
options: [true, false],
description: "Whether to show the label",
control: { type: "boolean" },
defaultValue: true
},
text_align: {
options: ["left", "right"],
description: "Whether to align the text left or right",
control: { type: "select" },
defaultValue: "left"
},
lines: {
options: [1, 5, 10, 20],
description: "The number of lines to display in the textbox",
control: { type: "select" },
defaultValue: 1
},
max_lines: {
options: [1, 5, 10, 20],
description:
"The maximum number of lines to allow users to type in the textbox",
control: { type: "select" },
defaultValue: 1
},
rtl: {
options: [true, false],
description: "Whether to render right-to-left",
control: { type: "boolean" },
defaultValue: false
}
}}
/>
<Template let:args>
<MultimodalTextbox {...args} />
</Template>
<Story
name="MultimodalTextbox with file and label"
args={{
value: {
text: "sample text",
files: [
{
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: "cheetah.jpg"
}
]
},
label: "My simple label",
show_label: true
}}
/>
<Story
name="MultimodalTextbox with 5 lines and max 5 lines"
args={{ lines: 5, max_lines: 5 }}
/>
<Story name="Right aligned textbox" args={{ text_align: "right" }} />
<Story name="RTL textbox" args={{ rtl: true }} />
|