如何在 EXT JS 中的分段按钮上应用样式

Question

我想创建如下左图所示的菜单。我认为分段按钮最适合，但我在应用样式时遇到了一些问题（我也尝试了单选按钮，但应用样式更难）。

app.js

Ext.application({
    name: 'Fiddle',

    launch: function () {
        Ext.create('Ext.button.Segmented', {
            renderTo: Ext.getBody(),
            allowMultiple: false,
            vertical: true,
            items: [{
                text: 'Option 1',
                cls: 'btn',
            }, {
                text: 'Option 2',
                cls: 'btn',
                pressed: true
            }, {
                text: 'Option 3',
                cls: 'btn',
            }],
            listeners: {
                toggle: function (container, button, pressed) {
                    alert("User toggled the '" + button.getText() + "' button: " + (pressed ? 'on' : 'off'));
                }
            }
        });
    }
});

app.scss

.btn {
    position: relative;
    display: inline-block;
    padding: 20px 80px;
    margin: 15px 30px;
    border: none;  
    background: #f2f2f2;
    cursor: pointer;
    font-size: inherit;
    font-weight: light;
    letter-spacing: 1px;
    color: inherit;
    transition: all 0.3s ease 0s;
    border-radius: 24px;
}
.btn:after {
    content: "";
    position: absolute;
    transition: all 0.3s ease 0s;
    z-index: -1;
}
.btn:hover,
.btn:focus {
  color: #f8f8f8;
}

当我将 border-radius 应用到分段按钮时，它会环绕整组按钮的角，而不是它的子按钮。如何分别在子按钮上应用样式？

与使用按钮相关的另一个问题是我不能像图中那样有两个文本字段 (Text & Val)。

Answer 1

Ext.application({
    name: 'Fiddle',

    launch: function () {
        Ext.create('Ext.button.Segmented', {
            renderTo: Ext.getBody(),
            allowMultiple: false,
            vertical: true,
            items: [{
                text: 'Text3 <span>Val3</span>',
                cls: 'btn',
            }, {
                text: 'Text3 <span>Val3</span>',
                cls: 'btn',
                pressed: true
            }, {
                text: 'Text3 <span>Val3</span>',
                cls: 'btn active',
            }],
            listeners: {
                toggle: function (container, button, pressed) {
                    alert("User toggled the '" + button.getText() + "' button: " + (pressed ? 'on' : 'off'));
                }
            }
        });
    }
});

.btn {
    display: inline-block;
    padding: 20px;
    width: 230px;
    margin: 15px 30px;
    border: 1px solid #fff;
    background: #fff !important;
    font-weight: light;
    transition: all 0.3s ease 0s;
    border-radius: 30px !important;
    box-shadow: 0 0px 5px rgb(0 0 0 / 13%), 0 -1px 0px rgb(0 0 0 / 2%);
}

.btn span {color: #000;}
.btn .x-btn-inner {display: block;  width: 100%;}
.btn .x-btn-inner span {font-weight: bold;float: right;}

.btn.x-btn-menu-active, .btn.x-btn-pressed, .btn.x-btn-over {background: #fff !important; border: 1px solid #2ec9c8 !important;}

如何在 EXT JS 中的分段按钮上应用样式

How to apply style on a segmented button in EXT JS

javascript

css

extjs