button

The <button> component includes capsule, circle, text, arc, and download buttons.

Child Components

Not supported

Attributes

In addition to the attributes in Universal Attributes, the following attributes are supported.

Name Type Default Value Mandatory Description
type string - No Dynamic modification is not supported. If this attribute is not set, capsule-like buttons are displayed. Different from the capsule button, the four rounded corners of a capsule-like button can be configured using border-radius. Available button types are as follows:
- capsule: a capsule button with fillets, background color, and text
- circle: a circle button which can be used to place icons
- text: a text button which displays the text onlyarc: an arc button. This value is applicable to wearables only.
- download: a download button. The download progress bar is added.
value string - No Text value of the button.
icon string - No Path of the button icon. The supported icon formats are JPG, PNG, and SVG.
placement5+ string end No Position of the button icon in text. This attribute is valid only when type is not set. Available values are as follows:
- start: The button icon is at the beginning of the text.
- end: The button icon is at the end of the text.
- top: The button icon is at the top of the text.
- bottom: The button icon is at the bottom of the text.
waiting boolean false No Waiting status. When waiting is set to true, the waiting transition is displayed on the left of the text. This attribute is unavailable for download buttons and wearables.

Styles

When the Button Type Is Not arc

In addition to the styles in Universal Styles, the following styles are supported.

Name Type Default Value Mandatory Triggered when
text-color <color> #ff007dff No Text color of the button.
font-size <length> 16px No Font size of the button.
allow-scale boolean true No Whether the font size changes with the system's font size settings.NOTE:If the config-changes tag of fontSize is configured for abilities in the config.json file, the setting takes effect without application restart.
font-style string normal No Font style of the button.
font-weight number | string normal No Font weight of the button. For details, see font-weight of the text component.
font-family <string> sans-serif No Font family, in which fonts are separated by commas (,). Each font is set using a font name or font family name. The first font in the family or the font specified by Custom Font Styles is used for the text.
icon-width <length> - No Width of the internal icon of a circle button. The entire circle button is filled by default.NOTE:This style must be set when the icon uses the SVG image.
icon-height <length> - No Height of the internal icon of a circle button. The entire circle button is filled by default.NOTE:This style must be set when the icon uses the SVG image.
radius <length> - No Button radius. For a circle button, this style takes precedence over width and height in the common styles.

![img]../public_sys-resources/icon-note.gif) NOTE:

  • For capsule buttons, border-related styles are not supported.
  • For circle buttons, text-related styles are not supported.
  • For text buttons, the text size is automatically adaptive, and radius, width, and height cannot be set. The background-color style is not supported when the background is completely transparent.

When the Button Type Is arc

In addition to the background-color, opacity, display, visibility, position, [left|top**|right|bottom** styles in Universal Styles, the following styles are supported.

Name Type Default Value Mandatory Triggered when
text-color <color> #de0000 No Text color of the arc button.
font-size <length> 37.5px No Font size of the arc button.
allow-scale boolean true No Whether the font size changes with the system's font size settings.
font-style string normal No Font style of the arc button.
font-weight number | string normal No Font weight of the arc button. For details, see font-weight of the text component.
font-family <string> sans-serif No Font family, in which fonts are separated by commas (,). Each font is set using a font name or font family name. The first font in the family or the font specified by Custom Font Styles is used for the text.

Events

Events in Universal Events are supported.

Methods

Methods in Universal Methods are supported.

When the button type is download, the following methods are supported.

Name Parameter Triggered when
setProgress { progress:percent } Progress bar of the download button. The value ranges from 0 to 100. The progress bar is displayed if the value is greater than 0. If the value is greater than or equal to 100, the progress bar is not displayed.NOTE:The text displayed on the progress bar is changed based on the value.

Example

<!-- xxx.hml -->
<div class="div-button">
  <button class="first" type="capsule" value="Capsule button"></button>
  <button class="button circle" type="circle" icon="common/ic_add_default.png"></button>
  <button class="button text" type="text">Text button</button>
  <button class="button download" type="download" id="download-btn"
    onclick="progress">{{downloadText}}</button>
  <button class="last" type="capsule" waiting="true">Loading</button>
</div>
/* xxx.css */ 
.div-button {
  flex-direction: column;
  align-items: center;
}
.first{
  background-color: #F2F2F2;
  text-color: #0D81F2;
}
.button {
  margin-top: 15px;
}
.last{
  background-color: #F2F2F2;
  text-color: #969696;
  margin-top: 15px;
  width: 280px;
  height:72px;
}
.button:waiting {
  width: 280px;
}
.circle {
  background-color: #007dff;
  radius: 72px;
  icon-width: 72px;
  icon-height: 72px;
}
.text {
  text-color: red;
  font-size: 40px;
  font-weight: 900;
  font-family: sans-serif;
  font-style: normal;
}
.download {
  width: 280px;
  text-color: white;
  background-color: #007dff;
}
// xxx.js 
export default {
  data: {
    count: 5,
    downloadText: "Download"
  },
  progress(e) {
    this.count+= 10;
    this.downloadText = this.count+ "%";
    this.$element('download-btn').setProgress({ progress: this.count});
    if (this.count>= 100) {
      this.downloadText = "Done";
    }
  }
}

img