Browsed by
月份:2017年10月

使用Angular Material的排版

使用Angular Material的排版

使用Angular Material排版 [TOC] 什么是排版 What is typography? 排版是一种排列方式,可以让文字易读易懂,显示美观。Angular Material的排版是基于Material Design Spec的规范分成了不同的排版层级。每一个层级都包含了font-size,line-height和font-weight。层级如下: Typography is a way of arranging type to make text legible, readable, and appealing when displayed. Angular Material’s typography is based on the guidelines from the Material Design Spec and is arranged into typography levels. Each level has a font-size, line-height and font-weight. The available levels are: display-4, display-3, display-2和display-1,大的一次性的头部, 通常在页面顶部 (e.g. a hero header). headline – 对应<h1>标签的段落标题。 title – 对应<h2>标签的段落标题。 subhea…

阅读全文 Read More

定制你的组件主题

定制你的组件主题

定制你的组件主题 [toc] 为了使用Angular Material工具改变你的组件样式,组件样式必须使用Sass进行定义 In order to style your own components with Angular Material’s tooling, the component’s styles must be defined with Sass. 使用 @mixin 自动应用主题 Using @mixin to automatically apply a theme 为什么使用@mixin Why using @mixin 使用@mixin方法的优点是,每当你更改主题的时候,使用的每个文件都会被自动更新。可以在应用或者组件中调用@mixin的时候引入不同的主题参数,来使用多重主题。 The advantage of using a @mixin function is that when you change your theme, every file that uses it will be automatically updated. Calling the @mixin with a different theme argument allows multiple themes within the app or component. 如何使用@mixin How to use @mixin 通过把@mixin方法添加到主题文件中,然后调用这个方法应…

阅读全文 Read More

TypeScript 记录(持续补充)

TypeScript 记录(持续补充)

[toc] 变量 类型 相对于JavaScript,TypeScript引入了数据类型: 类型 含义 boolean 布尔 number 数字 string 字符串 type[] 数组,type为其他类型 any 任意 声明 let let用于声明变量 let hello: string = “Hello!”; const const用于声明常量 const numLivesForCat: number = 9; 函数 函数使用function定义 function add(x: number, y: number): number { return x + y; } 类 与java的类相似,使用class声明 class Animal { name:string; constructor(theName: string) { this.name = theName; } move(distanceInMeters: number = 0) { console.log(`${this.name} moved ${distanceInMeters}m.`); } } 同样也有继承,使用extends class Snake extends Animal { constructor(name: string) { super(name); } move(distanceInMeters = 5) { console.log(“Slithering…”); super.move(distanceInM…

阅读全文 Read More

主题化你的Material应用

主题化你的Material应用

主题化你的Material应用 Theming your Angular Material app [toc] 什么是主题 What is a theme? 主题是由不同颜色构成的一种组合,可以应用到Angular Material组件上。主题库用法可以参考Material Design说明 产品指导。 A theme is the set of colors that will be applied to the Angular Material components. The library’s approach to theming is based on the guidance from the Material Design spec. 在Angular Material中主题是通过多个色调组合来创建的。特别说明,一个主题由以下组成: In Angular Material, a theme is created by composing multiple palettes. In particular, a theme consists of: 主色调:全部屏幕和组件中广泛使用的颜色。 强调色调:浮动操作按钮和交互元素中使用的颜色。 警告色调:提示错误状态的颜色。 前景色调:字体和图标的颜色。 背景色调:元素背景的颜色。 A primary palette: colors most widely used across all screens and components….

阅读全文 Read More