fsButton 按钮

常用的操作按钮。

参数

参数	说明	类型	可选值	默认值
size	尺寸	string	small / normal / large	large
type	类型	string	primary / warn / default	default
plain	是否朴素按钮	boolean	—	false
disabled	是否禁用状态	boolean	—	false
text	文本	string	—	—
btnStyle	按钮样式	string	—	''
textStyle	文本样式	string	—	''

Slot

name	说明
content	按钮内容

基础用法

基础的按钮用法。

<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>

禁用状态

按钮不可用状态。

 <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>

图标按钮

带图标的按钮可增强辨识度（有文字）或节省空间（无文字）。

<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>

不同尺寸

Button 组件提供除了默认值以外的三种尺寸，可以在不同场景下选择合适的按钮尺寸。

<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>