zoukankan      html  css  js  c++  java
  • "按钮"组件:<h-button> —— 快应用组件库H-UI

    <import name="h-button" src="../Common/ui/h-ui/basic/c_button"></import>
    <template>
        <div class="container">
            <h-button id="button1"></h-button>
        </div>
    </template>
    
    <style lang="less">
        @import '../Common/styles/container.less';
    </style>
    

    <import name="h-button" src="../Common/ui/h-ui/basic/c_button"></import>
    <template>
        <div class="container">
            <h-button id="button2" text="保存"></h-button>
        </div>
    </template>
    
    <style lang="less">
        @import '../Common/styles/container.less';
    </style>
    

    <import name="h-button" src="../Common/ui/h-ui/basic/c_button"></import>
    <template>
        <div class="container">
            <h-button id="button3" text="默认按钮"></h-button>
            <h-button id="button4" text="原始按钮" type="primary"></h-button>
            <h-button id="button5" text="成功按钮" type="success"></h-button>
            <h-button id="button6" text="警告按钮" type="warning"></h-button>
            <h-button id="button7" text="危险按钮" type="danger"></h-button>
            <h-button id="button8" text="信息按钮" type="info"></h-button>
        </div>
    </template>
    
    <style lang="less">
        @import '../Common/styles/container.less';
    </style>
    

    <import name="h-button" src="../Common/ui/h-ui/basic/c_button"></import>
    <template>
        <div class="container">
            <h-button id="button9" text="默认大小" type="info"></h-button>
            <h-button id="button10" text="大的按钮" type="info" size="lg"></h-button>
            <h-button id="button11" text="小的按钮" type="info" size="sm"></h-button>
        </div>
    </template>
    
    <style lang="less">
        @import '../Common/styles/container.less';
    </style>
    

    <import name="h-button" src="../Common/ui/h-ui/basic/c_button"></import>
    <template>
        <div class="container">
            <h-button id="button12" text="默认大小块级按钮" type="info" block="true"></h-button>
            <h-button id="button13" text="大的块级按钮" type="info" size="lg" block="true"></h-button>
        </div>
    </template>
    
    <style lang="less">
        @import '../Common/styles/container.less';
    </style>
    

    <import name="h-button" src="../Common/ui/h-ui/basic/c_button"></import>
    <template>
        <div class="container">
            <h-button id="button14" text="设置按钮圆角" type="info" circle="true"></h-button>
        </div>
    </template>
    
    <style lang="less">
        @import '../Common/styles/container.less';
    </style>
    

    <import name="h-button" src="../Common/ui/h-ui/basic/c_button"></import>
    <template>
        <div class="container">
            <h-button id="button15" icon="warning" type="warning"></h-button>
            <h-button id="button16" icon="warning" type="warning" circle="true"></h-button>
        </div>
    </template>
    
    <style lang="less">
        @import '../Common/styles/container.less';
    </style>
    

    <import name="h-button" src="../Common/ui/h-ui/basic/c_button"></import>
    <template>
        <div class="container">
            <h-button id="button17" text="跳转页面" type="info" uri="About"></h-button>
        </div>
    </template>
    
    <style lang="less">
        @import '../Common/styles/container.less';
    </style>
    

    <import name="h-button" src="../Common/ui/h-ui/basic/c_button"></import>
    <template>
        <div class="container">
            <h-button id="button18" text="监控点击事件" type="info"></h-button>
        </div>
    </template>
    
    <style lang="less">
        @import '../Common/styles/container.less';
    </style>
    
    <script>
        import prompt from '@system.prompt'
    
        export default {
            onInit() {
                this.$on('button18_dispatchEvt',this.dispatchEvt)
            },
            dispatchEvt(evt) {
                // 弹窗显示缩略语的详细说明
                prompt.showToast({
                    message: evt.detail.msg,
                    duration: 1,
                    gravity: 'top'
                })
            }
        }
    </script>
    

    扫码体验

  • 相关阅读:
    【转载】著名黑客雷蒙评价几种编程语言
    【GUI开发】Swing的一本极好的入门教材
    【数据结构】数组操作(HighArrayApp.java)
    数据另存为CSV档案(也是一种excel档案)【2】------自主选择路径
    TIniFile实现打开窗体后还原用户之前的配置的功能
    sql server内连接(inner join)、外连接(left outer join、right outer join、full outer join)、记录合并(union、union all)
    @指针、Cardinal()、Integer()、指针取值解析
    关于php编程的一些小技巧
    数据库操作,同时更新多条数据
    省份,城市,地区------三级联动菜单//要加注释
  • 原文地址:https://www.cnblogs.com/cloud-dev/p/an-niuzu-jianlthbuttongt--kuai-ying-yong-zu-jian-k.html
Copyright © 2011-2022 走看看