Appearance

目录

<button> ​

<button>是按钮组件

WARNING

<button> 不支持嵌套子组件

属性 ​

属性名类型默认值说明
disabledBooleanfalse是否允许点击
pressed-styleObject{}按压状态下的样式
disabled-styleObject{}禁用状态下的样式

事件 ​


通用事件，可参考事件介绍 ​

示例 ​


Tenon Vue ​

html
<!-- App.vue -->
<template>
  <button 
    @tap="handleTap("Button Clicked!")" 
    :pressedStyle="{
      backgroundColor: '#ff0000'
    }"
    :disabledStyle="{
      backgroundColor: '#333333'
    }"
  >Click Me!</button>
</template>
<script>
  export default{
    methods: {
      handleTap(msg){
        Toast.show(msg)
      }
    }
  }
</script>

更多用法，可参考Tenon Vue 官方示例。

Tenon React ​

jsx
import React from "react"

import Tenon from "@hummer/tenon-react"

function handleClickBtn(msg) {
  Toast.show(msg)
}

function ButtonApp() {
  return (
    <button
      className="btn"
      onTap={() => handleClickBtn("Button Clicked!")}
    > Button</button>
  );
}

Tenon.render(<ButtonApp />)

更多用法，可参考Tenon React 官方示例。