[英]Style or customize Picker in Sencha Touch Architect
如何完全自定义Sencha Touch选择器?
我设法自定义了边框,中心和按钮,但是找不到任何可以自定义该蓝色渐变工具栏的东西。 我什至找不到透明的地方。
码:
Ext.define('FOLUI.view.pageValuePicker', {
extend: 'Ext.picker.Picker',
alias: 'widget.pageValuePicker',
config: {
cls: 'PickerFrame',
height: 200,
itemId: 'pageValuePicker',
doneButton: {
cls: 'PaginationButton',
width: '80px',
pressedCls: 'PaginationButtonPressed'
},
cancelButton: {
cls: 'PaginationButton',
width: '80px',
pressedCls: 'PaginationButtonPressed'
},
slots: [
{
xtype: 'pickerslot',
cls: [
'PickerMiddle'
],
itemId: 'pageValuePickerSlot',
align: 'center',
data: [
{
text: '1',
value: 1
},
{
text: '2',
value: 2
},
{
text: '3',
value: 3
},
{
text: '4',
value: 4
},
{
text: '5',
value: 5
},
{
text: '6',
value: 6
},
{
text: '7',
value: 7
},
{
text: '8',
value: 8
},
{
text: '9',
value: 9
}
],
name: 'pageValuePickerSlot'
}
]
}
});
CSS:
.PaginationButton {
background: #002c42 !important;
color:#ffffff;
font-size: 16px;
font-weight: bold;
border-radius: 4px;
border: 1px solid #000d13;
-webkit-box-shadow: inset 0px 1px 0px #678796;
}
.PaginationButtonPressed {
background: #00344e !important;
color:#ffffff;
font-size: 16px;
font-weight: bold;
border-radius: 4px;
border: 1px solid #000d13;
-webkit-box-shadow: inset 0px 1px 0px #678796;
}
.PickerFrame {
background: #dae4ec !important;
border: 1px solid #6890b0;
-webkit-box-shadow: inset 0px 1px 0px #ffffff;
}
.PickerMiddle {
font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;
color: #022c42 !important;
font-weight: bold;
line-height: 45px;
background-color: #ffffff !important;
border-radius: 6px;
border-top-left-radius: 0px;
border-top-right-radius: 0px;
border: 1px solid #6890b0;
-webkit-box-shadow: inset 0px 0px 13px 3px #cbcbcb;
}
您可以针对ST使用的默认元素类设置样式。 最简单的方法是在浏览器中“检查元素”,并检查相关项目具有的类(ST类名称以x-
开头,例如x-toolbar
)。 如果您想防止样式不属于您修改后的小部件的任何项目,则可以为小部件提供唯一的ID /类,并为CSS规则添加前缀。
如果您觉得笨拙地从自己的CSS文件中覆盖其现有样式,或者想深入研究样式/主题ST:ST使用SASS / Compass来构建CSS文件。 设置起来有些麻烦,但好处是您可以使用SASS / Compass函数创建自己的渐变,颜色方案等。 加上结果是您最终只能得到一个包含所有内容的CSS文件。
选择器具有带有渐变的伪类。 但是chrome的dom检查器有一些奇怪的行为,可能不会显示伪类。 所以你找不到它。 转到CSS文件并在其中编辑样式。
您可以使用此技巧来扩展您希望配置的选项:
items: [
{
xtype: 'selectfield',
label: 'Choose one',
usePicker: 1, // convert selectfield into a picker
defaultPhonePickerConfig: { // customise text values displayed
doneButton: 'Select',
cancelButton: 'Cancel'
},
options: [
{text: 'First Option', value: 'first'},
{text: 'Second Option', value: 'second'},
{text: 'Third Option', value: 'third'}
]
}
]
现在,关于您要避免的样式,只需不包括它。 您正在看到正在调用ST默认样式。您已经设法覆盖了部分样式,并且通过在上方显示此示例(其中选择可以用作选择器)的示例,您可以看到可以调用样式的位置有多大变化在。
罪魁祸首(ST2.2):
@import 'sencha-touch/default';
@import 'sencha-touch/default/all';
注释掉“所有”行,然后仅调用您希望默认样式的各个组件。
// @import 'sencha-touch/default/all';
// replacing direct reference to exact path of component mixin
// all in relation to the "sencha-touch" folder which is pathed in config.rb
@import 'sencha-touch/default/src/_MessageBox.scss';
@import 'sencha-touch/default/src/_Toolbar.scss';
一旦您习惯了混合文件的结构以及如何对其进行引用和调用,就可以简化工作,只需从ST中调用绝对最小的结构,即“基础”即可。 将您想要使用的mixin组件的副本复制到/ resources / sass / mixins中,修改样式以适合您的需求。 结果是生成的样式表要小得多,从而消除了所有令人毛骨悚然的默认设置。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.