IBest-UI@HarmonyOS

Appearance

Button 按钮 ​

介绍 ​

按钮用于触发一个操作，如提交表单。

引入 ​

ts
import { IBestButton } from "@ibestservices/ibest-ui";

代码演示 ​

按钮类型 ​

按钮类型

TIP

按钮支持 default、primary、success、warning、danger 五种类型，默认为 default。

点我查看代码
ts
@Entry
@Component
struct DemoPage {
  build() {
    Flex({ wrap: FlexWrap.Wrap, space: {main: LengthMetrics.vp(12), cross: LengthMetrics.vp(12)} }) {
      IBestButton({
        text: '主要按钮',
        type: 'primary'
      })
      IBestButton({
        text: '成功按钮',
        type: 'success'
      })
      IBestButton({
        text: '默认按钮',
        type: 'default'
      })
      IBestButton({
        text: '危险按钮',
        type: 'danger'
      })
      IBestButton({
        text: '警告按钮',
        type: 'warning'
      })
    }
  }
}

朴素按钮 ​

朴素按钮

TIP

通过 plain 属性将按钮设置为朴素按钮，朴素按钮的文字为按钮颜色，背景为白色。

点我查看代码
ts
@Entry
@Component
struct DemoPage {
  build() {
    Row({ space: 12 }) {
      IBestButton({
        text: '朴素按钮',
        type: 'primary',
        plain: true
      })
      IBestButton({
        text: '朴素按钮',
        plain: true,
        type: 'success'
      })
    }
  }
}

禁用状态 ​

禁用状态

TIP

通过 disabled 属性来禁用按钮，禁用状态下按钮不可点击。

点我查看代码
ts
@Entry
@Component
struct DemoPage {
  build() {
    Row({ space: 12 }) {
      IBestButton({
        text: '禁用状态',
        type: 'primary',
        disabled: true
      })
      IBestButton({
        text: '禁用状态',
        type: 'success',
        disabled: true
      })
    }
  }
}

加载状态 ​

加载状态

TIP

通过 loading 属性设置按钮为加载状态，加载状态下默认会隐藏按钮文字，可以通过 loadingText 设置加载状态下的文字。

点我查看代码
ts
@Entry
@Component
struct DemoPage {
  build() {
    Row({ space: 12 }) {
      IBestButton({
        loading: true,
        type: 'primary',
      })
      IBestButton({
        text: '加载状态',
        loadingText: '加载中...',
        type: 'success',
        loading: true
      })
    }
  }
}

按钮形状 ​

按钮形状

TIP

通过 square 设置方形按钮，通过 round 设置圆形按钮。

点我查看代码
ts
@Entry
@Component
struct DemoPage {
  build() {
    Row({ space: 12 }) {
      IBestButton({
        text: "方形按钮",
        type: "primary",
        square: true,
      });

      IBestButton({
        text: "圆形按钮",
        type: "success",
        round: true,
      });
    }
  }
}

图标按钮 ​

图标按钮

TIP

通过 iconBuilder 插槽设置按钮图标。

点我查看代码
ts
@Entry
@Component
struct ButtonPage {
  @Builder Arrow(){
    Image($r('app.media.title_back'))
      .width(16)
  }
  build(){
    Row({ space: 12 }) {
      IBestButton({
        type: 'primary',
        icon: 'plus'
      })
      IBestButton({
        text: '按钮',
        type: 'primary',
        icon: $r('app.media.title_back')
      })
      IBestButton({
        plain: true,
        text: '按钮',
        type: 'default',
        iconBuilder: this.Arrow
      })
    }
  }
}

按钮尺寸 ​

按钮尺寸

TIP

支持 large、normal、small、mini 四种尺寸，默认为 normal

点我查看代码
ts
@Entry
@Component
struct ButtonPage {
  build(){
    Row({ space: 12 }) {
      IBestButton({
        text: '大号按钮',
        type: 'primary',
        buttonSize: 'large'
      })
      IBestButton({
        type: 'primary',
        text: '普通按钮',
      })
      IBestButton({
        text: '小型按钮',
        type: 'primary',
        buttonSize: 'small'
      })
      IBestButton({
        text: '迷你按钮',
        type: 'primary',
        buttonSize: 'mini'
      })
    }
  }
}

自定义样式 ​

自定义样式

TIP

通过 color 属性可以自定义按钮的颜色。

点我查看代码
ts
@Entry
@Component
struct ButtonPage {
  build(){
    Row({space: 12}) {
      IBestButton({
        text: '颜色',
        color: "#7232dd"
      })
      IBestButton({
        text: '字体色',
        fontColor: "#7232dd"
      })
      IBestButton({
        text: '边框',
        btnBorderColor: "red"
      })
      IBestButton({
        type: "primary",
        text: '圆角',
        btnBorderRadius: 16
      })
    }
  }
}

自定义大小 ​

自定义大小

TIP

通过 btnWidth btnHeight 属性可以自定义按钮的大小, btnFontSize 属性可设置按钮文字大小。

点我查看代码
ts
@Entry
@Component
struct ButtonPage {
  build(){
    IBestButton({
      text: "自定义大小按钮",
      btnWidth: 150,
      btnHeight: 40,
      btnFontSize: 16
    })
  }
}

API ​

@Props ​

参数说明类型默认值
type类型，可选值为 primary success warning dangerstringdefault
buttonSize尺寸，可选值为 large small ministringnormal
btnWidth按钮宽度，不写的话则使用 buttonSize 尺寸string | number-
btnHeight按钮高度，不写的话则使用 buttonSize 尺寸string | number-
btnFontSize按钮文字大小，不写的话则使用 buttonSize 尺寸string | number-
text按钮文字ResourceStr''
color按钮颜色ResourceColor
iconPosition图标展示位置，可选值为 rightstringleft
plain是否为朴素按钮booleanfalse
square是否为方形按钮booleanfalse
round是否为圆形按钮booleanfalse
disabled是否禁用按钮booleanfalse
hairline是否使用细边框booleanfalse
loading是否显示为加载状态booleanfalse
loadingText加载状态提示文字ResourceStr
loadingSize加载图标大小，如果为-1 默认跟随字体大小string | number-1
icon按钮图标ResourceStr-
fontColor按钮文字颜色ResourceColor-
btnBorderColor按钮边框颜色ResourceColor-
btnBorderRadius按钮圆角string | number-

Events ​

事件名说明回调参数
onClickBtn点击按钮的回调事件，按钮状态不为加载或禁用时触发event: TouchEvent

插槽 ​

插槽名说明类型
defaultBuilder按钮内容的插槽，使用该插槽后将完全接管按钮内容，其余插槽均失效CustomBuilder
iconBuilder按钮图标的插槽，loading为true时，将显示loading图标CustomBuilder
loadingIconBuilderloading 状态的图标，使用该插槽将替换默认的 loading 图标CustomBuilder