跳到主要内容

Button 组件

介绍​

按钮用于开始一个即时操作。

用法​

基本引入​

import { FQButton } from '@fq/fq-weapp-ui';

组件依赖的样式文件（仅按需引用时需要）

import '@fq/fq-weapp-ui/dist/styles/components/button.scss';

基础用法​

<FQButton>按钮</FQButton>

颜色和变体、禁用、加载中状态​

<FQButton color="primary-gradient" variant="solid" size="md">
  Solid
</FQButton>
<FQButton color="primary" variant="solid" size="md">
  Solid
</FQButton>
<FQButton color="primary" variant="outlined" size="md" loading>
  Outlined
</FQButton>
<FQButton color="primary" variant="filled" size="md" disabled>
  Filled
</FQButton>
<FQButton color="default" variant="solid" size="md">
  Solid
</FQButton>
<FQButton color="default" variant="outlined" size="md" loading>
  Outlined
</FQButton>
<FQButton color="default" variant="filled" size="md" disabled>
  Filled
</FQButton>

按钮形状​

<FQButton shape="default">default</FQButton>
<FQButton shape="circle">A</FQButton>
<FQButton shape="round">round</FQButton>

按钮文本加粗​

<FQButton block bold>
  加粗 true = 600
</FQButton>
<FQButton block bold={100}>
  加粗 100
</FQButton>
<FQButton block bold={200}>
  加粗 200
</FQButton>
<FQButton block bold={300}>
  加粗 300
</FQButton>
<FQButton block bold={400}>
  加粗 400
</FQButton>
<FQButton block bold={500}>
  加粗 500
</FQButton>
<FQButton block bold={600}>
  加粗 600
</FQButton>
<FQButton block bold={700}>
  加粗 700
</FQButton>
<FQButton block bold={800}>
  加粗 800
</FQButton>
<FQButton block bold={900}>
  加粗 900
</FQButton>

Block按钮​

<FQButton color="primary" variant="solid" block>
  Solid
</FQButton>
<FQButton color="primary" variant="outlined" block>
  Outlined
</FQButton>
<FQButton color="primary" variant="filled" block>
  Filled
</FQButton>

API​

支持小程序原生 Button 组件的所有属性，并额外扩展以下属性

参数说明类型默认值版本
block将按钮宽度调整为其父宽度的选项booleanfalse
bold设置按钮文本加粗，默认 false。也可传入数字表示加粗程度boolean | 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900falsev0.15.0
color设置按钮的颜色default | primary | primary-gradientprimary
disabled设置按钮失效状态booleanfalse
icon设置按钮的图标组件React.ReactNode-
iconPosition设置按钮图标组件的位置start | endstart
disabled设置按钮失效状态booleanfalse
loading设置按钮的载入状态booleanfalse
size设置按钮的大小xl | lg | md | sm | xs | xxsmd
shape设置按钮的形状default | circle | rounddefault
variant设置按钮的变体outlined | solid | filledsolid

FAQ​

在 FQButton 组件传递 Show 组件时，可能存在于期望结果不一致的情况？​

假设有这样一段代码

<FQButton>
  <Show when={true} fallback={<View>fallback</View>} style={{ flexDirection: 'column' }}>
    <>
      <Text>show</Text>
      <Text>show2</Text>
    </>
  </Show>
</FQButton>

期望的渲染结果是：

<Button style={{ flexDirection: 'column' }}>
  <View>
    <Text>show</Text>
    <Text>show2</Text>
  </View>
</Button>

因为在 FQButton 组件中，会判断 children 是否为 string 或 React.Fragment，如果是，则会包裹多一层 <View>，主要是为了处理 iconPosition 的对 children 的影响。

但实际渲染结果是：

<Button style={{ flexDirection: 'column' }}>
  <Text>show</Text>
  <Text>show2</Text>
</Button>

原因在于 Show 组件的 type 是函数，而不是 string 或 React.Fragment，因此没有进行额外的包裹。

虽然结果是你想要的，是按上下排列的，但间距会变大，因为是 FQButton 组件的 gap 属性影响了（主要是为了处理 icon 与 children 的间距）。

不建议通过修改 gap 来达到预期， 正确处理方式如下：

<FQButton>
  <Show when={true} fallback={<View>fallback</View>}>
    <View style={{ flexDirection: 'column' }}>
      <Text>show</Text>
      <Text>show2</Text>
    </View>
  </Show>
</FQButton>