123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899 |
- <view class="page">
- <view class="page__hd">
- <view class="page__title">Textarea</view>
- <view class="page__desc">多行输入框</view>
- </view>
- <view class="page__bd">
- <wux-cell-group title="Normal Usage">
- <wux-cell hover-class="none">
- <wux-textarea placeholder="No label" />
- </wux-cell>
- <wux-cell hover-class="none">
- <wux-textarea label="First name" />
- </wux-cell>
- <wux-cell hover-class="none">
- <wux-textarea label="Last name" placeholder="Input your last name" />
- </wux-cell>
- </wux-cell-group>
- <wux-cell-group title="Auto / Fixed height">
- <wux-cell hover-class="none">
- <wux-textarea autoHeight label="First name" />
- </wux-cell>
- <wux-cell hover-class="none">
- <wux-textarea rows="3" label="Last name" placeholder="Input your last name" />
- </wux-cell>
- </wux-cell-group>
- <wux-cell-group title="Count">
- <wux-cell hover-class="none">
- <wux-textarea hasCount rows="3" cursorSpacing="80" placeholder="Count..." />
- </wux-cell>
- </wux-cell-group>
- <wux-cell-group title="Custom title">
- <wux-cell hover-class="none">
- <wux-textarea>First name</wux-textarea>
- </wux-cell>
- <wux-cell hover-class="none">
- <wux-textarea placeholder="Input your last name">
- <image style="width: 20px; height: 20px; margin-right: 5px" src="http://cdn.skyvow.cn/logo.png" />
- </wux-textarea>
- </wux-cell>
- </wux-cell-group>
- <wux-cell-group title="Show clear">
- <wux-cell hover-class="none">
- <wux-textarea clear label="First name" />
- </wux-cell>
- <wux-cell hover-class="none">
- <wux-textarea clear label="Last name" placeholder="Input your last name" />
- </wux-cell>
- </wux-cell-group>
- <wux-cell-group title="Extra">
- <wux-cell hover-class="none">
- <wux-textarea label="Dollar" defaultValue="1024" extra="$" />
- </wux-cell>
- <wux-cell hover-class="none">
- <wux-textarea label="RMB" defaultValue="1024">
- <view slot="footer" style="margin-left: 5px">¥</view>
- </wux-textarea>
- </wux-cell>
- </wux-cell-group>
- <wux-cell-group title="Disabled">
- <wux-cell hover-class="none">
- <wux-textarea disabled label="First name" />
- </wux-cell>
- <wux-cell hover-class="none">
- <wux-textarea disabled label="Last name" defaultValue="1024" />
- </wux-cell>
- </wux-cell-group>
- <wux-cell-group title="ReadOnly">
- <wux-cell hover-class="none">
- <wux-textarea readOnly label="First name" defaultValue="read-only mode" />
- </wux-cell>
- <wux-cell hover-class="none">
- <wux-textarea readOnly label="Last name" defaultValue="1024" />
- </wux-cell>
- </wux-cell-group>
- <wux-cell-group title="Controlled">
- <wux-cell hover-class="none">
- <wux-textarea label="Uncontrolled" defaultValue="1024" />
- </wux-cell>
- <wux-cell hover-class="none">
- <wux-textarea label="Controlled" value="{{ value }}" controlled bind:change="onChange" bind:focus="onFocus" bind:blur="onBlur" bind:confirm="onConfirm" bind:clear="onClear" />
- </wux-cell>
- </wux-cell-group>
- <wux-cell-group title="Error">
- <wux-cell hover-class="none">
- <wux-textarea label="Tel number" value="{{ value }}" controlled error="{{ error }}" bind:change="onChange" bind:focus="onFocus" bind:blur="onBlur" bind:confirm="onConfirm" bind:clear="onClear" bind:error="onError" />
- </wux-cell>
- </wux-cell-group>
- <wux-cell-group title="Keyboard accessory" label="tip: 视图最大高度为 200px">
- <wux-cell hover-class="none">
- <wux-textarea hold-keyboard="{{ true }}" rows="3" cursorSpacing="80" placeholder="设置 input / textarea 聚焦时键盘上方 cover-view / cover-image 工具栏视图">
- <cover-view slot="keyboard-accessory" class="container" style="height: 50px;">
- <cover-view style="flex: 1; background: green;">1</cover-view>
- <cover-image src="https://images.unsplash.com/photo-1593642632823-8f785ba67e45?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=60" style="flex: 1; background: red;"></cover-image>
- </cover-view>
- </wux-textarea>
- </wux-cell>
- </wux-cell-group>
- </view>
- </view>
|