IBest-UI@HarmonyOS

Appearance

Button 按钮 ​

介绍 ​

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

引入 ​

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

代码演示 ​

按钮类型 ​

按钮类型

TIP

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

点我查看代码
ts
IBestButton({
  text: "主要按钮",
  type: "primary",
});

IBestButton({
  text: "成功按钮",
  type: "success",
});

IBestButton({
  text: "默认按钮",
  type: "default",
});

IBestButton({
  text: "危险按钮",
  type: "danger",
});

IBestButton({
  text: "警告按钮",
  type: "warning",
});

朴素按钮 ​

朴素按钮

TIP

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

点我查看代码
ts
IBestButton({
  text: "朴素按钮",
  type: "primary",
  plain: true,
});

IBestButton({
  text: "朴素按钮",
  plain: true,
  type: "success",
});

禁用状态 ​

禁用状态

TIP

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

点我查看代码
ts
IBestButton({
  text: "禁用状态",
  type: "primary",
  disabled: true,
});

IBestButton({
  text: "禁用状态",
  disabled: true,
  type: "success",
});

加载状态 ​

加载状态

TIP

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

点我查看代码
ts
IBestButton({
  type: "primary",
  loading: true,
});

IBestButton({
  text: "加载状态",
  loadingText: "加载中...",
  type: "success",
  loading: true,
});

按钮形状 ​

按钮形状

TIP

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

点我查看代码
ts
IBestButton({
  text: "方形按钮",
  type: "primary",
  square: true,
});

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

图标按钮 ​

图标按钮

TIP

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

点我查看代码
ts
import { IBestButton } from "@ibestservices/ibest-ui";

@Builder function Arrow(color = '#fff'){
  Image($r('app.media.title_back'))
    .width(20)
    .fillColor(color)

}

@Entry
@Component
struct ButtonPage {
  build(){
    // ...

    IBestButton({
      type: 'primary',
      iconBuilder: Arrow
    })

    IBestButton({
      text: '按钮',
      type: 'primary',
      iconBuilder: Arrow
    })

    IBestButton({
      plain: true,
      text: '按钮',
      type: 'default',
      iconBuilder: Arrow.bind(this, '#4B72EF')
    })

    // ...
  }
}

按钮尺寸 ​

按钮尺寸

TIP

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

点我查看代码
ts
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
IBestButton({
  text: "自定义颜色按钮",
  color: "#7232dd",
});

IBestButton({
  text: "自定义颜色按钮",
  plain: true,
  color: "#7232dd",
});

自定义大小 ​

自定义大小

TIP

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

点我查看代码
ts
IBestButton({
  text: "自定义大小按钮",
  btnWidth: 300,
  btnHeight: 80,
  btnFontSize: 32,
});

API ​

@Props ​

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

Events ​

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

插槽 ​

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