Dojo 样式简介
翻译自:https://github.com/dojo/framework/blob/master/docs/en/styling/introduction.md
介绍
Dojo 是基于 HTML 的技术,使用 CSS 为框架中的元素和用它开发的应用程序设置样式。
Dojo 鼓励将结构样式封装在各部件中,以便最大限度复用;同时将外观主题设置到应用程序所有部件上。用户为他们的应用程序设置样式和主题时,这种模式提供了固定的套路,即使混合使用 Dojo 的 @dojo/widgets
库中的部件、由第三方提供的部件或者为特定应用程序开发的内部使用的部件时也是如此。
功能 | 描述 |
---|---|
为单个部件设置样式 | CSS Modules 用于定义,在单个部件的作用域内有效的样式,避免潜在的交叉污染和样式冲突。通过类型化的 CSS 模块导入和 IDE 自动完成功能,部件可以精确的引用 CSS 类名。 |
强大的主题支持 | 可以轻松开发出支持主题的部件,这样的部件既能使用简化的、中心化的应用程序主题,也能调整或覆盖单个实例的目标样式(如果需要的话)。CLI 工具支持分发自定义主题。 |
响应式的主题变更 | 与 Dojo 应用程序中的其他响应式状态变更类似,当一个部件或者整个应用程序的主题发生变化时,只有受影响的部件才会重新渲染。 |
提取 CSS 属性 | 每个 CSS 模块可通过 CSS 自定义属性和 var() 引用集中定义的 :root 样式变量。 |
简化定义第三方部件的主题 | 应用程序可以轻松扩展主题以覆盖第三方部件,如 Dojo 内置部件库中的部件,Dojo 也提供了开箱即用的主题,应用程序可直接使用。CLI 工具极大简化了主题的创建和组合。 |
基本用法
注意: 以下示例是按顺序在前一个示例的基础上构建的。每个示例都尽量简短,只突出显示跟上一个示例相比发生变化的部分。
这些示例假定应用程序名为:
package.json
{ "name": "my-app" }
应用程序名与部件主题的 key 有关。
为单个部件设置样式
- 为每个部件单独定义一个 CSS 模块
- 在部件的 TypeScript 代码中使用相应的类型化的样式类
src/styles/MyWidget.m.css
.root { font-family: sans-serif; }
src/widgets/MyWidget.tsx
import { create, tsx } from '@dojo/framework/core/vdom'; import * as css from '../styles/MyWidget.m.css'; const factory = create(); export default factory(function MyWidget() { return <div classes={[css.root]}>My Widget</div>; });
让部件支持主题
- 注入
theme
中间件 - 使用
theme.classes
返回主题化的 css 类名,这样部件的默认样式就会被主题覆盖
src/widgets/MyWidget.tsx
import { create, tsx } from '@dojo/framework/core/vdom'; import theme from '@dojo/framework/core/middleware/theme'; import * as css from '../styles/MyWidget.m.css'; const factory = create({ theme }); export default factory(function MyWidget({ middleware: { theme } }) { const { root } = theme.classes(css); return <div classes={[root]}>My Widget</div>; });
创建主题
src/themes/MyTheme/MyWidget.m.css
.root { color: hotpink; background-color: slategray; }
src/themes/MyTheme/theme.ts
import * as myWidgetCss from './MyWidget.m.css'; export default { 'my-app/MyWidget': myWidgetCss };
提取公共的主题属性
- 导入一个集中定义的常规 CSS 文件
variables.css
,其中定义了 CSS 自定义属性 - 通过
var()
引用自定义属性
src/themes/variables.css
:root { --foreground: hotpink; --background: slategray; }
src/themes/MyTheme/MyWidget.m.css
@import '../variables.css'; .root { color: var(--foreground); background-color: var(--background); }
指定默认的应用程序主题
theme
中间件可用于设置应用程序主题。要设置“默认的”或初始化主题,则使用 theme.set
函数,同时用 theme.get
函数确定是否需要设置主题。应该在应用程序的顶级部件中设置默认主题。
src/App.tsx
import { create, tsx } from '@dojo/framework/core/vdom'; import theme from '@dojo/framework/core/middleware/theme'; import myTheme from '../themes/MyTheme/theme'; const factory = create({ theme }); export default factory(function App({ middleware: { theme }}) { // if the theme isn't set, set the default theme if (!theme.get()) { theme.set(myTheme); } return ( // the application's widgets ); });
注意: 当同时使用基于函数的部件和基于类的部件时,应该使用应用程序注册器来注册主题。当使用基于类的部件时(如 @dojo/widgets
) 也是如此。详情参考基于类部件的主题。
更改应用程序主题
- 使用
theme
中间件 在可用的主题间切换
src/widgets/ThemeSwitcher.tsx
import { create, tsx } from '@dojo/framework/core/vdom'; import theme from '@dojo/framework/core/middleware/theme'; import myTheme from '../themes/MyTheme/theme'; import alternativeTheme from '../themes/MyAlternativeTheme/theme'; const factory = create({ theme }); export default factory(function ThemeSwitcher({ middleware: { theme } }) { return ( <div> <button onclick={() => { theme.set(myTheme); }} > Use Default Theme </button> <button onclick={() => { theme.set(alternativeTheme); }} > Use Alternative Theme </button> </div> ); });
低调大师中文资讯倾力打造互联网数据资讯、行业资源、电子商务、移动互联网、网络营销平台。
持续更新报道IT业界、互联网、市场资讯、驱动更新,是最及时权威的产业资讯及硬件资讯报道平台。
转载内容版权归作者及来源网站所有,本站原创内容转载请注明来源。
- 上一篇
鸿蒙系统是否用于手机?华为董事长:20日将发布鸿蒙整体战略
今年8月9日的开发者大会上,华为宣布了鸿蒙HarmonyOS系统,首发产品是智慧屏,其他设备未来也有可能会升级到鸿蒙系统,尤其是是最受关注的华为手机,是否使用鸿蒙系统一直没有确定。 在第二届全球科技大会上,华为董事长梁华透露,华为将在11月20日发布鸿蒙相关的整体战略。虽然梁华没有透露具体的信息,但是这次鸿蒙战略发布会应该会让业界对鸿蒙系统的发展更为清晰一些。 在此之前,华为高级副总裁彭博(Vincent Pang)表示,由于美国对华为安卓手机采用谷歌GMS的限制,华为将在未来6~9个月内决定是否将鸿蒙迁移到智能手机上。 鸿蒙是一种基于微内核的全场景分布式OS系统,具备分布架构、天生流畅、内核安全及生态互享等优势。
- 下一篇
Spring-retry使用指南
Spring-retry 该项目为Spring应用程序提供声明式重试支持,它用于Spring Batch、Spring Integration、Apache Hadoop的Spring(以及其他),命令式重试也支持显式使用。 入门 声明式示例 @Configuration @EnableRetry public class Application { @Bean public Service service() { return new Service(); } } @Service class Service { @Retryable(RemoteAccessException.class) public void service() { // ... do something } @Recover public void recover(RemoteAccessException e) { // ... panic } } 调用service方法,如果它由于RemoteAccessException失败,那么它将重试(默认情况下最多三...
相关文章
文章评论
共有0条评论来说两句吧...
文章二维码
点击排行
推荐阅读
最新文章
- Jdk安装(Linux,MacOS,Windows),包含三大操作系统的最全安装
- Linux系统CentOS6、CentOS7手动修改IP地址
- SpringBoot2整合Thymeleaf,官方推荐html解决方案
- CentOS6,7,8上安装Nginx,支持https2.0的开启
- CentOS6,CentOS7官方镜像安装Oracle11G
- 设置Eclipse缩进为4个空格,增强代码规范
- CentOS7,8上快速安装Gitea,搭建Git服务器
- CentOS7编译安装Cmake3.16.3,解决mysql等软件编译问题
- CentOS7,CentOS8安装Elasticsearch6.8.6
- SpringBoot2整合MyBatis,连接MySql数据库做增删改查操作