npm:@beisen-phoenix/mobile-style-token

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 (
            <div className={skin.skinBgS1 skin.skinFntM1} >
                <h1>Hello World</h1>
            </div>
        );
    }
}

关于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; //清除浮动

@beisen-phoenix/mobile-style-token

Usage no npm install needed!