Fxiaoke Developer Manual
Table of Contents

Button

# fsButton

Commonly used operation button.

# Parameters

Parameter Description Type Optional Values Default
size Size string small / normal / large large
type Type string primary / warn / default default
plain Whether to use plain style boolean — false
disabled Whether disabled boolean — false
text Button text string — —
btnStyle Button style string — ''
textStyle Text style string — ''

# Slot

Name Description
content Button content

# Basic Usage

Basic button usage.

<view class="test_container">
  <fs-divider tip="Default button"></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="Plain button"></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

Disabled button state.

<view class="test_container">
  <fs-divider tip="Disabled button"></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 can improve recognition (with text) or save space (without text).

<view class="test_container">
  <fs-divider tip="With custom icon"></fs-divider>
  <view class="btn-group">
    <fs-button class="fs-btn-cus" text="default">
      <text class="fs-iconfont" slot="left" style="font-size: 20px;"></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;"></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;"></text>
      <text class="fs-iconfont" slot="right" style="color:#FF3F3F;font-size: 20px;"></text>
    </fs-button>
  </view>
</view>

# Different Sizes

The Button component provides three sizes besides the default value, allowing you to choose the appropriate button size for different scenarios.

<view class="test_container">
  <fs-divider tip="Normal size button"></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="Smallest button"></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>
Action Sheet
Divider

← Divider→