arrow-left

All pages
gitbookPowered by GitBook
1 of 1

Loading...

Input

介紹使用 Input 輸入框元件

Input 輸入框是一種可以讓網頁與使用者互相傳遞訊息的元件,而訊息又具有多種類型,例如:密碼、單行文字、多行文字,其中密碼類型必須考量使用者在填寫時,盡量不要讓人看到,或是有時候會忘記自己打到哪邊,所以會設置一個按鈕,將隱藏的文字重新顯示。另外,使用者也會需要用到清除的按鈕以快速清除然後重新輸入內容。

circle-exclamation

注意

hashtag
大小

hashtag
提示文字

hashtag
禁用

hashtag
必填

hashtag
唯讀

hashtag
錯誤提示

hashtag
快捷鍵

hashtag
隱藏清除按鈕

hashtag
類型

hashtag
屬性

Name
Value
Type
Default
Required
Note

hashtag
Demo

使用 <bpa-input :id="{id}"> 時,需要 <label :for="{id}">
但如果是在 <bpa-form-item :labelFor="{id}"> 裡面時,就不需要加 <label>。

<label for="test">Label</label>
<bpa-input id="test"/>
...
<bpa-form-item :labelFor="test">
    <bpa-input id="test"/>
</bpa-form-item>

[ String, Number ]

size

small, large

type

placeholder

disabled

required

readonly

error

accesskey

disabledClear

id

value

Input 介紹示意圖

<bpa-input v-model="value" size="small"/>
<bpa-input v-model="value" placeholder="Please enter here!"/>
<bpa-input v-model="value" disabled/>
<bpa-input v-model="value" required/>
<bpa-input v-model="value" readonly/>
<bpa-input v-model="value" error/>
<bpa-input v-model="value" accesskey="K"/>
<bpa-input v-model="value" disabledClear/>
<!-- password -->
<bpa-input v-model="value" type="password"/>

<!-- multiple lines -->
<bpa-input v-model="value" type="textarea"/>