Button 按下切换颜色


Button 按下切换颜色样式

使用方式   android:theme="@style/MyButton"

<!-- Button点击切换颜色 -->

<style name="MyButton" parent="Theme.AppCompat.Light">

    <!-- 文字颜色 -->

    <item name="android:textColor">#FFFFFF</item>

    <!-- 按下颜色 -->

    <item name="android:colorControlHighlight">#00BCD4</item>

    <!-- 正常显示颜色 -->

    <item name="android:colorButtonNormal">#CDDC39</item>

    <!-- 5.0以下样式 -->

    <item name="colorControlHighlight">#00BCD4</item>

    <item name="colorButtonNormal">#CDDC39</item>

</style>

在uniapp中,你可以使用条件渲染来实现按钮点击切换颜色的功能。具体实现方法如下: 1. 首先,在`<button>`标签中添加一个动态的`class`属性,用来控制按钮颜色。例如: ```html <template> <button class="my-btn" :class="{ active: isActive }" @click="toggleButton"> {{ buttonText }} </button> </template> ``` 以上代码中,`my-btn`是自定义的样式类,`active`是用来控制按钮颜色的类名,`isActive`是一个数据属性,用来控制`active`类名的出现与否。 2. 接着,在`<script>`标签中,定义`toggleButton`方法,用来切换`isActive`属性的值,从而实现按钮颜色切换。例如: ```javascript <script> export default { data() { return { buttonText: "点击我", isActive: false, }; }, methods: { toggleButton() { this.isActive = !this.isActive; }, }, }; </script> ``` 以上代码中,当按钮被点击时,`toggleButton`方法会将`isActive`属性的值取反,从而实现按钮颜色切换。 3. 最后,在`<style>`标签中,定义`.active`类的样式,用来控制按钮颜色。例如: ```css <style> .my-btn { color: #fff; background-color: #333; border: none; padding: 10px 20px; border-radius: 5px; } .active { background-color: #f00; } </style> ``` 以上代码中,`.my-btn`是自定义的样式类,用来设置按钮的一般样式,`.active`是用来控制按钮颜色的类名,设置为红色背景色。 通过以上步骤,点击按钮时,按钮颜色就可以切换了。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值