# @beisen-phoenix/mobile-style-token > 平台移动端UI组件的原子设计 Latest version **1.0.35** (published 2019-05-20) · ISC license · 0 weekly downloads ## Install ```sh npm install @beisen-phoenix/mobile-style-token pnpm add @beisen-phoenix/mobile-style-token yarn add @beisen-phoenix/mobile-style-token bun add @beisen-phoenix/mobile-style-token ``` ## Health **Score 20/100 (F)** — status: abandoned. Positive: has types; no vulnerabilities. Warnings: low downloads; no esm support. Negative: abandoned; low maintenance score. ## Facts | | | |---|---| | Version | 1.0.35 | | Published | 2019-05-20 | | First published | 2019-02-19 | | Weekly downloads | 0 | | License | ISC | | TypeScript types | bundled | | Module format | CommonJS | | Dependencies | 0 | | Unpacked size | 21 KB | | Known vulnerabilities | 0 | | Install scripts | no | | Maintainers | beisencorp | ## Links - npm: https://www.npmjs.com/package/@beisen-phoenix/mobile-style-token - Repository: git@gitlab.beisencorp.com:ux-phoenix/mobile-style-token - npm.io page: https://npm.io/package/@beisen-phoenix/mobile-style-token ## Recent versions - 1.0.35 (latest) — 2019-05-20 - 1.0.34 — 2019-05-17 - 1.0.33 — 2019-05-17 - 1.0.32 — 2019-05-16 - 1.0.31 — 2019-05-15 - 1.0.30 — 2019-05-07 - 1.0.29 — 2019-05-06 - 1.0.28 — 2019-04-30 - 1.0.27 — 2019-04-30 - 1.0.26 — 2019-04-29 - 1.0.25 — 2019-04-26 - 1.0.24 — 2019-04-26 - 1.0.23 — 2019-04-26 - 1.0.22 — 2019-04-26 - 1.0.21 — 2019-04-26 - … 25 more at https://npm.io/package/@beisen-phoenix/mobile-style-token/versions ## README #### 组件说明 > 此组件为移动端基础样式组件,定义了符合平台设计样式变量,并且为换肤奠定了可实现的基础. > > 此组件是你开发其他组件所必须依赖的包 #### 变量说明 > 该组件封装了平台预定义的移动端基本样式变量以及mixin > $S1 ~ $S4 定义了平台预定义的背景色,对应设计稿的S1~S4 > $M1 ~ $M10 定义了平台预定义的字体色,对应设计稿的M1~M10 > $Sp0 ~ $Sp8 预定义了 几种间距,对应设计稿的Sp-0 ~ Sp-8 > $Ra1 ~ $Ra3 预定义了三种圆角,对应了设计稿的Ra-1 ~ Ra-3 > $blue $green $yellow $red 预定义了四中功能色(一般用于页面的tip),对应了设计稿的 F-blue F-green F-yellow F-red > $D1 ~ $D11 以及 $D1n1 ~ $D11n1 预定义了辅助色,分别对应了设计稿的D1 ~ D11 以及 D1-1 ~ D11-1 > > $Fs1 ~ $Fs7 预定义了7种字体样式(包括了字号以及行高),对应了设计稿的Fs-1 ~ Fs-7 > $Sh1 ~ $$Sh5 预定义了5种阴影效果,对应了设计稿的Sh-1 ~ Sh-5 #### className说明(通过使用预定义的类名,组件将支持换肤特性) > 如果组件的某个DOM元素支持更换背景色,那么你可以给该元素设置预定义的className(skinBgS1 ~ skinBgS4) > > 如果组件的某个DOM元素支持更换字体颜色,那么你可以给该元素设置预定义的className(skinFntM1 ~ skinFntM10) > skinBgS1 ~ skinBgS4 预定义了四种背景色 > skinFntM1 ~ skinFntM10 预定义了十种字体颜色 #### 如何使用 > 在package.json中奖该组件作为依赖引入 ``` "@beisen-phoenix/mobile-style-token": "0.0.2" ``` > 在react组件中,如果某个组件有换肤的特性需求,需要使用预定义的class ``` import * as skin from '@beisen-phoenix/mobile-style-token'; export default class A extends Component { render() { return (

Hello World

); } } ``` #### 关于reset样式 > 平台移动端会在承载页首先加载reset.css,所以在开发组件的时候,不必担心浏览器默认样式的问题,如果你在开发组件的过程中,需要运行example,并且需要屏蔽掉默认样式,你可以将reset.css引入到你的example中。 > > 另外该组件还提供了默认的背景色和字体色,你可以在example中引入该样式文件(default.css)来查看效果 ``` import '@beisen-phoenix/mobile-style-token/css/reset.css'; import '@beisen-phoenix/mobile-style-token/css/default.css'; ``` ### 关于scss ###### 1、在样式scss中引入mobile-style-token中index.scss(自动引入相关的mixins和variable.scss) ` @import '@beisen-phoenix/mobile-style-token/scss/index.scss'; ` ###### 2、mixins介绍 > hairline.scss 实现1px像素，边框默认颜色为：#E1E6EB; ` @include hairline-top(); // 上边框1px，可以传递颜色值 @include hairline-right(); // 右边框1px, 可以传递颜色值 @include hairline-bottom();// 底边框1px, 可以传递颜色值 @include hairline-left();// 左边框1px, 可以传递颜色值 @include hairline(); // 1px边框, 可以传递颜色值和圆角(第一个参数为颜色值，第二个参数为圆角大小，默认为0) ` > helper.scss 封装常用的mixins ` @include text-ellipsis; //文本溢出显示... @include text-ellipsis(2); //超过两行显示... @include clearfix; //清除浮动 ` #### 结合 Styled-components 完成样式的定义 ##### 参照[示例](http://gitlab.beisencorp.com/ux-share-platform/change-theme-example/tree/master) --- _Source: https://npm.io/package/@beisen-phoenix/mobile-style-token · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._