fsButton button

Commonly used action buttons.

parameter

parameter	illustrate	type	optional value	Defaults
size	size	string	small / normal / large	large
type	type	string	primary / warn / default	default
plain	Simple button	boolean	—	false
disabled	Is it disabled	boolean	—	false
text	text	string	—	—
btnStyle	button style	string	—	''
textStyle	text style	string	—	''

Slot

name	illustrate
content	button content

Basic usage

Basic button usage.

<view class="test_container">
 <fs-divider tip="默认按钮"></fs-divider>
 <view class="btn-group">
   <fs-button class="fs-btn-cus" text="default"></fs-button>
   <fs-button class="fs-btn-cus" text="primary" type="primary"></fs-button>
   <fs-button class="fs-btn-cus" text="warn" type="warn"></fs-button>
 </view>
 <fs-divider tip="朴素按钮"></fs-divider>
 <view class="btn-group">
   <fs-button class="fs-btn-cus" text="default" plain="{{true}}"></fs-button>
   <fs-button class="fs-btn-cus" text="primary" type="primary" plain="{{true}}"></fs-button>
   <fs-button class="fs-btn-cus" text="warn" type="warn" plain="{{true}}"></fs-button>
 </view>
</view>

disabled state

The button is unavailable.

<view class="test_container">
 <fs-divider tip="禁用按钮"></fs-divider>
 <view class="btn-group">
   <fs-button class="fs-btn-cus" text="default" disabled="{{true}}"></fs-button>
   <fs-button class="fs-btn-cus" text="primary" type="primary" disabled="{{true}}"></fs-button>
   <fs-button class="fs-btn-cus" text="warn" type="warn" disabled="{{true}}"></fs-button>
   <fs-button class="fs-btn-cus" text="default" plain="{{true}}" disabled="{{true}}"></fs-button>
   <fs-button class="fs-btn-cus" text="primary" type="primary" plain="{{true}}" disabled="{{true}}"></fs-button>
   <fs-button class="fs-btn-cus" text="warn" type="warn" plain="{{true}}" disabled="{{true}}"></fs-button>
 </view>
</view>

icon button

Buttons with icons enhance legibility (with text) or save space (without text).

<view class="test_container">
 <fs-divider tip="带自定义图标"></fs-divider>
 <view class="btn-group">
   <fs-button class="fs-btn-cus" text="default">
     <text class="fs-iconfont" slot="left" style="font-size: 20px;">\uE60f</text>
   </fs-button>
 </view>
 <view class="btn-group btn-group-inline">
   <fs-button class="inline_fs-btn-cus" text="primary" type="primary" size="normal">
     <text class="fs-iconfont" slot="left" style="color:#fff;font-size: 20px;">\uE60f</text>
   </fs-button>
   <fs-button class="inline_fs-btn-cus" text="default" type="warn" size="small" plain="{{true}}">
     <text class="fs-iconfont" slot="left" style="color:#FF3F3F;font-size: 20px;">\uE60f</text>
     <text class="fs-iconfont" slot="right" style="color:#FF3F3F;font-size: 20px;">\uE60f</text>
   </fs-button>
   </view>
</view>

Different sizes

The Button component provides three sizes in addition to the default value, and you can choose the appropriate button size in different scenarios.

<view class="test_container">
 <fs-divider tip="正常大小的按钮"></fs-divider>
 <view class="btn-group btn-group-inline">
   <fs-button class="inline_fs-btn-cus" text="default" size="normal"></fs-button>
   <fs-button class="inline_fs-btn-cus" text="primary" type="primary" size="normal"></fs-button>
   <fs-button class="inline_fs-btn-cus" text="warn" type="warn" size="normal"></fs-button>
 </view>
 <view class="btn-group btn-group-inline">
   <fs-button class="inline_fs-btn-cus" text="default" plain="{{true}}" size="normal"></fs-button>
   <fs-button class="inline_fs-btn-cus" text="primary" type="primary" plain="{{true}}" size="normal"></fs-button>
   <fs-button class="inline_fs-btn-cus" text="warn" type="warn" plain="{{true}}" size="normal"></fs-button>
 </view>
 <fs-divider tip="最小的按钮"></fs-divider>
 <view class="btn-group btn-group-inline">
   <fs-button class="inline_fs-btn-cus" text="default" size="small"></fs-button>
   <fs-button class="inline_fs-btn-cus" text="primary" type="primary" size="small"></fs-button>
   <fs-button class="inline_fs-btn-cus" text="warn" type="warn" size="small"></fs-button>
 </view>
 <view class="btn-group btn-group-inline">
   <fs-button class="inline_fs-btn-cus" text="default" plain="{{true}}" size="small"></fs-button>
   <fs-button class="inline_fs-btn-cus" text="primary" type="primary" plain="{{true}}" size="small"></fs-button>
   <fs-button class="inline_fs-btn-cus" text="warn" type="warn" plain="{{true}}" size="small"></fs-button>
 </view>
</view>
</fx-row>