diff --git a/src/components/Form/input.story.vue b/src/components/Form/input.story.vue new file mode 100644 index 0000000..01bd582 --- /dev/null +++ b/src/components/Form/input.story.vue @@ -0,0 +1,304 @@ + + + + + + + +## Basic usage + +Input is a controlled component, it **always shows Vue binding value**. + +Under normal circumstances, `input` event should be handled. Its handler should update component's binding value (or use `v-model`). Otherwise, input box's value will not change. + +Do not support `v-model` modifiers. + +## Disabled + +Disable the Input with the `disabled` attribute. + +## Clearable + +Make the Input clearable with the `clearable` attribute. + +## Formatter + +Display value within it's situation with `formatter`, and we usually use `parser` at the same time. + +## Password box + +Make a toggle-able password Input with the `show-password` attribute. + +## Input with icon + +Add an icon to indicate input type. + +To add icons in Input, you can simply use `prefix-icon` and `suffix-icon` attributes. Also, the `prefix` and `suffix` named slots works as well. + +## Textarea + +Resizable for entering multiple lines of text information. Add attribute `type="textarea"` to change `input` into native `textarea`. + +Control the height by setting the `rows` prop. + +## Autosize Textarea + +Setting the `autosize` prop for a textarea type of Input makes the height to automatically adjust based on the content. An options object can be provided to `autosize` to specify the minimum and maximum number of lines the textarea can automatically adjust. + +## Mixed input + +Prepend or append an element, generally a label or a button. + +Use `slot` to distribute elements that prepend or append to Input. + +## Sizes + +Add `size` attribute to change the size of Input. In addition to the default size, there are two other options: `large`, `small`. + +## Limit length + +`maxlength` and `minlength` attributes of input, they declare a limit on the number of characters a user can input. The "number of characters" is measured using JavaScript string length.Setting the `maxlength` prop for a text or textarea type of Input can limit the length of input value, allows you to show word count by setting `show-word-limit` to `true` at the same time. +