改变颜色与样式的Button(加强版)

本文介绍了一个使用Java Swing创建的简单应用程序示例,该程序允许用户通过按钮选择不同的背景颜色,并支持快捷键操作来快速切换颜色。此外,还展示了如何通过按钮更改程序的主题。

import javax.swing.*;
import java.awt.*;
import java.awt.event.*;

public class FirstSample{
    public static void main(String[] args){
        ButtonFrame frame=new ButtonFrame();
        frame.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
        frame.setVisible(true);
    }
}

class ButtonFrame extends JFrame{
    public ButtonFrame(){
        setTitle("Michael");
        setSize(WIDTH,HEIGHT);
       
        ButtonPanel panel=new ButtonPanel();
        add(panel);
    }
   
    public static final int WIDTH=800;
    public static final int HEIGHT=600;
}

class ButtonPanel extends JPanel{
    public ButtonPanel(){
        Action redAction=new ColorAction("Yellow",new ImageIcon("red.gif"),Color.RED);
        Action greenAction=new ColorAction("Green",new ImageIcon("green.gif"),Color.GREEN);
        Action blueAction=new ColorAction("Blue",new ImageIcon("blue.gif"),Color.BLUE);
        Action whiteAction=new ColorAction("White",new ImageIcon("white.gif"),Color.WHITE);
        
        add(new JButton(redAction));
        add(new JButton(greenAction));
        add(new JButton(blueAction));
        add(new JButton(whiteAction));
       
        InputMap imap=getInputMap(JComponent.WHEN_ANCESTOR_OF_FOCUSED_COMPONENT);
        imap.put(KeyStroke.getKeyStroke("ctrl R"), "panel.red");
        imap.put(KeyStroke.getKeyStroke("ctrl G"), "panel.green");
        imap.put(KeyStroke.getKeyStroke("ctrl B"), "panel.blue");
        imap.put(KeyStroke.getKeyStroke("ctrl W"), "panel.white");
        
        ActionMap amap=getActionMap();
        amap.put("panel.red",redAction);
        amap.put("panel.green",greenAction);
        amap.put("panel.blue",blueAction);
        amap.put("panel.white",whiteAction);
        
        UIManager.LookAndFeelInfo[] infos=UIManager.getInstalledLookAndFeels();
        for(UIManager.LookAndFeelInfo info:infos)
            makeButton(info.getName(),info.getClassName());
    }
   
    void makeButton(String name,final String plafName){
        JButton button=new JButton(name);
        add(button);
       
        button.addActionListener(new
            ActionListener(){
                public void actionPerformed(ActionEvent event){
                    try{
                        UIManager.setLookAndFeel(plafName);
                        SwingUtilities.updateComponentTreeUI(ButtonPanel.this);
                    }
                    catch (Exception e){
                        e.printStackTrace();
                    }
                }
            });
    }
    
    public class ColorAction extends AbstractAction{
        public ColorAction(String name,Icon icon,Color c){
            putValue(Action.NAME,name);
            putValue(Action.SMALL_ICON,icon);
            putValue(Action.SHORT_DESCRIPTION,"Set the panel color to"+name.toLowerCase());
            putValue("color",c);
        }
        
        public void actionPerformed(ActionEvent event){
            Color c=(Color) getValue("color");
            setBackground(c);
        }
    }

}

### 更改 `el-button` 图标颜色的方法 在 Element UI 的 `el-button` 组件中,默认情况下,图标的样式会继承按钮的主题颜色。然而,如果需要单独调整图标的颜色,则可以通过以下几种方式实现。 #### 方法一:使用 CSS 自定义样式 可以直接通过覆盖默认的样式改变图标的颜色。例如: ```css /* 修改特定按钮下的图标颜色 */ .el-button .el-icon-delete { color: red !important; /* 使用!important强制覆盖原有样式 */ } ``` 这种方式适用于仅需更改某些特定图标的场景[^1]。 --- #### 方法二:利用 scoped 样式作用域 当在一个 Vue 单文件组件(SFC)中工作时,可以借助 `<style scoped>` 来限定样式的范围,从而避免影响其他部分的样式。 ```vue <template> <el-button type="primary" icon="el-icon-delete"></el-button> </template> <style scoped> /* 针对该组件内的 el-button 设置图标颜色 */ .el-button >>> .el-icon-delete { color: green; } </style> ``` 注意这里的 `>>>` 是用于穿透scoped样式的写法,在不同版本的 Vue Loader 中可能有所不同,比如在较新的 Vue 版本中可替换为 `/deep/` 或者不适用任何前缀直接生效[^2]。 --- #### 方法三:动态绑定内联样式 也可以通过 Vue 的模板语法动态绑定内联样式到 `el-button` 上面,这样能够更加灵活地控制每个实例的行为。 ```html <el-button :style="{ '--icon-color': 'blue' }"> <i class="el-icon-edit" :style="{ color: 'var(--icon-color)' }"></i> 编辑 </el-button> ``` 这种方法允许开发者基于数据驱动逻辑实时更新图标的外观特性[^3]。 --- #### 方法四:创建全局指令扩展功能 对于更复杂的需求或者希望在整个项目范围内统一管理的情况,推荐建立一个自定义全局指令来增强原生组件的功能。下面是一个简单的例子展示如何操作: ```javascript // 定义一个新的Vue全局指令v-setIconColor Vue.directive('setIconColor', function(el, binding){ const targetElement = el.querySelector('.el-icon'); if(targetElement && typeof binding.value === 'string'){ targetElement.style.color = binding.value; } }); // 在页面里调用该指令 <el-button v-setIconColor="'orange'" icon="el-icon-search">搜索</el-button> ``` 此方案不仅简化了重复代码量而且提高了维护效率[^4]。 --- ### 总结 上述四种途径各有优劣,具体选用哪一种取决于实际应用场景以及个人偏好等因素考虑决定最佳实践路径。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值