在 DevExtreme 的框架中附带了五个预定义好的主题,每个主题都针对了一个主要的硬件平台,而每个预定义的主题包括两个 CSS 类,第一类提供一般主题样式,第二个类指定样式的文本内容,如标题、消息等。以下是所有的预定义的主题和它们的类的列表。
android - "dx-theme-android dx-theme-android-typography"
desktop - "dx-theme-desktop dx-theme-desktop-typography"
ios - "dx-theme-ios dx-theme-ios-typography"
win8 - "dx-theme-win8 dx-theme-win8-typography"
win8phone - "dx-theme-win8phone dx-theme-win8phone-typography"
如果想要知道如何应主题,可以从实际的情况参考以下的代码:
.dx-theme-ios .dx-tab .dx-icon-home { background: 0 0 no-repeat; } .dx-theme-ios .dx-lookup .dx-lookup-search { margin-bottom: 8px; }
一个组件的每个主要标记部分都带有一个CSS类,在此段代码中所有的类,除了dx-theme-ios都可以在实际的组件标记中使用。而dx-theme-ios类是组件不知道的一个主题类。您还可能注意此主题片断只是有上下文选择器组成,用带有dx-theme-ios类的一个主题会包含其他所有的元素。元素需要包括有dx-theme-ios类的部件,但是你是不需要手动的执行这个操作。
主要是应为框架将会自动应用到当前的设备,以便提供给当前的设备提供最合适的外观和感觉。你可以通过指定配置对象的themeClasses属性传递到HtmlApplication constructor来改变主题。比如说:如果想要激活ios主题,你就需要将“dx-theme-ios dx-theme-ios-typography”字符串分配给themeClasses属性。因此,如果你想要使用一个自定义主题,需要做的就是链接它的资源到应用程序页面,同时指定themeClasses属性。值得注意的是,如果你使用的是一个没有框架的组件,你还是需要手动的将需要包含的元素定义到主题类上。
欢迎任何形式的转载,但请务必注明出处,尊重他人劳动成果
转载请注明:文章转载自:DevExpress控件中文网 [https://www.devexpresscn.com/]
本文地址:https://www.devexpresscn.com/post/525.html