精华内容
下载资源
问答
  • 鸿蒙开发(2)---Button组件

    千次阅读 多人点赞 2021-06-05 14:41:07
    目录 鸿蒙App开发之Button 创建一个Button 圆形按钮 无背景有边框的圆角按钮 按钮的点击事件(实战通话界面) 鸿蒙App开发之Button 按钮是我们开发中最常见的组件之一,如果读者已经打开鸿蒙开发工具DevEco Studio,...

    鸿蒙App开发之Button

    按钮是我们开发中最常见的组件之一,如果读者已经打开鸿蒙开发工具DevEco Studio,按住Ctrl添加Button类,会发现其继承自Text组件。

    public class Button extends Text
    

    所以,其在鸿蒙中是没有自有的XML属性的,其所有属性都继承自Text组件。

    创建一个Button

    这里,我们和Text组件一样,首先通过XML布局文件进行Button组件的创建。示例代码如下所示:

    <Button
        ohos:id="$+id:test_button"
        ohos:height="match_content"
        ohos:width="match_content"
        ohos:element_left="$media:icon"
        ohos:layout_alignment="horizontal_center"
        ohos:top_margin="30vp"
        ohos:background_element="$graphic:background_ability_main"
        ohos:text="$string:test_button"
        ohos:text_size="40vp"
    />
    

    这里,我们创建了一个长方形的按钮。graphic资源文件如下,仅仅设置了其背景的颜色为红色。

    <shape xmlns:ohos="http://schemas.huawei.com/res/ohos"
           ohos:shape="rectangle">
        <solid
            ohos:color="#FF0000"/>
    </shape>
    

    运行之后,效果如下:
    长方形按钮

    圆形按钮

    通过graphic资源文件的设置,我们还可以将按钮变换为圆形头像类似的圆形按钮。示例代码如下:

    <?xml version="1.0" encoding="UTF-8" ?>
    <shape xmlns:ohos="http://schemas.huawei.com/res/ohos"
           ohos:shape="oval">
        <solid
            ohos:color="#FF0000"/>
    </shape>
    

    不过,需要注意的是,这里我们设置的按钮为oval椭圆形,而圆形也是椭圆形的一种,但圆形的宽高相等。所以,我们还需要将Button按钮宽高设置成一样。

    <Button
        ohos:id="$+id:test_button"
        ohos:height="100vp"
        ohos:width="100vp"
        ohos:layout_alignment="horizontal_center"
        ohos:top_margin="30vp"
        ohos:background_element="$graphic:background_ability_main"
        ohos:text="+"
        ohos:text_size="40vp"
    />
    

    运行之后,效果如下:
    圆形按钮

    至于椭圆,只要保证宽高不相等即是椭圆按钮。

    无背景有边框的圆角按钮

    这里,我们还是实现一个长方形的按钮,但其4个角是圆角过渡,且没有背景。示例代码如下:

    <shape
        xmlns:ohos="http://schemas.huawei.com/res/ohos"
        ohos:shape="rectangle">
        <stroke
            ohos:width="2"
            ohos:color="#FF0000"/>
        <corners
            ohos:radius="100"/>
    </shape>
    

    这里,我们设置了边框的宽度为2,且为红色,同时设置圆角为100。而XML布局中的按钮代码如下所示:

    <Button
        ohos:id="$+id:test_button"
        ohos:height="match_content"
        ohos:width="match_content"
        ohos:layout_alignment="horizontal_center"
        ohos:top_margin="30vp"
        ohos:padding="10vp"
        ohos:background_element="$graphic:background_ability_main"
        ohos:text="$string:test_button"
        ohos:text_size="40vp"
    />
    

    运行之后,效果如下:
    圆角按钮

    按钮的点击事件(实战通话界面)

    众所周知,我们很多手机的通话界面就是12个圆形按钮组成的按键。当我们点击按钮的时候,对应的数字就会输入到上面的文本框中形成电话号码。

    拨号界面
    下面,我们通过这个项目来实战按钮是否完全掌握。代码如下:

    package com.liyuanjing.idacommunity.slice;
    import com.liyuanjing.idacommunity.ResourceTable;
    import ohos.aafwk.ability.AbilitySlice;
    import ohos.aafwk.content.Intent;
    import ohos.agp.components.Button;
    import ohos.agp.components.Component;
    import ohos.agp.components.Text;
    
    public class MainAbilitySlice extends AbilitySlice implements Component.ClickedListener {
        private Button button0;
        private Button button1;
        private Button button2;
        private Button button3;
        private Button button4;
        private Button button5;
        private Button button6;
        private Button button7;
        private Button button8;
        private Button button9;
        private Button button10;
        private Button button11;
        private Text phone_text;
        @Override
        public void onStart(Intent intent) {
            super.onStart(intent);
            super.setUIContent(ResourceTable.Layout_ability_main);
            this.button0=(Button)findComponentById(ResourceTable.Id_button_0);
            this.button1=(Button)findComponentById(ResourceTable.Id_button_1);
            this.button2=(Button)findComponentById(ResourceTable.Id_button_2);
            this.button3=(Button)findComponentById(ResourceTable.Id_button_3);
            this.button4=(Button)findComponentById(ResourceTable.Id_button_4);
            this.button5=(Button)findComponentById(ResourceTable.Id_button_5);
            this.button6=(Button)findComponentById(ResourceTable.Id_button_6);
            this.button7=(Button)findComponentById(ResourceTable.Id_button_7);
            this.button8=(Button)findComponentById(ResourceTable.Id_button_8);
            this.button9=(Button)findComponentById(ResourceTable.Id_button_9);
            this.button10=(Button)findComponentById(ResourceTable.Id_button_10);
            this.button11=(Button)findComponentById(ResourceTable.Id_button_11);
            this.phone_text=(Text)findComponentById(ResourceTable.Id_phone_number_text);
    
            this.phone_text.setClickedListener(this);
            this.button0.setClickedListener(this);
            this.button1.setClickedListener(this);
            this.button2.setClickedListener(this);
            this.button3.setClickedListener(this);
            this.button4.setClickedListener(this);
            this.button5.setClickedListener(this);
            this.button6.setClickedListener(this);
            this.button7.setClickedListener(this);
            this.button8.setClickedListener(this);
            this.button9.setClickedListener(this);
            this.button10.setClickedListener(this);
            this.button11.setClickedListener(this);
        }
        @Override
        public void onClick(Component component) {
            switch (component.getId()){
                case ResourceTable.Id_button_0:
                    this.phone_text.setText(this.phone_text.getText()+"0");
                    break;
                case ResourceTable.Id_button_1:
                    this.phone_text.setText(this.phone_text.getText()+"1");
                    break;
                case ResourceTable.Id_button_2:
                    this.phone_text.setText(this.phone_text.getText()+"2");
                    break;
                case ResourceTable.Id_button_3:
                    this.phone_text.setText(this.phone_text.getText()+"3");
                    break;
                case ResourceTable.Id_button_4:
                    this.phone_text.setText(this.phone_text.getText()+"4");
                    break;
                case ResourceTable.Id_button_5:
                    this.phone_text.setText(this.phone_text.getText()+"5");
                    break;
                case ResourceTable.Id_button_6:
                    this.phone_text.setText(this.phone_text.getText()+"6");
                    break;
                case ResourceTable.Id_button_7:
                    this.phone_text.setText(this.phone_text.getText()+"7");
                    break;
                case ResourceTable.Id_button_8:
                    this.phone_text.setText(this.phone_text.getText()+"8");
                    break;
                case ResourceTable.Id_button_9:
                    this.phone_text.setText(this.phone_text.getText()+"9");
                    break;
                case ResourceTable.Id_button_10:
                    this.phone_text.setText(this.phone_text.getText()+"*");
                    break;
                case ResourceTable.Id_button_11:
                    this.phone_text.setText(this.phone_text.getText()+"#");
                    break;
                case ResourceTable.Id_phone_number_text:
                    this.phone_text.setText("");
            }
        }
        @Override
        public void onActive() {
            super.onActive();
        }
        @Override
        public void onForeground(Intent intent) {
            super.onForeground(intent);
        }
    }
    
    

    这里我们使用最基本获取控件的方式,后面讲解ResourceTable时,教大家如何使用循环体获取名称相近的组件。

    XML布局文件代码:

    <?xml version="1.0" encoding="utf-8"?>
    <DirectionalLayout
        xmlns:ohos="http://schemas.huawei.com/res/ohos"
        ohos:height="match_parent"
        ohos:width="match_parent"
        ohos:orientation="vertical">
        <Text
            ohos:id="$+id:phone_number_text"
            ohos:height="match_content"
            ohos:weight="1"
            ohos:text_size="30vp"
            ohos:layout_alignment="horizontal_center"
            ohos:width="match_content"/>
        <!--第1排按钮 -->
        <DirectionalLayout
            ohos:height="match_content"
            ohos:width="match_parent"
            ohos:weight="1"
            ohos:margin="10vp"
            ohos:orientation="horizontal">
    
            <Button
                ohos:id="$+id:button_1"
                ohos:height="100vp"
                ohos:width="100vp"
                ohos:text="1"
                ohos:text_size="30vp"
                ohos:left_margin="10vp"
                ohos:background_element="$graphic:background_ability_main"/>
    
            <Button
                ohos:id="$+id:button_2"
                ohos:height="100vp"
                ohos:width="100vp"
                ohos:text="2"
                ohos:text_size="30vp"
                ohos:left_margin="10vp"
                ohos:background_element="$graphic:background_ability_main"/>
    
            <Button
                ohos:id="$+id:button_3"
                ohos:height="100vp"
                ohos:width="100vp"
                ohos:text="3"
                ohos:text_size="30vp"
                ohos:left_margin="10vp"
                ohos:background_element="$graphic:background_ability_main"/>
        </DirectionalLayout>
        <!--第2排按钮 -->
        <DirectionalLayout
            ohos:height="match_content"
            ohos:width="match_parent"
            ohos:weight="1"
            ohos:margin="10vp"
            ohos:orientation="horizontal">
    
            <Button
                ohos:id="$+id:button_4"
                ohos:height="100vp"
                ohos:width="100vp"
                ohos:text="4"
                ohos:text_size="30vp"
                ohos:left_margin="10vp"
                ohos:background_element="$graphic:background_ability_main"/>
    
            <Button
                ohos:id="$+id:button_5"
                ohos:height="100vp"
                ohos:width="100vp"
                ohos:text="5"
                ohos:text_size="30vp"
                ohos:left_margin="10vp"
                ohos:background_element="$graphic:background_ability_main"/>
    
            <Button
                ohos:id="$+id:button_6"
                ohos:height="100vp"
                ohos:width="100vp"
                ohos:text="6"
                ohos:text_size="30vp"
                ohos:left_margin="10vp"
                ohos:background_element="$graphic:background_ability_main"/>
        </DirectionalLayout>
        <!--第3排按钮 -->
        <DirectionalLayout
            ohos:height="match_content"
            ohos:width="match_parent"
            ohos:weight="1"
            ohos:margin="10vp"
            ohos:orientation="horizontal">
            
            <Button
                ohos:id="$+id:button_7"
                ohos:height="100vp"
                ohos:width="100vp"
                ohos:text="7"
                ohos:text_size="30vp"
                ohos:left_margin="10vp"
                ohos:background_element="$graphic:background_ability_main"/>
    
            <Button
                ohos:id="$+id:button_8"
                ohos:height="100vp"
                ohos:width="100vp"
                ohos:text="8"
                ohos:text_size="30vp"
                ohos:left_margin="10vp"
                ohos:background_element="$graphic:background_ability_main"/>
    
            <Button
                ohos:id="$+id:button_9"
                ohos:height="100vp"
                ohos:width="100vp"
                ohos:text="9"
                ohos:text_size="30vp"
                ohos:left_margin="10vp"
                ohos:background_element="$graphic:background_ability_main"/>
        </DirectionalLayout>
        <!--第4排按钮 -->
        <DirectionalLayout
            ohos:height="match_content"
            ohos:width="match_parent"
            ohos:weight="1"
            ohos:margin="10vp"
            ohos:orientation="horizontal">
    
            <Button
                ohos:id="$+id:button_10"
                ohos:height="100vp"
                ohos:width="100vp"
                ohos:text="*"
                ohos:text_size="30vp"
                ohos:left_margin="10vp"
                ohos:background_element="$graphic:background_ability_main"/>
    
            <Button
                ohos:id="$+id:button_0"
                ohos:height="100vp"
                ohos:width="100vp"
                ohos:text="0"
                ohos:text_size="30vp"
                ohos:left_margin="10vp"
                ohos:background_element="$graphic:background_ability_main"/>
    
            <Button
                ohos:id="$+id:button_11"
                ohos:height="100vp"
                ohos:width="100vp"
                ohos:text="#"
                ohos:text_size="30vp"
                ohos:left_margin="10vp"
                ohos:background_element="$graphic:background_ability_main"/>
        </DirectionalLayout>
    </DirectionalLayout>
    

    graphic:background_ability_main资源文件代码:

    <shape
        xmlns:ohos="http://schemas.huawei.com/res/ohos"
        ohos:shape="oval">
        <stroke
            ohos:width="2"
            ohos:color="#FF0000"/>
    </shape>
    
    展开全文
  • 文章目录前言一、MaterialButton二、使用步骤1.引入库2.相关公开属性3.设置相关主题4.注意5.示例整体xml代码 前言 Android官方为开发者提供了许多丰富的UI控件,Material 组件就是包含了这些控件的一套工具,多数...

    Material组件详解 - - 笔记


    前言

    Android官方为开发者提供了许多丰富的UI控件,Material 组件就是包含了这些控件的一套工具,多数时候使用它可以满足我们日常开发UI的需求,提高效率。目前Android Material 组件已经更新了1.2.0稳定版,赶紧来了解一波。


    一、MaterialButton

    我们平时写布局,当遇到按钮需要圆角、或者描边等,通常的方法是新建一个xml文件,在shape标签下写,然后通过android:background或setBackground(drawable)设置。

    这本来没什么问题,但是UI设计师会喜欢看起来和别人不一样的效果,也许是为了审(zhuang)美(bi),例如这个页面用4dp的圆角,那个页面用10dp的圆角,要有描边,颜色还不太一样……如果我们每个界面都新建个xml写shape,那么后期项目大了,维护起来就像无底洞……

    Google官方在SDK28的时候也推出了一个新控件 —— MaterialButton,能在xml直接配置圆角、描边属性,满足平时开发的基本UI需求。

    效果图如下:
    效果图


    二、使用步骤

    1.引入库

    导入依赖,就可以开始了(稳定版1.2.0,目前已更新到:1.3.0-alpha03):

    implementation 'com.google.android.material:material:1.2.0'
    

    2.相关公开属性

    MaterialButton继承AppCompatButton,在原来Button的基础上做了一些扩展,如圆角、描边、前置和后置icon(icon支持设置Size、Tint、Padding、Gravity等),还支持按压水波纹并且设置color,基本能满足日常的需求。

    公开属性如下:

    属性

    3.设置相关主题

    示例代码如下(设置相关主题:在styles.xml添加一下设置):

    <!-- MaterialButton 设置相关的主题   -->
        <style name="MaterialButtonTheme" parent="Theme.MaterialComponents.Light.NoActionBar">
            <!-- Customize your theme here. -->
            <item name="colorPrimary">@color/colorPrimary</item>
            <item name="colorPrimaryDark">@color/colorPrimaryDark</item>
            <item name="colorAccent">@color/colorAccent</item>
        </style>
    
        <!-- 单独的MaterialButton样式-->
        <style name="Button" parent="Widget.MaterialComponents.Button">
            <item name="android:textColor">@color/white</item>
            <item name="android:textSize">@dimen/text_size_14_sp</item>
            <item name="android:textAllCaps">false</item>
            <item name="android:insetTop">0dp</item>
            <item name="android:insetBottom">0dp</item>
            <item name="android:gravity">center</item>
            <item name="backgroundTintMode">src_atop</item>
            <item name="backgroundTint">@color/colorPrimary</item>
            <item name="elevation">@dimen/dimen_10_dp</item>
            <item name="rippleColor">@color/white</item>
            <item name="iconTintMode">src_atop</item>
            <item name="iconTint">@color/white</item>
            <item name="iconGravity">textStart</item>
            <item name="iconPadding">0dp</item>
            <item name="iconSize">@dimen/dimen_20_dp</item>
        </style>
    
        <!-- 单独的MaterialButton样式 - - -> 主题色 -->
        <style name="Button.ColorPrimary">
            <item name="backgroundTint">@color/colorPrimary</item>
        </style>
    

    4.注意

    以下资料来自:海王星0908

    • 关于background

    在1.2版本以前,MaterialButton只能通过app:backgroundTint属性设置背景色,该属性接收color state list。不能通过android:background设置自定义drawable。

    1.2版本后,官方已修复此问题。如果未设置自定义背景,则 MaterialShapeDrawable 仍将用作默认背景。

    也就是说,如果按钮背景是纯色,可以通过app:backgroundTint指定;如果按钮背景是渐变色,则需要自己定义drawable,然后通过android:background设置。

    注意:如果要使用android:background设置背景,则需要将backgroundTint设置为@empty,否则background不会生效。

    代码如下:

    <com.google.android.material.button.MaterialButton
        android:background=”@drawable/custom_background”
        app:backgroundTint=”@empty” />
    

    指定@empty后,Android Studio会出现红色警告,可以正常运行,忽略就好。不过既然已经自定义drawable,就没必要使用MaterialButton,直接用普通的Button甚至用TextView就好了。


    • 关于insetTop、insetBottom

    看下面的代码:

    <com.google.android.material.button.MaterialButton
        android:id="@+id/btn1"
        android:layout_width="150dp"
        android:layout_height="50dp"
        android:textColor="@android:color/white"
        android:textSize="18sp"
    />
    

    xml预览图:
    pic1
    有没有感觉怪怪的?貌似button上下多了一个padding!咦!代码里面明明没有设置padding啊!

    看了源码发现,MaterialButton默认在style指定了insetTop和insetBottom为6dp,使得height看起来并没有Button实际设置值一样高,可以在xml将MaterialButton的insetTop和insetBottom都设置为0dp,这样MaterialButton的高度就和实际设置的高度一致了。


    • 关于阴影

    MD组件默认都是自带阴影的,MaterialButton也不例外。但是有时候我们并不想要按钮有阴影,那么这时候可以指定style为
    style="@style/Widget.MaterialComponents.Button.UnelevatedButton",这样就能去掉阴影,让视图看起来扁平化。


    • 关于theme

    在MDC1.1.0以后,使用MaterialButton可能会出现闪退的问题,原因就是使用了MD控件,但是未将them设置为MaterialComponents。解决方法可以有几种:

    先在style.xml自定义MaterialComponents_Theme

     <style name="MaterialComponents_Theme" parent="Theme.MaterialComponents.Light.NoActionBar">
            <!-- Customize your theme here. -->
            ...
     </style>
    

    方法一:

    AndroidManifest里application节点下配置,作用域为整个应用

    <application
            ...
            android:theme="@style/MaterialComponents_Theme"
    

    方法二:

    只在当前activity配置,作用域为当前activity

    <activity
            ...
            android:theme="@style/MaterialComponents_Theme"
    

    方法三:

    为每个在使用MD控件的地方配置,作用域只针对当前控件

    <com.google.android.material.button.MaterialButton
        ...
        android:theme="@style/Theme.MaterialComponents.Light.NoActionBar" />
    

    5.示例

    示例中 style="@style/Button.ColorPrimary" 为自定义style

    1.MaterialButton 普通圆角 (10dp 圆角)
    10dp 圆角

    	<!--普通圆角 MaterialButton-->
        <com.google.android.material.button.MaterialButton
            android:id="@+id/materialButton1"
            style="@style/Button.ColorPrimary"
            android:layout_width="wrap_content"
            android:layout_height="@dimen/dimen_30_dp"
            android:text="10dp 圆角"
            app:cornerRadius="@dimen/dimen_10_dp" />
    

    2.MateralButton 普通圆角(20dp 圆角)
    20dp 圆角

    <!--普通圆角 MaterialButton -->
        <com.google.android.material.button.MaterialButton
            android:id="@+id/materialButton2"
            style="@style/Button.ColorPrimary"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="20dp 圆角"
            app:cornerRadius="@dimen/dimen_20_dp"/>
    

    3.MateralButton 文字的圆形按钮
    文字的圆形按钮

    <!-- 实现只有文字的圆形按钮 -->
        <com.google.android.material.button.MaterialButton
            android:id="@+id/materialCircle"
            style="@style/Button.ColorPrimary"
            android:layout_width="@dimen/dimen_80_dp"
            android:layout_height="@dimen/dimen_80_dp"
            android:text="Material Circle"
            app:cornerRadius="@dimen/dimen_40_dp" />
    

    文字的圆形按钮+描边

    <!-- 实现只有文字的圆形按钮+描边 -->
    <com.google.android.material.button.MaterialButton
            android:id="@+id/materialCircleStroke"
            style="@style/Button"
            android:layout_width="@dimen/dimen_80_dp"
            android:layout_height="@dimen/dimen_80_dp"
            android:backgroundTint="@color/white"
            android:text="Material Circle"
            android:textColor="@color/colorPrimary"
            app:cornerRadius="@dimen/dimen_40_dp"
            app:strokeColor="@color/colorPrimary"
            app:strokeWidth="@dimen/dimen_3_dp" />
    

    4.MaterialButton 只有icon样式的按钮
    icon样式的按钮

    <!-- 实现只有ICON样式的按钮 -->
        <com.google.android.material.button.MaterialButton
            android:id="@+id/materialCircleIcon"
            style="@style/Button.ColorPrimary"
            android:layout_width="@dimen/dimen_60_dp"
            android:layout_height="@dimen/dimen_60_dp"
            app:cornerRadius="@dimen/dimen_30_dp"
            app:icon="@drawable/ic_setting" />
    

    5.MaterialButton icon+描边+圆角
    icon+描边+圆角

    <!--实现 描边+圆角+icon 样式-->
        <com.google.android.material.button.MaterialButton
            android:id="@+id/materialButtonWhite"
            style="@style/Button.ColorPrimary"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:backgroundTint="@color/white"
            android:text="Material Button"
            android:textColor="@color/colorPrimary"
            app:cornerRadius="@dimen/dimen_20_dp"
            app:icon="@drawable/ic_setting"
            app:iconPadding="@dimen/dimen_10_dp"
            app:iconTint="@color/colorPrimary"
            app:strokeColor="@color/colorPrimary"
            app:strokeWidth="@dimen/dimen_3_dp" />
    

    6.描边+圆角 样式
    描边+圆角 样式

    <!--实现 描边+圆角 样式-->
        <com.google.android.material.button.MaterialButton
            android:id="@+id/materialButton3"
            style="@style/Button.ColorPrimary"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="20dp 圆角,3dp描边"
            app:cornerRadius="@dimen/dimen_20_dp"
            app:strokeColor="@color/red"
            app:strokeWidth="@dimen/dimen_3_dp" />
    

    7.圆角前置图标
    圆角前置图标

    <!--实现圆角前置图标-->
        <com.google.android.material.button.MaterialButton
            android:id="@+id/materialButton4"
            style="@style/Button.ColorPrimary"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="图标"
            app:cornerRadius="@dimen/dimen_10_dp"
            app:icon="@drawable/ic_setting"
            app:iconPadding="@dimen/dimen_20_dp" />
    

    8.圆角后置着色图标
    圆角后置着色图标

    <!--实现圆角后置着色图标-->
        <com.google.android.material.button.MaterialButton
            android:id="@+id/materialButton5"
            style="@style/Button.ColorPrimary"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="后置着色"
            app:cornerRadius="@dimen/dimen_10_dp"
            app:icon="@drawable/ic_setting"
            app:iconGravity="end"
            app:iconPadding="@dimen/dimen_20_dp"
            app:iconTint="@color/mediumvioletred"
            app:iconTintMode="src_in" />
    

    9.MaterialButtonToggleGroup(组合的MaterialButton)

    公开属性:

    属性描述参数
    app:checkedButton默认选中按钮ID
    app:singleSelection是否单项选择true/false
    app:selectionRequired设置为true后,强制至少选中一个true/false

    MaterialButtonToggleGroup

    <com.google.android.material.button.MaterialButtonToggleGroup
            android:id="@+id/toggleGroup"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginTop="@dimen/dimen_20_dp"
            app:checkedButton="@id/btn1"
            app:layout_constraintLeft_toLeftOf="parent"
            app:layout_constraintRight_toRightOf="parent"
            app:layout_constraintTop_toBottomOf="@+id/materialButton5"
            app:singleSelection="true">
    
            <com.google.android.material.button.MaterialButton
                android:id="@+id/btn1"
                style="@style/Widget.MaterialComponents.Button.OutlinedButton"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="选项一"
                android:textSize="@dimen/text_size_16_sp" />
    
            <com.google.android.material.button.MaterialButton
                android:id="@+id/btn2"
                style="@style/Widget.MaterialComponents.Button.OutlinedButton"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="选项二"
                android:textSize="@dimen/text_size_16_sp" />
    
            <com.google.android.material.button.MaterialButton
                android:id="@+id/btn3"
                style="@style/Widget.MaterialComponents.Button.OutlinedButton"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="选项三"
                android:textSize="@dimen/text_size_16_sp" />
    
            <com.google.android.material.button.MaterialButton
                android:id="@+id/btn4"
                style="@style/Widget.MaterialComponents.Button.OutlinedButton"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="选项四"
                android:textSize="@dimen/text_size_16_sp" />
    
        </com.google.android.material.button.MaterialButtonToggleGroup>
    

    整体xml代码

    <?xml version="1.0" encoding="utf-8"?>
    <androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
        xmlns:app="http://schemas.android.com/apk/res-auto"
        android:layout_width="match_parent"
        android:layout_height="match_parent">
    
        <com.supernova.module.widget.BackTitleBar
            android:id="@+id/backTitleBar"
            android:layout_width="@dimen/dimen_0_dp"
            android:layout_height="wrap_content"
            app:layout_constraintLeft_toLeftOf="parent"
            app:layout_constraintRight_toRightOf="parent"
            app:layout_constraintTop_toTopOf="parent"
            app:showBackIcon="true"
            app:titleText="MaterialButton" />
    
        <!--普通圆角 MaterialButton-->
        <com.google.android.material.button.MaterialButton
            android:id="@+id/materialButton1"
            style="@style/Button.ColorPrimary"
            android:layout_width="wrap_content"
            android:layout_height="@dimen/dimen_30_dp"
            android:layout_marginTop="@dimen/dimen_16_dp"
            android:text="10dp 圆角"
            app:cornerRadius="@dimen/dimen_10_dp"
            app:layout_constraintLeft_toLeftOf="parent"
            app:layout_constraintRight_toLeftOf="@+id/materialCircle"
            app:layout_constraintTop_toBottomOf="@+id/backTitleBar" />
    
        <!-- 实现只有文字的圆形按钮 -->
        <com.google.android.material.button.MaterialButton
            android:id="@+id/materialCircle"
            style="@style/Button.ColorPrimary"
            android:layout_width="@dimen/dimen_80_dp"
            android:layout_height="@dimen/dimen_80_dp"
            android:layout_marginTop="@dimen/dimen_16_dp"
            android:text="Material Circle"
            app:cornerRadius="@dimen/dimen_40_dp"
            app:layout_constraintLeft_toRightOf="@+id/materialButton1"
            app:layout_constraintRight_toRightOf="parent"
            app:layout_constraintTop_toBottomOf="@+id/backTitleBar" />
    
        <!-- 实现只有ICON样式的按钮 -->
        <com.google.android.material.button.MaterialButton
            android:id="@+id/materialCircleIcon"
            style="@style/Button.ColorPrimary"
            android:layout_width="@dimen/dimen_60_dp"
            android:layout_height="@dimen/dimen_60_dp"
            android:layout_marginTop="16dp"
            app:cornerRadius="@dimen/dimen_30_dp"
            app:icon="@drawable/ic_setting"
            app:layout_constraintLeft_toRightOf="@+id/materialButton1"
            app:layout_constraintRight_toRightOf="parent"
            app:layout_constraintTop_toBottomOf="@+id/materialCircle" />
    
        <!--普通圆角 MaterialButton-->
        <com.google.android.material.button.MaterialButton
            android:id="@+id/materialButton2"
            style="@style/Button.ColorPrimary"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginTop="@dimen/dimen_16_dp"
            android:text="20dp 圆角"
            app:cornerRadius="@dimen/dimen_20_dp"
            app:layout_constraintLeft_toLeftOf="parent"
            app:layout_constraintRight_toLeftOf="@+id/materialCircleIcon"
            app:layout_constraintTop_toBottomOf="@+id/materialCircle" />
    
        <!--实现 描边+圆角+icon 样式-->
        <com.google.android.material.button.MaterialButton
            android:id="@+id/materialButtonWhite"
            style="@style/Button.ColorPrimary"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginTop="@dimen/dimen_20_dp"
            android:backgroundTint="@color/white"
            android:text="Material Button"
            android:textColor="@color/colorPrimary"
            app:cornerRadius="@dimen/dimen_20_dp"
            app:icon="@drawable/ic_setting"
            app:iconPadding="@dimen/dimen_10_dp"
            app:iconTint="@color/colorPrimary"
            app:layout_constraintLeft_toLeftOf="parent"
            app:layout_constraintRight_toLeftOf="@+id/materialCircleStroke"
            app:layout_constraintTop_toBottomOf="@+id/materialCircleIcon"
            app:strokeColor="@color/colorPrimary"
            app:strokeWidth="@dimen/dimen_3_dp" />
    
        <!-- 实现只有文字的圆形+ 描边 按钮 -->
        <com.google.android.material.button.MaterialButton
            android:id="@+id/materialCircleStroke"
            style="@style/Button"
            android:layout_width="@dimen/dimen_80_dp"
            android:layout_height="@dimen/dimen_80_dp"
            android:layout_marginTop="@dimen/dimen_16_dp"
            android:backgroundTint="@color/white"
            android:text="Material Circle"
            android:textColor="@color/colorPrimary"
            app:cornerRadius="@dimen/dimen_40_dp"
            app:layout_constraintLeft_toRightOf="@+id/materialButtonWhite"
            app:layout_constraintRight_toRightOf="parent"
            app:layout_constraintTop_toBottomOf="@+id/materialCircleIcon"
            app:strokeColor="@color/colorPrimary"
            app:strokeWidth="@dimen/dimen_3_dp" />
    
        <!--实现 描边+圆角 样式-->
        <com.google.android.material.button.MaterialButton
            android:id="@+id/materialButton3"
            style="@style/Button.ColorPrimary"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginTop="@dimen/dimen_10_dp"
            android:text="20dp 圆角,3dp描边"
            app:cornerRadius="@dimen/dimen_20_dp"
            app:layout_constraintLeft_toLeftOf="parent"
            app:layout_constraintRight_toRightOf="parent"
            app:layout_constraintTop_toBottomOf="@+id/materialCircleStroke"
            app:strokeColor="@color/red"
            app:strokeWidth="@dimen/dimen_3_dp" />
    
        <!--实现圆角前置图标-->
        <com.google.android.material.button.MaterialButton
            android:id="@+id/materialButton4"
            style="@style/Button.ColorPrimary"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginTop="@dimen/dimen_10_dp"
            android:text="图标"
            app:cornerRadius="@dimen/dimen_10_dp"
            app:icon="@drawable/ic_setting"
            app:iconPadding="@dimen/dimen_20_dp"
            app:layout_constraintLeft_toLeftOf="parent"
            app:layout_constraintRight_toRightOf="parent"
            app:layout_constraintTop_toBottomOf="@+id/materialButton3" />
    
        <!--实现圆角后置着色图标-->
        <com.google.android.material.button.MaterialButton
            android:id="@+id/materialButton5"
            style="@style/Button.ColorPrimary"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginTop="@dimen/dimen_10_dp"
            android:text="后置着色"
            app:cornerRadius="@dimen/dimen_10_dp"
            app:icon="@drawable/ic_setting"
            app:iconGravity="end"
            app:iconPadding="@dimen/dimen_20_dp"
            app:iconTint="@color/mediumvioletred"
            app:iconTintMode="src_in"
            app:layout_constraintLeft_toLeftOf="parent"
            app:layout_constraintRight_toRightOf="parent"
            app:layout_constraintTop_toBottomOf="@+id/materialButton4" />
    
        <!--实现组合的MaterialButton-->
        <com.google.android.material.button.MaterialButtonToggleGroup
            android:id="@+id/toggleGroup"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginTop="@dimen/dimen_20_dp"
            app:checkedButton="@id/btn1"
            app:layout_constraintLeft_toLeftOf="parent"
            app:layout_constraintRight_toRightOf="parent"
            app:layout_constraintTop_toBottomOf="@+id/materialButton5"
            app:singleSelection="true">
    
            <com.google.android.material.button.MaterialButton
                android:id="@+id/btn1"
                style="@style/Widget.MaterialComponents.Button.OutlinedButton"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="选项一"
                android:textSize="@dimen/text_size_16_sp" />
    
            <com.google.android.material.button.MaterialButton
                android:id="@+id/btn2"
                style="@style/Widget.MaterialComponents.Button.OutlinedButton"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="选项二"
                android:textSize="@dimen/text_size_16_sp" />
    
            <com.google.android.material.button.MaterialButton
                android:id="@+id/btn3"
                style="@style/Widget.MaterialComponents.Button.OutlinedButton"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="选项三"
                android:textSize="@dimen/text_size_16_sp" />
    
            <com.google.android.material.button.MaterialButton
                android:id="@+id/btn4"
                style="@style/Widget.MaterialComponents.Button.OutlinedButton"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="选项四"
                android:textSize="@dimen/text_size_16_sp" />
    
        </com.google.android.material.button.MaterialButtonToggleGroup>
    
    </androidx.constraintlayout.widget.ConstraintLayout>
    
    展开全文
  • 点击Button弹出下拉菜单

    热门讨论 2013-09-10 11:12:42
    点击一个按钮,弹出一个可选择的下拉菜单,效果不错,很实用
  • button标签以及post和get方法

    千次阅读 2019-06-08 22:16:59
    button>标签以及post和get方法 开发工具与关键技术:VS/HTML 作者:吴泽锋 撰写时间:2019年5月28日 2、<button></button>标签:定义一个按钮; 重要:如果在 HTML 表单中使用 button 元素,不同...
    文献种类:专题技术文献;
    
                    <button>标签以及post和get方法
    
    开发工具与关键技术:VS/HTML
    作者:吴泽锋
    撰写时间:2019年5月28日
    
    2、<button></button>标签:定义一个按钮;
        重要:如果在 HTML 表单中使用 button 元素,不同的浏览器会提交不同的值。
           	IE 将提交 <button>与 <button /> 之间的文本,而其他浏览器将提交 value 属性的内容;
    	    即IE 的默认类型是 "button",而其他浏览器中(包括 W3C 规范)的默认值是 "submit"。
        请始终为按钮规定 type 属性。
        <button> 控件 与 <input type="button"> 相比,提供了更为强大的功能和更丰富的内容。
        <button> 与 </button> 标签之间的所有内容都是按钮的内容,其中包括任何可接受的正文内容,
        比如文本或多媒体内容。这是该元素与使用 input 元素创建的按钮之间的不同之处。
           例如,我们可以在按钮中包括一个图像和相关的文本,用它们在按钮中创建一个吸引人的标记图像。
        唯一禁止使用的元素:图像映射,因为它对鼠标和键盘敏感的动作会干扰表单按钮的行为。
        如果在 HTML 表单中使用 button 元素,不同的浏览器会提交不同的按钮值。
    	请使用 input 元素在 HTML 表单中创建按钮。
    	
    	属性                值                         描述
    	autofocus          autofocus                 规定当页面加载时按钮应当自动地获得焦点。
    	
    	disabled            disabled                 规定应该禁用该按钮。
    	被禁用的按钮即不可用,也不可点击;
    	可以设置 disabled 属性,直到满足某些条件(比如选择一个复选框),才恢复用户对该按钮的使用。
    	然后,可以使用 JavaScript 来清除 disabled 属性,以使文本区变为可用状态。
    	例:一个被禁止的按钮:
    	    <button type ="button" disabled ="disabled">Prohibit Click!</button>
    
    	form              form_name                 规定按钮属于一个或多个表单。
    	form 属性的值必须是按钮所属表单的 id。
    	如需引用一个以上的表单,请使用空格分隔的列表。
    	  例:位于表单之外的提交按钮:
    	  		<form action ="/" method ="post" id ="nameform">
    	        		姓:<input type ="text" name ="lname" /><br />
    	        		名:<input type ="text" name ="fname" /><br />
    	    		</form>
    	  		<p>下面的按钮位于 form 元素之外,但仍是表单的一部分。</p>
    	  		<button type ="submit" form ="nameform" value ="Submit">提交</button>
    
    	formaction           url         覆盖 form 元素的 action 属性。该属性与 type="submit" 配合使用。
    	      语法:<form formaction ="URL2">
    	例:带有两个提交按钮的表单(带有不同的 action):
    	<form action =" URL 1" method="get">
    	         First name: <input type ="text" name ="fname" /><br />
    	         Last name: <input type ="text" name ="lname" /><br />
    	         <button type ="submit">提交</button><br />
    	        <button type ="submit" formaction =" URL 2">以…身份提交</button>
    	    </form>
    	action属性:必需: action 属性规定当提交表单时,向何处发送表单数据。
    	语法:<form action="URL1">
    
    	formenctype         属性值      覆盖 form 元素的 enctype 属性。该属性与 type ="submit" 配合使用。
    	      语法:<button formenctype ="value">
    	enctype 属性:规定在发送到服务器之前应该如何对表单数据进行编码。
    	      语法:<form enctype="value">
    	      默认地,表单数据会编码为 "application/x-www-form-urlencoded"。就是说,
    	在发送到服务器之前,所有字符都会进行编码(空格转换为 "+" 加号,特殊符号转换为 ASCII HEX 值)。
    	      属性值:值                                      描述
    	   application/x-www-form-urlencoded    在发送前对所有字符进行编码(默认)。
    	      multipart/form-data                不对字符编码。当使用有文件上传控件的表单时,该值是必需的;
    	      text/plain                         将空格转换为 "+" 符号,但不编码特殊字符。
    
    	formmethod         get / post     覆盖 form 元素的 method 属性。该属性与 type="submit" 配合使用。
    	      语法:<button formmethod="get|post">
    	      属性值: 值             描述
    	      get            向 URL 追加表单数据(form-data):URL?name=value&name=value
    	      post           以  HTTP post 事务的形式发送表单数据(form-data)
    	method 属性:规定如何发送表单数据(表单数据发送到 action 属性所规定的页面)。
    	语法:<form method =" get|post ">
    	可以通过以下方式发送 form-data :
    		以 URL 变量 (使用 method="get") 的形式来发送 ;
    		以 HTTP post (使用 method="post")的形式来发送 ;
    	例:表单数据将通过 method 属性附加到 URL 上;
    		<form action="URL" method="get">
    		
    	一般浏览器通过上述任何一种方法都可以传输表单信息,而有些服务器只接受其中一种方法提供的数据。
    	可以在 <form> 标签的 method(方法)属性中指明表单处理服务器要用方法来处理数据,使 post 还是 get。
    	
    	post 还是 get?
    		1、如果希望获得最佳表单传输性能,可以采用 get方法发送只有少数简短字段的小表单。
    		2、一些服务器操作系统在处理可以立即传递给应用程序的命令行参数时,会限制其数目和长度,
    			在这种情况下,对那些有许多字段或是很长的文本域的表单来说,就应该采用 post方法来发送。 
    		3、如果你在编写服务器端的表单处理应用程序方面经验不足,应该选择 get方法。如果采用 post方法,就要在读取和解码方法做些额外的工作,也许这并不很难,但是也许你不太愿意去处理这些问题。 
    		4、如果安全性是个问题,那么我们建议选用 post方法。get方法将表单参数直接放在应用程序的 URL中,
    			这样网络窥探者可以很轻松地捕获它们,还可以从服务器的日志文件中进行摘录。
    			如果参数中包含了信用卡帐号这样的敏感信息,就会在不知不觉中危及用户的安全。而 post应用程序就没有安全方面的漏洞,在将参数作为单独的事务传输给服务器进行处理时,至少还可以采用加密的方法。 
    		5、如果想在表单之外调用服务器端的应用程序,而且包括向其传递参数的过程,就要采用 get方法,因为该方法允许把表单这样的参数包括进来作为 URL的一部分。而另一方面,使用 post样式的应用程序却希望在 URL后还能有一个来自浏览器额外的传输过程,其中传输的内容不能作为传统 <a> 标签的内容。 
    		
    		明确传递参数:
    			前面的一些建议也可以作为选择此种方式的一定解释。
    			假设你有一个很简单的表单,其中只包含 x 和 y 这两个参数。
    			在对这些元素的值进行编码时,它们的形式如下所示:
    				x=99&y=66
    		如果表单采用了 method =get,那么用来引用服务器端应用程序的 URL 将如下所示:
    				http://www.baidu.com/example/program?x=28&y=66
    		在任何时候我们都可以创建一个传统的 <a> 标签,用它在调用带有所需参数值的表单,其形式如下所示:
    			<a href ="http://www. baidu.com/example/program?x=28&y=66"></a>
    
    	formnovalidate formnovalidate 覆盖 form 元素的 novalidate 属性。该属性与 type="submit" 配合使用。
    	    语法:<button formnovalidate ="formnovalidate">若使用该属性,则提交表单时按钮不会执行验证过程。
    	    例:带有两个提交按钮的表单(进行验证或不进行验证):
    	    <form action="URL" method="get">
    	        E-mail: <input type="email" name ="userid" /><br /> <button type="submit">提交</button>
    	        <button type="submit" formnovalidate ="formnovalidate">进行没有验证的提交</button>
    	</form>
    
    	novalidate 属性:规定当提交表单时不对其进行验证。如果使用该属性,则表单不会验证表单的输入。
    	语法:<form novalidate ="novalidate">
    	注释:novalidate 属性适用于:<form>,以及以下类型的 <input> 标签:text、 search、 url、
    		 telephone, email、 password、 date pickers、 range 以及 color。
    	例:不对输入进行验证的表单:
    	<form action="URL" novalidate ="novalidate">
    	            E-mail: <input type ="email" name="email" /> <input type ="submit" />
    	    </form>
    
    	formtarget      _blank、_self、_parent、   覆盖 form 元素的 target 属性。
    					_top、framename、        注释:该属性与 type="submit" 配合使用。
    	语法:<button formtarget ="value">target 属性:规定在何处打开 action URL。
    	兼容性注释:
    		在 HTML 4.01 中,不赞成使用 form 元素的 target 属性;
    		在 XHTML 1.0 Strict DTD 中,不支持该属性。
    	语法:<form target ="value">
    	属性值target / formtarget
    	值            描述
    	_blank       在新窗口中打开。/在新窗口/选项卡中将表单提交到文档。
    	_self         默认。在相同的框架中打开。/在同一框架中将表单提交到文档。(默认)
    	_parent      在父框架集中打开。/在父框架中将表单提交到文档。
    	_top         在整个窗口中打开。/在整个窗口中将表单提交到文档。
    	framename   在指定的框架中打开。/在指定的框架中将表单提交到文档。
    
    	name             button_name            规定按钮的名称。
    	语法; <button name="value">
    		name 属性用于在 JavaScript 中对元素进行引用,或者在表单提交之后,对表单数据进行引用。
    	提示:不同的 button 元素可以共享相同的名称。这就允许您标记带有相同名称的若干按钮,
    			以便在表单中使用时能够提交不同的值。
    	例:两个按钮带有相同的名称,在单击它们时提交不同的值:
    	<form action="URL" method="get">请选择你喜欢的方法:
    	        <button name="subject" type="submit" value="CSS">CSS</button>
    	        <button name="subject" type="submit" value="JS">JS</button></form>
    
    	type           button、reset、submit、    规定按钮的类型。
    	语法:<button type="value">
    	提示:请始终为按钮规定 type 属性。Internet Explorer 的默认类型是 "button",
        		而其他浏览器中(包括 W3C 规范)的默认值是 "submit"。
    	属性值:值              描述
    	submit              该按钮是提交按钮(除了 IE,该值是其他浏览器的默认值)。
    	button              该按钮是可点击的按钮(IE 的默认值)。
    	reset               该按钮是重置按钮(清除表单数据)。
    	value           text                     规定按钮的初始值。可由脚本进行修改。
    	  语法:<button value="value"> 规定要发送的值。
    	借鉴于W3CSchool文档;
    
    展开全文
  • vue 所有按钮、vue Button 所有属性、vue a-button 所有属性、vue 按钮所有属性...import { Button } from ‘ant-design-vue’; Vue.use(Button); 1.按钮类型 Primary Default Dashed Danger Link ...

    vue 所有按钮属性、vue Button 所有按钮属性事件、vue a-button 所有按钮属性事件、vue 按钮所有属性事件、vue

    1.组件注册

    import { Button } from ‘ant-design-vue’;
    Vue.use(Button);

    1.按钮类型

    在这里插入图片描述
    按钮有四种类型:主按钮、次按钮、虚线按钮、危险按钮和链接按钮。主按钮在同一个操作区域最多出现一次。

    <template>
      <div>
        <a-button type="primary">Primary</a-button>
        <a-button>Default</a-button>
        <a-button type="dashed">Dashed</a-button>
        <a-button type="danger">Danger</a-button>
        <a-button type="link">Link</a-button>
      </div>
    </template>
    

    2.按钮组合

    在这里插入图片描述
    可以将多个 Button 放入 Button.Group 的容器中。
    通过设置 sizelarge small 分别把按钮组合设为大、小尺寸。若不设置 size,则尺寸为中。

    <template>
      <div id="components-button-demo-button-group">
        <h4>Basic</h4>
        <a-button-group>
          <a-button>Cancel</a-button>
          <a-button type="primary">OK</a-button>
        </a-button-group>
        <a-button-group>
          <a-button disabled>L</a-button>
          <a-button disabled>M</a-button>
          <a-button disabled>R</a-button>
        </a-button-group>
        <a-button-group>
          <a-button type="primary">L</a-button>
          <a-button>M</a-button>
          <a-button>M</a-button>
          <a-button type="dashed">R</a-button>
        </a-button-group>
    
        <h4>With Icon</h4>
        <a-button-group>
          <a-button type="primary">
            <a-icon type="left" />Go back
          </a-button>
          <a-button type="primary">
            Go forward<a-icon type="right" />
          </a-button>
        </a-button-group>
        <a-button-group>
          <a-button type="primary" icon="cloud" />
          <a-button type="primary" icon="cloud-download" />
        </a-button-group>
      </div>
    </template>
    <style>
    #components-button-demo-button-group h4 {
      margin: 16px 0;
      font-size: 14px;
      line-height: 1;
      font-weight: normal;
    }
    #components-button-demo-button-group h4:first-child {
      margin-top: 0;
    }
    #components-button-demo-button-group .ant-btn-group {
      margin-right: 8px;
    }
    </style>
    

    3.不可用状态

    在这里插入图片描述
    添加 disabled 属性即可让按钮处于不可用状态,同时按钮样式也会改变

    <template>
      <div>
        <a-button type="primary">Primary</a-button>
        <a-button type="primary" disabled>Primary(disabled)</a-button>
        <br />
        <a-button>Default</a-button>
        <a-button disabled>Default(disabled)</a-button>
        <br />
        <a-button type="dashed">Dashed</a-button>
        <a-button type="dashed" disabled>Dashed(disabled)</a-button>
        <br />
        <a-button type="link">Link</a-button>
        <a-button type="link" disabled>Link(disabled)</a-button>
        <div :style="{ padding: '8px 8px 0 8px', background: 'rgb(190, 200, 200)' }">
          <a-button ghost>Ghost</a-button>
          <a-button ghost disabled>Ghost(disabled)</a-button>
        </div>
      </div>
    </template>
    

    4.幽灵按钮

    在这里插入图片描述
    幽灵按钮将其他按钮的内容反色,背景变为透明,常用在有色背景上。

    <template>
      <div :style="{ background: 'rgb(190, 200, 200)', padding: '26px 16px 16px' }">
        <a-button type="primary" ghost>Primary</a-button>
        <a-button ghost>Default</a-button>
        <a-button type="dashed" ghost>Dashed</a-button>
        <a-button type="danger" ghost>Danger</a-button>
        <a-button type="link" ghost>Link</a-button>
      </div>
    </template>
    

    5.图标按钮

    在这里插入图片描述
    当需要在 Button 内嵌入 Icon 时,可以设置 icon 属性,或者直接在 Button 内使用 Icon 组件。
    如果想控制 Icon 具体的位置,只能直接使用 Icon 组件,而非 icon 属性。

    <template>
      <div>
        <a-button type="primary" shape="circle" icon="search"></a-button>
        <a-button type="primary" icon="search">Search</a-button>
        <a-button shape="circle" icon="search" />
        <a-button icon="search">Search</a-button>
        <a-button shape="circle" icon="search" />
        <a-button icon="search">Search</a-button>
        <a-button type="dashed" shape="circle" icon="search" />
        <a-button type="dashed" icon="search">Search</a-button>
      </div>
    </template>
    

    6.加载中状态

    第三个按钮为悬浮:
    在这里插入图片描述
    添加 loading 属性即可让按钮处于加载状态,最后两个按钮演示点击后进入加载状态。

    <template>
      <div>
        <a-button type="primary" loading>
          Loading
        </a-button>
        <a-button type="primary" size="small" loading>
          Loading
        </a-button>
        <br />
        <a-button type="primary" :loading="loading" @mouseenter="enterLoading">
          mouseenter me!
        </a-button>
        <a-button type="primary" icon="poweroff" :loading="iconLoading" @click="enterIconLoading">
          延迟1s
        </a-button>
        <br />
        <a-button shape="circle" loading />
        <a-button type="primary" shape="circle" loading />
      </div>
    </template>
    <script>
    export default {
      data () {
        return {
          loading: false,
          iconLoading: false,
        }
      },
      methods: {
        enterLoading () {
          this.loading = true
        },
        enterIconLoading () {
          this.iconLoading = { delay: 1000 }
        },
      },
    }
    </script>
    

    7.多个按钮组合

    在这里插入图片描述
    按钮组合使用时,推荐使用1个主操作 + n 个次操作,3个以上操作时把更多操作放到 Dropdown.Button 中组合使用。

    <template>
      <div>
        <a-button type="primary">Primary</a-button>
        <a-button>secondary</a-button>
        <a-dropdown>
          <a-menu slot="overlay" @click="handleMenuClick">
            <a-menu-item key="1">1st item</a-menu-item>
            <a-menu-item key="2">2nd item</a-menu-item>
            <a-menu-item key="3">3rd item</a-menu-item>
          </a-menu>
          <a-button>
            Actions <a-icon type="down" />
          </a-button>
        </a-dropdown>
      </div>
    </template>
    <script>
    export default {
      methods: {
        handleMenuClick(e) {
          console.log('click', e);
        }
      }
    }
    </script>
    

    8.按钮尺寸

    在这里插入图片描述
    按钮有大、中、小三种尺寸。
    通过设置 sizelarge small 分别把按钮设为大、小尺寸。若不设置 size,则尺寸为中。

    <template>
      <div>
        <a-radio-group :value="size" @change="handleSizeChange">
          <a-radio-button value="large">Large</a-radio-button>
          <a-radio-button value="default">Default</a-radio-button>
          <a-radio-button value="small">Small</a-radio-button>
        </a-radio-group>
        <br /><br />
        <a-button type="primary" :size="size">Primary</a-button>
        <a-button :size="size">Normal</a-button>
        <a-button type="dashed" :size="size">Dashed</a-button>
        <a-button type="danger" :size="size">Danger</a-button>
        <a-button type="link" :size="size">Link</a-button>
        <br />
        <a-button type="primary" shape="circle" icon="download" :size="size" />
        <a-button type="primary" icon="download" :size="size">Download</a-button>
        <br />
        <a-button-group :size="size">
          <a-button type="primary">
            <a-icon type="left" />Backward
          </a-button>
          <a-button type="primary">
            Forward<a-icon type="right" />
          </a-button>
        </a-button-group>
      </div>
    </template>
    <script>
    export default {
      data () {
        return {
          size: 'large',
        }
      },
      methods: {
        handleSizeChange (e) {
          this.size = e.target.value
        },
      },
    }
    </script>
    

    9.block 按钮

    在这里插入图片描述
    block属性将使按钮适合其父宽度。

    <template>
      <div>
        <a-button type="primary" block>Primary</a-button>
        <a-button block>Default</a-button>
        <a-button type="dashed" block>Dashed</a-button>
        <a-button type="danger" block>Danger</a-button>
        <a-button type="link" block>Link</a-button>
      </div>
    </template>
    

    2.API

    1.属性:

    推荐顺序为:type -> shape -> size -> loading -> disabled

    属性说明类型默认值
    disabled按钮失效状态booleanfalse
    ghost幽灵属性,使按钮背景透明,版本 2.7 中增加booleanfalse
    href点击跳转的地址,指定此属性 button 的行为和 a 链接一致string-
    htmlType设置 button 原生的 type 值,可选值请参考 HTML 标准stringbutton
    icon设置按钮的图标类型string-
    loading设置按钮载入状态boolean | { delay: number }false
    shape设置按钮形状,可选值为 circle round 或者不设string-
    size设置按钮大小,可选值为 small large 或者不设stringdefault
    target相当于 a 链接的 target 属性,href 存在时生效string-
    type设置按钮类型,可选值为 primary dashed danger link 或者不设string-
    block将按钮宽度调整为其父宽度的选项booleanfalse

    2.事件

    事件名称说明回调参数
    click点击按钮时的回调(event) => void
    展开全文
  • Tkinter教程之Button

    千次阅读 2018-12-18 10:02:19
    # Tkinter教程之Button篇(1) # Button功能触发事件 '''1.一个简单的Button应用''' from tkinter import * # 定义Button的回调函数 def helloButton(): print('hello button') root = Tk() # 通过command...
  • Button 标签属性含义及其用法

    千次阅读 2020-10-15 09:27:04
      button元素是内联双标签,不同浏览器下button样式不同,可以通过CSS修改。 <button>按钮</button> 标签属性 autofocus   指定页面加载时聚焦此按钮,多个按钮指定autofocus,仅仅只会聚焦首个...
  • vant基本组件-Button 按钮

    千次阅读 2021-01-25 20:01:54
    Button按钮·介绍 文章从vant官网搜录-仅用于个人学习而使用! 按钮用于触发一个操作,如提交表单。 引入 import Vue from 'vue'; import { Button } from 'vant'; Vue.use(Button); 代码演示 1.按钮类型 按钮...
  • 36种button样式

    万次阅读 2017-11-17 13:08:24
    <!DOCTYPE HTML> <title>36种漂亮的CSS3网页按钮Button样式 body{ background: #f5faff; } .demo_con{ width: 960px; margin:40px auto 0
  • 实现一个基于Vue的Button小组件

    千次阅读 2019-12-23 16:37:55
    概述 原生HTML的button只能保证功能存在,样式都不怎么好看。...那么此篇文章使用Vue也来实现一个好看、使用的Button小组件。 实现 button.vue 首先需要在模板页面将基本button组件需要的元素进行组装 <t...
  • Button按钮

    千次阅读 多人点赞 2020-08-18 09:32:57
    使用type、plain、round和circle属性来定义Button的样式。 <el-row> <el-button>默认按钮</el-button> <el-button type="primary">主要按钮</el-button> <el-button type=...
  • Element el-button 按钮组件详解

    万次阅读 2021-01-27 16:07:45
    el-button按钮的分类基本是靠颜色区分的,另外还有一种文本按钮type="text",文本按钮由于比较小,比较适合用于表格每行的操作栏部分。 按钮分类: <el-button>默认</el-button> <el-button type=...
  • Tkinter 组件详解(二):Button

    万次阅读 多人点赞 2018-12-19 08:16:45
    Tkinter 组件详解之Button 简介 Button(按钮)组件用于实现各种各样的按钮。Button 组件可以包含文本或图像,你可以将一个 Python 的函数或方法与之相关联,当按钮被按下时,对应的函数或方法将被自动执行。 ...
  • button按钮居中

    千次阅读 2019-09-12 17:18:06
    今天在写页面时,发现给button按钮设置居中时,css页面写了text-align="center",但是不起作用,用了display属性也无作用,试了好多次发现要给button按钮添加个div,然...
  • Android中Button组件的使用

    千次阅读 2018-08-06 22:45:57
    Button基本使用方法  首先,添加Button控件到XML布局文件中。也可通过程序添加。  在布局文件中设置按钮的一些属性,如位置,宽高,按钮上的字,颜色等。  比较重要的是要给按钮一个id号,这是按钮唯一的名字...
  • Python tkinter 按钮组件用于tkinter ...widget = Button( master, parameter=value, ... ) master:按钮控件的父容器 parameter:按钮的参数 value:参数对应的值 各参数之间以逗号分隔。 参数说明: state ...
  • Flutter 1.22版本新增的Button

    千次阅读 2020-11-03 21:56:40
    Flutter 1.22版本新增了3个按钮,TextButton、OutlinedButton、ElevatedButton,虽然以前的Button没有被废弃,但还是建议使用新的Button。 为什么会新增 Button?因为想要将以前的按钮调整为统一的外观比较麻烦,...
  • 目录一、创建样式二、ButtonEx.cs代码三、XAML代码三、前端调用四、界面启动是自动获取字体大小四、界面启动全屏显示 一、创建样式 ... public class ButtonEx : Button { static ButtonEx() { ...
  • Unity UGUI Button 中文详解-Chinar

    千次阅读 多人点赞 2019-05-20 01:45:36
    Unity UGUI Button 中文详解-Chinar 本文提供全流程,中文翻译。 Unity ugui完整系列教程 (Chinar中文图解) 动态添加监听事件 Presentation 介绍 1.1 Attribute 属性 1.2 Transition Setting 过渡类型详解 1.2.1 ...
  • React 组件封装之 Button

    千次阅读 2019-09-21 18:26:47
    实现两种button按钮,一种实心铺满宽度为100%,一种空心宽度为30%(边框)。
  • javafx控件Button

    千次阅读 2019-05-02 10:43:30
    Button是Control的一个子类,属于控件的一种 基本使用方法 创建一个按钮,传入一个字符串,即为按钮的标签 Button b=new Button ("name"); 也可以使用无参构造方法,再设置按钮标签 Button b=new Button ();...
  • 漂亮的Button按钮样式

    万次阅读 多人点赞 2018-08-02 16:26:36
    开发中各种样式的Button,其实这些样式所有的View都可以共用的,可能对于你改变的只有颜色 所有的都是用代码实现   边框样式,给你的View加上边框 &lt;Button android:layout_width="0dip" ...
  • HTML中button和input button的区别

    千次阅读 2018-07-30 19:54:44
    button和input button的区别 一句话概括主题:&lt;button&gt;具有&lt;input type="button" ... &gt;相同的作用但是在可操控性方面更加强大。 HTML 4.01规范的Forms部分指 名表单有以下...
  • button与input button

    千次阅读 2019-03-30 02:36:36
    button>与<input type="button">都具备按钮的功能与样式,区别如下: 如果在普通标签中使用,两者没有区别 如果在form表单中使用,<input type="button">不会提交表单,而<button type="submit"&...
  • bootstrap之button样式

    千次阅读 2017-10-29 17:02:12
    一、前言现在开始介绍bootstrap的button模块样式,包括buttons.less、button-groups.less。二、源码1、buttons.less1.1、buttons.less源码 // // Buttons(按钮) // ---------------------------------------------...
  • <hy-button type="text" size="small" @click="handleIsDisplay(scope.$index, scope.row)">  {{scope.row.state=='已入库'?'详情':(scope.row.state=='申请中'?'点击确认':(scope.row.state=='已退库'?'申请入库'...
  • 一、Button宽度占满屏幕或自定义 Flutter为我们提供了各式各样的Button,包括FlatButton、RaisedButton、OutlineButton、RaisedButton.icon、FlatButton.icon、OutlineButton.icon......等,而这些Button都是直接或...
  • 按钮具体实现定义为matplotlib.widgets.Button类,继承关系为:Widget->AxesWidget->Button matplotlib按钮使用还是比较简单的,属性和方法都比较少。稍有麻烦可能就是按钮的容器,即构造函数中的ax属性,注意不要和...
  • button按钮颜色切换

    千次阅读 2019-04-03 11:28:16
    先看看效果图: ...button.html 页面 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <link rel="stylesheet" href="css/create.css" /> <scri...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 1,699,776
精华内容 679,910
关键字:

button