http://www.web008.net

【美高梅手机版】基于组件的样式的未来

CSS in JS 简介

2017/04/05 · CSS · CSS

原稿出处: 阮一峰   

1、

以前,网页开荒有一个条件,叫做“关怀点分离”(separation of concerns)。

美高梅手机版 1

它的意趣是,各类能力只负责和煦的世界,不要混合在一齐,产生耦合。对于网页开垦来讲,主假诺三种本事分离。

美高梅手机版 2

  • HTML 语言:负担网页的结构,又称语义层
  • CSS 语言:肩负网页的样式,又称视觉层
  • JavaScript 语言:负担网页的逻辑和相互作用,又称逻辑层或相互层

由此可以预知说,正是一句话,不要写”行内样式”(inline style卡塔尔和”行内脚本”(inline script卡塔尔国。譬如,下边代码就很欠好(查看总体代码)。

XHTML

<h1 style="color:red;font-size:46px;" onclick="alert('Hi')"> Hello World </h1>

1
2
3
<h1 style="color:red;font-size:46px;"  onclick="alert('Hi')">
  Hello World
</h1>

2、

React 现身未来,这一个条件不再适用了。因为,React 是组件结构,强制须求把 HTML、CSS、JavaScript 写在联合签名。

地方的例子使用 React 改写如下(查看风姿罗曼蒂克体化代码)。

JavaScript

const style = { 'color': 'red', 'fontSize': '46px' }; const clickHandler = () => alert('hi'); ReactDOM.render( <h1 style={style} onclick={clickHandler}> Hello, world! </h1>, document.getElementById('example') );

1
2
3
4
5
6
7
8
9
10
11
12
13
const style = {
  'color': 'red',
  'fontSize': '46px'
};
 
const clickHandler = () => alert('hi');
 
ReactDOM.render(
  <h1 style={style} onclick={clickHandler}>
     Hello, world!
  </h1>,
  document.getElementById('example')
);

地点代码在三个文书之中,封装了结构、样式和逻辑,完全背离了”关怀点分离”的尺度,比非常多少人不适应。

而是,那有扶助组件的隔绝。各个组件包涵了富有需求使用的代码,不依靠于外界,组件之间一直不耦合,很便利复用。所以,随着 React 的走红和构件形式无人不知,这种”关切点混合”的新写法慢慢变为主流。

美高梅手机版 3

3、

表面上,React 的写法是 HTML、CSS、JavaScript 混合在联合。但是,实际上不是。今后实际是用 JavaScript 在写 HTML 和 CSS。

React 在 JavaScript 里面实现了对 HTML 和 CSS 的包装,我们透过封装去操作 HTML 和 CSS。相当于说,网页的布局和体制都通过 JavaScript 操作。

4、

React 对 HTML 的包裹是 JSX 语言 ,那一个在各种React 教程皆有详细介绍,本文不再涉及了,上面来看 React 对 CSS 的卷入。

React 对 CSS 封装极度轻巧,便是沿用了 DOM 的 style 属性对象,这么些在近日早已观望过了。

JavaScript

const style = { 'color': 'red', 'fontSize': '46px' };

1
2
3
4
const style = {
  'color': 'red',
  'fontSize': '46px'
};

下边代码中,CSS 的font-size品质要写成fontSize,这是 JavaScript 操作 CSS 属性的约定。

是因为 CSS 的包裹特别弱,引致了生机勃勃三种的第三方库,用来增加 React 的 CSS 操作。它们统称为 CSS in JS,意思就是接收 JS 语言写 CSS。依照不完全总计,各样 CSS in JS 的库至罕见47种。老实说,以后也看不出来,哪三个库会变成主流。

美高梅手机版 4

你也许会问,它们与”CSS 预微型机”(比方 Less 和 Sass,包括PostCSS卡塔尔有哪些分别?回答是 CSS in JS 使用 JavaScript 的语法,是 JavaScript 脚本的风姿洒脱部分,不用从头学习意气风发套专项使用的 API,也不会多大器晚成道编写翻译步骤。

5、

下周,作者来看一个新的 CSS in JS 库,叫做 polished.js。它将意气风发部分常用的 CSS 属性封装成函数,用起来十三分有利,丰盛显示使用 JavaScript 语言写 CSS 的优势。

美高梅手机版 5

自己觉着那些库很值得推荐,那篇文章的显要目的,正是想从那几个库来看怎么利用 CSS in JS。

首先,加载 polished.js。

JavaScript

const polished = require('polished');

1
const polished = require('polished');

假定是浏览器,插入上边的台本。

XHTML

<script src="; </script>

1
2
<script src="https://unpkg.com/polished@1.0.0/dist/polished.min.js">
</script>

polished.js眼前有50多少个点子,举例clearfix方法用来清理浮动。

JavaScript

const styles = { ...polished.clearFix(), };

1
2
3
const styles = {
  ...polished.clearFix(),
};

下边代码中,clearFix正是一个经常的 JavaScript 函数,重回贰个目的。

JavaScript

polished.clearFix() // { // &::after: { // clear: "both", // content: "", // display: "table" // } // }

1
2
3
4
5
6
7
8
polished.clearFix()
// {
//  &::after: {
//    clear: "both",
//    content: "",
//    display: "table"
//  }
// }

“张开运算符”(...)将clearFix重回的目的进行,便于与其余 CSS 属性混合。然后,将样式对象赋给 React 组件的style质量,那几个组件就能够清理浮动了。

JavaScript

ReactDOM.render( <h1 style={style}>Hello, React!</h1>, document.getElementById('example') );

1
2
3
4
ReactDOM.render(
  <h1 style={style}>Hello, React!</h1>,
  document.getElementById('example')
);

从那个事例,大家应该能够心得polished.js的用法。

6、

下边再看几个很有用的函数。

ellipsis将超过钦命长度的文本,使用简单号代替(查看全部代码)。

JavaScript

const styles = { ...polished.ellipsis('200px') } // 返回值 // { // 'display': 'inline-block', // 'max-width': '250px', // 'overflow': 'hidden', // 'text-overflow': 'ellipsis', // 'white-space': 'nowrap', // 'word-wrap': 'normal' // }

1
2
3
4
5
6
7
8
9
10
11
12
13
const styles = {
  ...polished.ellipsis('200px')
}
 
// 返回值
// {
//   'display': 'inline-block',
//   'max-width': '250px',
//   'overflow': 'hidden',
//   'text-overflow': 'ellipsis',
//   'white-space': 'nowrap',
//   'word-wrap': 'normal'
// }

hideText用以隐敝文本,显示图片。

JavaScript

const styles = { 'background-image': 'url(logo.png)', ...polished.hideText(), }; // 返回值 // { 'background-image': 'url(logo.png)', 'text-indent': '101%', 'overflow': 'hidden', 'white-space': 'nowrap', }

1
2
3
4
5
6
7
8
9
10
11
12
const styles = {
  'background-image': 'url(logo.png)',
  ...polished.hideText(),
};
 
// 返回值
// {
  'background-image': 'url(logo.png)',
  'text-indent': '101%',
  'overflow': 'hidden',
  'white-space': 'nowrap',
}

hiDPI钦定高分屏样式。

JavaScript

const styles = { [polished.hiDPI(1.5)]: { width: '200px', } }; // 返回值 //'@media only screen and (-webkit-min-device-pixel-ratio: 1.5), // only screen and (min--moz-device-pixel-ratio: 1.5), // only screen and (-o-min-device-pixel-ratio: 1.5/1), // only screen and (min-resolution: 144dpi), // only screen and (min-resolution: 1.5dppx)': { // 'width': '200px', //}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
const styles = {
[polished.hiDPI(1.5)]: {
   width: '200px',
}
};
 
// 返回值
//'@media only screen and (-webkit-min-device-pixel-ratio: 1.5),
// only screen and (min--moz-device-pixel-ratio: 1.5),
// only screen and (-o-min-device-pixel-ratio: 1.5/1),
// only screen and (min-resolution: 144dpi),
// only screen and (min-resolution: 1.5dppx)': {
//  'width': '200px',
//}

retinaImage为高分屏和低分屏设置不相同的背景图。

JavaScript

const styles = { ...polished.retinaImage('my-img') }; // 返回值 // backgroundImage: 'url(my-img.png)', // '@media only screen and (-webkit-min-device-pixel-ratio: 1.3), // only screen and (min--moz-device-pixel-ratio: 1.3), // only screen and (-o-min-device-pixel-ratio: 1.3/1), // only screen and (min-resolution: 144dpi), // only screen and (min-resolution: 1.5dppx)': { // backgroundImage: 'url(my-img_2x.png)', // }

1
2
3
4
5
6
7
8
9
10
11
12
13
const styles = {
...polished.retinaImage('my-img')
};
 
// 返回值
//   backgroundImage: 'url(my-img.png)',
//  '@media only screen and (-webkit-min-device-pixel-ratio: 1.3),
//   only screen and (min--moz-device-pixel-ratio: 1.3),
//   only screen and (-o-min-device-pixel-ratio: 1.3/1),
//   only screen and (min-resolution: 144dpi),
//   only screen and (min-resolution: 1.5dppx)': {
//    backgroundImage: 'url(my-img_2x.png)',
//  }

7、

polished.js提供的此外措施如下,详细用法请参谋文档。

  • normalize():样式表开头化
  • placeholder():对 placeholder 伪元素设置样式
  • selection():对 selection 伪成分设置样式
  • darken():调整颜色深浅
  • lighten():调度颜色深浅
  • desaturate():减弱颜色的饱和度
  • saturate():扩大颜色的饱和度
  • opacify():调整折射率
  • complement():重临互补色
  • grayscale():将叁个颜色转为灰度
  • rgb():钦命红、绿、蓝八个值,重临一个颜色
  • rgba():内定红、绿、蓝和折射率七个值,重返叁个颜料
  • hsl():钦赐色调、饱和度和亮度四个值,再次回到二个颜料
  • hsla():钦命色调、饱和度、亮度和光滑度多个值,再次来到叁个颜色
  • mix():混合三种颜色
  • em():将像素转为 em
  • rem():将像素转为 rem

目前,polished.js只是1.0版,未来应该会有进一层多的章程。

8、

polished.js还应该有贰个特征:全部函数私下认可都以柯里化的,因此得以扩充函数组合运算,定制出团结想要的函数。

JavaScript

import { compose } from 'ramda'; import { lighten, desaturate } from 'polished'; const tone = compose(lighten(10), desaturate(10))

1
2
3
4
import { compose } from 'ramda';
import { lighten, desaturate } from 'polished';
 
const tone = compose(lighten(10), desaturate(10))

上边代码应用 Ramda 函数库完毕重新组合运算。Ramda 的用法能够参谋作者写的教程。

 

 

1 赞 2 收藏 评论

美高梅手机版 6

JavaScript 中的 CSS:基于组件的体裁的前途

2017/12/03 · CSS · 体制组件

本文由 伯乐在线 - dimple11 翻译,刘唱 校稿。未经许可,禁绝转发!
葡萄牙共和国语出处:Jonathan Z. White。应接参与翻译组。

 

美高梅手机版 7

 

 

 

 

 

 

 

 

 

咱俩因此选择内联式 CSS 样式,能够赢得 Javascript 中具有编制程序扶植,它的益处就像 CSS 预微型机(变量、混入和函数卡塔 尔(英语:State of Qatar)相符,何况也能解决 CSS 中的比超级多难题,举个例子全局命名空间和体裁冲突。

为了深切摸索 Javascript 中写 CSS 解决的标题,能够看这些知名的亲自过问:ReactJS中引入CSS。关于 Aphrodite 上的本性改良榜样,你可以在Khan Academy: Aphrodite 上查到内联式 CSS 代码,假使想深造更加多Javascript 中 CSS 最棒实行的连锁文化,能够查阅 Airbnb 的体裁指南。

除此以外,大家接受内联式 Javascript 样式来建构组件,处理本人前风流倜傥篇文章中介绍的风姿罗曼蒂克对统筹基本原理:在你能掌握设计早先,必得先精晓设计的基本原理。

一个启示式的例证

咱俩从一个总结的例证入手:创建和两全三个按键。

普通,组件 Button 和其有关的样式 ButtonStyles 会被归入相似的文本,那是因为它们管理的是同个难点:视图。但是以那几个例子来讲,作者是因为七种设想要将代码分开,使代码更易被清楚。

那会儿是开关组件:

<span style="color: #000000">... function Button(props) { return ( <input type="button" className={css(styles.button)} value={props.text} /> ); }</span>

1
2
3
4
5
6
7
8
9
10
<span style="color: #000000">...
function Button(props) {
  return (
    <input
      type="button"
      className={css(styles.button)}
      value={props.text}
    />
  );
}</span>

那边没什么非常的——就是五个无状态 React 组件。Aphrodite 发挥功能的地点是在 className 属性这里。函数 css 的机能是引进了一个styles 对象,并将其转移为 css。styles 对象是经过 Aphrodite 的 StyleSheet.create({ … }) 语句所生成,你能够由此 Aphrodite playground 查看 StyleSheet.create({ … }) 的出口结果。

此刻是开关的样式表:

CSS

<span style="color: #000000">... const gradient = 'linear-gradient(45deg, #FE6B8B 30%, #FF8E53 90%)'; const styles = StyleSheet.create({ button: { background: gradient, borderRadius: '3px', border: 0, color: 'white', height: '48px', textTransform: 'uppercase', padding: '0 25px', boxShadow: '0 3px 5px 2px rgba(255, 105, 135, .30)', }, });</span>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<span style="color: #000000">...
const gradient = 'linear-gradient(45deg, #FE6B8B 30%, #FF8E53 90%)';
const styles = StyleSheet.create({
  button: {
    background: gradient,
    borderRadius: '3px',
    border: 0,
    color: 'white',
    height: '48px',
    textTransform: 'uppercase',
    padding: '0 25px',
    boxShadow: '0 3px 5px 2px rgba(255, 105, 135, .30)',
  },
});</span>

 

Aphrodite 的功利之一是迁移简单直接,何况学习曲线低缓。像 border-radius 这种性质改为了borderRadius,值变成了字符串。伪类选拔器、媒体询问和字体定义都以可完结的,其它,会自动抬高浏览器引擎前缀。

以下是结果:

美高梅手机版 8

 

 

 

 

 

 

 

 

记住那个例子,大家来拜谒哪些利用 Aphrodite 来确立叁个为主的可视化设计系统,大家珍视于以下为主设计准则:制版和间距。

基本法规1——制版

大家从制版动手,它是设计的主要基本功。第一步是概念制版常量,与 Sass 和 Less 差别,Aphrodite 中常量能够投身 Javascript 或 JSON 文件中。

概念制版常量

在创制常量时,给变量起名要语义化。例如说,不要给内部的字号起名 h2,而应起像 displayLarge 这种能够描述其作用的名字。形似的,设置字体粗细时,不要给在那之中的粗细值起名 600,而应起像半粗体那样的名字,方便描述其效果。

CSS

<span style="color: #000000">export const fontSize = { // heading displayLarge: '32px', displayMedium: '26px', displaySmall: '20px', heading: '18px', subheading: '16px', // body body: '17px', caption: '15px', }; export const fontWeight = { bold: 700, semibold: 600, normal: 400, light: 200, }; export const tagMapping = { h1: 'displayLarge', h2: 'displayMedium', h3: 'displaySmall', h4: 'heading', h5: 'subheading', }; export const lineHeight = { // heading displayLarge: '48px', displayMedium: '48px', displaySmall: '24px', heading: '24px', subheading: '24px', // body body: '24px', caption: '24px', };</span>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
<span style="color: #000000">export const fontSize = {
  // heading
  displayLarge: '32px',
  displayMedium: '26px',
  displaySmall: '20px',
  heading: '18px',
  subheading: '16px',
 
  // body
  body: '17px',
  caption: '15px',
};
 
export const fontWeight = {
  bold: 700,
  semibold: 600,
  normal: 400,
  light: 200,
};
 
export const tagMapping = {
  h1: 'displayLarge',
  h2: 'displayMedium',
  h3: 'displaySmall',
  h4: 'heading',
  h5: 'subheading',
};
 
export const lineHeight = {
  // heading
  displayLarge: '48px',
  displayMedium: '48px',
  displaySmall: '24px',
  heading: '24px',
  subheading: '24px',
 
  // body
  body: '24px',
  caption: '24px',
};</span>

对诸如字号和行高端变量无误赋值特别关键,因为它们会一贯影响设计的垂直规律(vertical ryth),垂直规律能帮忙完毕要素之间的间隔统风流洒脱。

要询问越来越多的垂直规律,你能够阅读那篇文章:怎么垂直规律是后生可畏种关键的排版习于旧贯?

美高梅手机版 9

用总计器鲜明行高

想让行高和字号取值精确,背后大有知识。大家得以行使算数比率来产生一多样潜在尺寸以作备选。几周前,小编写了大器晚成篇详述方法论的作品:排版能够完毕或损毁你的统筹:叁个项目选用的进程。你能够使用Modular Scale 来决定字号,使用垂直规律总计器来支配行高。

概念多个标题组件

概念了制版常量之后,下一步是创立三个组件使用其值。那些组件的指标是在代码库中加重标题设计和落实的后生可畏致性。

<span style="color: #000000">import React, { PropTypes } from 'react'; import { StyleSheet, css } from 'aphrodite/no-important'; import { tagMapping, fontSize, fontWeight, lineHeight } from '../styles/base/typography'; function Heading(props) { const { children, tag: Tag } = props; return <Tag className={css(styles[tagMapping[Tag]])}>{children}</Tag>; } export default Heading; export const styles = StyleSheet.create({ displayLarge: { fontSize: fontSize.displayLarge, fontWeight: fontWeight.bold, lineHeight: lineHeight.displayLarge, }, displayMedium: { fontSize: fontSize.displayMedium, fontWeight: fontWeight.normal, lineHeight: lineHeight.displayLarge, }, displaySmall: { fontSize: fontSize.displaySmall, fontWeight: fontWeight.bold, lineHeight: lineHeight.displaySmall, }, heading: { fontSize: fontSize.heading, fontWeight: fontWeight.bold, lineHeight: lineHeight.heading, }, subheading: { fontSize: fontSize.subheading, fontWeight: fontWeight.bold, lineHeight: lineHeight.subheading, }, });</span>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
<span style="color: #000000">import React, { PropTypes } from 'react';
import { StyleSheet, css } from 'aphrodite/no-important';
import { tagMapping, fontSize, fontWeight, lineHeight } from '../styles/base/typography';
 
function Heading(props) {
  const { children, tag: Tag } = props;
  return <Tag className={css(styles[tagMapping[Tag]])}>{children}</Tag>;
}
 
export default Heading;
 
export const styles = StyleSheet.create({
  displayLarge: {
    fontSize: fontSize.displayLarge,
    fontWeight: fontWeight.bold,
    lineHeight: lineHeight.displayLarge,
  },
  displayMedium: {
    fontSize: fontSize.displayMedium,
    fontWeight: fontWeight.normal,
    lineHeight: lineHeight.displayLarge,
  },
  displaySmall: {
    fontSize: fontSize.displaySmall,
    fontWeight: fontWeight.bold,
    lineHeight: lineHeight.displaySmall,
  },
  heading: {
    fontSize: fontSize.heading,
    fontWeight: fontWeight.bold,
    lineHeight: lineHeight.heading,
  },
  subheading: {
    fontSize: fontSize.subheading,
    fontWeight: fontWeight.bold,
    lineHeight: lineHeight.subheading,
  },
});</span>

 

Heading 是无状态的函数式组件,它引进四个标签作为品质,并赶回该标签相应的体制。因为大家从前已在常量文件中定义了标签映射,所以那样是合理的。

<span style="color: #000000">... export const tagMapping = { h1: 'displayLarge', h2: 'displayMedium', h3: 'displaySmall', h4: 'heading', h5: 'subheading', };</span>

1
2
3
4
5
6
7
8
<span style="color: #000000">...
export const tagMapping = {
  h1: 'displayLarge',
  h2: 'displayMedium',
  h3: 'displaySmall',
  h4: 'heading',
  h5: 'subheading',
};</span>

我们在组件文件的最底层定义styles对象,就在那处会用到制版常量。

<span style="color: #000000">export const styles = StyleSheet.create({ displayLarge: { fontSize: fontSize.displayLarge, fontWeight: fontWeight.bold, lineHeight: lineHeight.displayLarge, }, ... });</span>

1
2
3
4
5
6
7
8
9
<span style="color: #000000">export const styles = StyleSheet.create({
  displayLarge: {
    fontSize: fontSize.displayLarge,
    fontWeight: fontWeight.bold,
    lineHeight: lineHeight.displayLarge,
  },
  
  ...
});</span>

那正是标题组件的行使方法:

<span style="color: #000000">function Parent() { return ( <Heading tag="h2">Hello World</Heading> ); }</span>

1
2
3
4
5
<span style="color: #000000">function Parent() {
  return (
    <Heading tag="h2">Hello World</Heading>
  );
}</span>

选取这种艺术,能够减掉设计系统中现身的意外变动。通过息灭对全局样式的须要,以致对代码库标题标准化,能够使大家幸免各样差别字号的麻烦。其它,大家用来确立标题组件的主意也可用于在代码主体创设文本组件。

基本准则2——间隔

间距能够同一时候调控规划中的垂直和档期的顺序规律,那使得间隔对于树立叁个可视化设计系统主要。和制版部分雷同,管理间距的第一步正是概念间隔常量。

概念距离常量

概念成分间隔离常量时,我们得以运用意气风发种算数方法。通过运用 spacingFactor 常量能够生出大器晚成多元基于叁个公因数的长短,这种艺术能够确认保障成分间的间隔具有逻辑性和少年老成致性。

<span style="color: #000000">const spacingFactor = 8; export const spacing = { space0: `${spacingFactor / 2}px`, // 4 space1: `${spacingFactor}px`, // 8 space2: `${spacingFactor * 2}px`, // 16 space3: `${spacingFactor * 3}px`, // 24 space4: `${spacingFactor * 4}px`, // 32 space5: `${spacingFactor * 5}px`, // 40 space6: `${spacingFactor * 6}px`, // 48 space8: `${spacingFactor * 8}px`, // 64 space9: `${spacingFactor * 9}px`, // 72 space13: `${spacingFactor * 13}px`, // 104 };</span>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<span style="color: #000000">const spacingFactor = 8;
export const spacing = {
  space0: `${spacingFactor / 2}px`,  // 4
  space1: `${spacingFactor}px`,      // 8
  space2: `${spacingFactor * 2}px`,  // 16
  space3: `${spacingFactor * 3}px`,  // 24
  space4: `${spacingFactor * 4}px`,  // 32
  space5: `${spacingFactor * 5}px`,  // 40
  space6: `${spacingFactor * 6}px`,  // 48
 
  space8: `${spacingFactor * 8}px`,  // 64
  space9: `${spacingFactor * 9}px`,  // 72
  space13: `${spacingFactor * 13}px`, // 104
};</span>

地方的例证用了三个从大器晚成到十二的线性刻度,可是用不一致的刻度和比例抓好验。设计个中因为用项、受众以致目的设备的比不上而必要分歧的刻度。以下为例,这是值为 8 的 spacingFactor 用金子比例算出来的前八个长度

<span style="color: #000000">Golden Ratio (1:1.618) 8.0 x (1.618 ^ 0) = 8.000 8.0 x (1.618 ^ 1) = 12.94 8.0 x (1.618 ^ 2) = 20.94 8.0 x (1.618 ^ 3) = 33.89 8.0 x (1.618 ^ 4) = 54.82 8.0 x (1.618 ^ 5) = 88.71</span>

1
2
3
4
5
6
7
<span style="color: #000000">Golden Ratio (1:1.618)
8.0 x (1.618 ^ 0) = 8.000
8.0 x (1.618 ^ 1) = 12.94
8.0 x (1.618 ^ 2) = 20.94
8.0 x (1.618 ^ 3) = 33.89
8.0 x (1.618 ^ 4) = 54.82
8.0 x (1.618 ^ 5) = 88.71</span>

那就是间距刻度在代码中浮现的样子,笔者加了二个相助函数,把总结结果管理成最挨近的整数像素。

<span style="color: #000000">const spacingFactor = 8; export const spacing = { space0: `${computeGoldenRatio(spacingFactor, 0)}px`, // 8 space1: `${computeGoldenRatio(spacingFactor, 1)}px`, // 13 space2: `${computeGoldenRatio(spacingFactor, 2)}px`, // 21 space3: `${computeGoldenRatio(spacingFactor, 3)}px`, // 34 space4: `${computeGoldenRatio(spacingFactor, 4)}px`, // 55 space5: `${computeGoldenRatio(spacingFactor, 5)}px`, // 89 }; function computeGoldenRatio(spacingFactor, exp) { return Math.round(spacingFactor * Math.pow(1.618, exp)); }</span>

1
2
3
4
5
6
7
8
9
10
11
12
13
<span style="color: #000000">const spacingFactor = 8;
export const spacing = {
  space0: `${computeGoldenRatio(spacingFactor, 0)}px`,  // 8
  space1: `${computeGoldenRatio(spacingFactor, 1)}px`,  // 13
  space2: `${computeGoldenRatio(spacingFactor, 2)}px`,  // 21
  space3: `${computeGoldenRatio(spacingFactor, 3)}px`,  // 34
  space4: `${computeGoldenRatio(spacingFactor, 4)}px`,  // 55
  space5: `${computeGoldenRatio(spacingFactor, 5)}px`,  // 89
};
 
function computeGoldenRatio(spacingFactor, exp) {
  return Math.round(spacingFactor * Math.pow(1.618, exp));
}</span>

概念了区间常量之后,我们就能够用它给规划中的成分加外边距。生龙活虎种格局正是在组件中引进间距常量并运用它们。

举例说,大家在 Button 组件中参与marginBottom。

<span style="color: #000000">import { spacing } from '../styles/base/spacing'; ... const styles = StyleSheet.create({ button: { marginBottom: spacing.space4, // adding margin using spacing constant ... }, });</span>

1
2
3
4
5
6
7
8
9
10
<span style="color: #000000">import { spacing } from '../styles/base/spacing';
 
...
 
const styles = StyleSheet.create({
  button: {
    marginBottom: spacing.space4, // adding margin using spacing constant
    ...
  },
});</span>

那在大多情景下都管用,不过只要大家想依靠按键放置的岗位去退换它的 marginBottom 属性值,该如何是好吧?

大器晚成种实现两种外乡距的主意是从父组件覆盖外边距样式,另外生机勃勃种方法是开创三个Spacing 组件来决定成分的垂直外边距。

<span style="color: #000000">import React, { PropTypes } from 'react'; import { spacing } from '../../base/spacing'; function getSpacingSize(size) { return `space${size}`; } function Spacing(props) { return ( <div style={{ marginBottom: spacing[getSpacingSize(props.size)] }}> {props.children} </div> ); } export default Spacing;</span>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<span style="color: #000000">import React, { PropTypes } from 'react';
import { spacing } from '../../base/spacing';
 
function getSpacingSize(size) {
  return `space${size}`;
}
 
function Spacing(props) {
  return (
    <div style={{ marginBottom: spacing[getSpacingSize(props.size)] }}>
      {props.children}
    </div>
  );
}
 
export default Spacing;</span>

经过这种办法,我们得以将安装异域距的职务从子组件中分离出来,转而归入父组件中推行。那样的话,子组件布局就一无所知了,没有须要知道子组件本人与此外因素之间之处关系。

那很有用,因为有的像开关、输入和卡片之类的零器件只怕需求两种异乡距。例如说,叁个表格中的开关只怕比三个导航栏中的开关须要越来越大的外市距。特别告诫一点,假诺三个组件的异地距总是同样的,那么在组件内管理外边距会更合理。

并且你也恐怕早就注意到了例子中仅用了 marginBottom,那是因为在二个趋势上定义全部的垂直外边距,能够制止外边距碰撞,而且帮你顿时跟进驾驭规划的垂直规律。你能够在Harry罗Bert的作品《单向外市距注脚》中看看越来越多这上头的内容。

说起底一点,你也能够将概念的间隔常量用作内边距。

<span style="color: #000000">import React, { PropTypes } from 'react'; import { StyleSheet, css } from 'aphrodite/no-important'; import { spacing } from '../../styles/base/spacing'; function Card(props) { return ( <div className={css(styles.card)}> {props.children} </div> ); } export default Card; export const styles = StyleSheet.create({ card: { padding: spacing.space4}, // using spacing constants as padding background: 'rgba(255, 255, 255, 1.0)', boxShadow: '0 3px 17px 2px rgba(0, 0, 0, .05)', borderRadius: '3px', }, });</span>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<span style="color: #000000">import React, { PropTypes } from 'react';
import { StyleSheet, css } from 'aphrodite/no-important';
import { spacing } from '../../styles/base/spacing';
 
function Card(props) {
  return (
    <div className={css(styles.card)}>
      {props.children}
    </div>
  );
}
 
export default Card;
 
export const styles = StyleSheet.create({
  card: {
    padding: spacing.space4}, // using spacing constants as padding
    
    background: 'rgba(255, 255, 255, 1.0)',
    boxShadow: '0 3px 17px 2px rgba(0, 0, 0, .05)',
    borderRadius: '3px',
  },
});</span>

通过对上上面距使用相仿的间距常量,你便足以使和谐的设计更有着视觉上的黄金年代致性。

那是结果只怕现身的范例:

美高梅手机版 10

 

 

 

 

 

 

 

既是你对 Javascript 中的 CSS 有必然调控,那就去尝试,尝试将内联式 Javascript 样式放入你的下三个种类。假若能够在单生龙活虎的情形下拍卖全体的体制和视图,笔者想你会对此非凡谢谢。

本着 CSS 和 Javascript,有何样令你倍感谢动的新进展呢?作者个人因为 async/await 而觉拿到欢快不已,你能够留言或在 推文(Tweet卡塔尔国 上给自己发 tweet。

您能够因而 Medium 找到小编,我每一周都会发小说,或然关怀自己的 推特,我总在地点对规划、前端开垦以致虚构现实海阔天空。

附记:假诺您开心那篇小说,那么点击

郑重声明:本文版权归美高梅163888所有,转载文章仅为传播更多信息之目的,如作者信息标记有误,请第一时间联系我们修改或删除,多谢。