File size: 1,722 Bytes
a03b3ba |
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 |
<script>
import { Meta, Template, Story } from "@storybook/addon-svelte-csf";
import Textbox from "./Index.svelte";
</script>
<Meta
title="Components/Textbox"
component={Textbox}
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
},
type: {
options: ["text", "email", "password"],
description: "The type of textbox",
control: { type: "select" },
defaultValue: "text"
},
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>
<Textbox {...args} value="hello world" />
</Template>
<Story
name="Textbox with label"
args={{ label: "My simple label", show_label: true }}
/>
<Story
name="Textbox with 5 lines and max 5 lines"
args={{ lines: 5, max_lines: 5 }}
/>
<Story
name="Password input"
args={{ type: "password", lines: 1, max_lines: 1 }}
/>
<Story name="Right aligned textbox" args={{ text_align: "right" }} />
<Story name="RTL textbox" args={{ rtl: true }} />
|