Sencha Touch 主题：自定义返回按钮

Posted 2023-02-26

【中文标题】Sencha Touch 主题：自定义返回按钮

【英文标题】：Sencha Touch theming: custom back button

【发布时间】：2012-01-18 19:54:23

【问题描述】：

我正在尝试声明一系列后退按钮。

我的目标是 ui: '后黑' ui: '后红' ui: '回绿色'

它改变了样式但它保持箭头形状

到目前为止，我只设法更改了所有 ui:'back' 按钮

 .x-button-back, .x-button-back:after   
  background:#ff0000 none !important;

有什么想法吗？

【参考方案1】：

为什么不试试ui:'normal-black' 或ui:'round-black'？

更新

为此，您需要编辑项目的 Sass 文件。将此行添加到您想要的每种颜色的 scss 文件中

@include sencha-button-ui('orange',#ff8000,'glossy');

类似

@include sencha-button-ui('red',#ff0000,'matte');

查看此视频了解更多信息：

http://vimeo.com/33298159（示例为17:00）

http://vimeo.com/17879651

http://www.sencha.com/learn/theming-sencha-frameworks-with-sass-and-compass/

还有 CSS3 备忘单 http://downloads.sencha.com/extras/css3-cheat-sheet.pdf

【讨论】：

我想要的是能够更改颜色 ui:back 这是一个形状像箭头的按钮。我可以更改 ui:back 的颜色，但只能更改一次。我想要的是保持箭头形状并定义几种颜色

【参考方案2】：

在卡片上：

config: 

    defaultBackButtonText: '',
    navigationBar: 
        backButton: 
            iconCls: 'back',
            ui: 'plain'
        
    

在 CSS 上：

//Back
.x-button-icon.back 
background-image: url(../../resources/images/bt_seta.png);
background-repeat: no-repeat;

【参考方案3】：

选择的答案可能是错误的或不适用于 Sencha 2.0.1。我试过了，但它在 Sencha Touch 2.0.1 中不起作用。但是，以下方法有效：

（可选）在你的 sass 中通过 sass 导入你喜欢的颜色：

@include sencha-button-ui('orange',#ff8000,'glossy');

把它放在ui中

ui: "orange-back"

或

ui: "red-back"

...等等

【讨论】：

感谢更新，我在 2011 年底问了这个问题，当时 ST2 处于 beta 测试的初期，所以我的项目在 ST1 中^^

没问题。我遇到了同样的问题并进行了搜索。这东西在ST2中不起作用！这就是为什么我提供这个答案以防万一有人需要它；）