ux-base-style

> 此组件为PC端基础样式组件,定义了符合平台设计样式变量,并且为换肤奠定了可实现的基础. > > 定义了符合平台设计样式变量,并且为换肤奠定了可实现的基础.

Usage no npm install needed!

<script type="module">
  import uxBaseStyle from 'https://cdn.skypack.dev/ux-base-style';
</script>

README

组件说明

此组件为PC端基础样式组件,定义了符合平台设计样式变量,并且为换肤奠定了可实现的基础.

定义了符合平台设计样式变量,并且为换肤奠定了可实现的基础.

变量说明

该组件封装了平台预定义的PC端基本样式变量以及mixin

$S1 ~ $S6 定义了平台预定义的背景色

$M1 ~ $M10 定义了平台预定义的字体色

$Sp-1 ~ $Sp-11 预定义了 几种间距

$Ra-1 ~ $Ra-5 预定义了三种圆角

$F-blue $F-green $F-yellow $F-red 预定义了四中功能色(一般用于页面的tip)

$D1 ~ $D11 以及 $D1-1 ~ $D11-1 与定义了辅助色

mixin说明

Fs-1 ~ Fs-8 预定义了8种字体样式(包括了字号以及行高)

Sh-1 ~ Sh-5 预定义了5种阴影效果

className说明(通过使用预定义的类名,组件将支持换肤特性)

如果组件的某个DOM元素支持更换背景色,那么你可以给该元素设置预定义的className(skinBgS1 ~ skinBgS6)

如果组件的某个DOM元素支持更换字体颜色,那么你可以给该元素设置预定义的className(skinFntM1 ~ skinFntM10)

skinBgS1 ~ skinBgS6 预定义了六种背景色

skinFntM1 ~ skinFntM10 预定义了十种字体颜色

如何使用

在package.json中奖该组件作为依赖引入

    "ux-base-style": "0.0.1",

在react组件中,如果某个组件有换肤的特性需求,需要使用预定义的class

import * as skin from 'ux-base-style';
export default class A extends Component {
    render() {
        return (
            <div className={skin.skinBgS1 skin.skinFntM1} >
                <h1>Hello World</h1>
            </div>
        );
    }
}

在自己的scss文件中

@import '~ux-base-style/css/variable.scss';
@import '~ux-base-style/css/mixin.scss';

.ui-page {
  background:$S1;
  color:$M1;
  margin:$Sp-0;
  padding:$Sp-1;
}

关于reset样式

平台会在承载页首先加载reset.css,所以在开发组件的时候,不必担心浏览器默认样式的问题,如果你在开发组件的过程中,需要跑example,并且需要屏蔽掉默认样式,你可以将reset.css引入到你的example中。 另外该组件还提供了默认的背景色和字体色,你可以在example中引入该样式文件(example.css)来查看效果

component.scss

@import ~ux-base-style/css/reset.css
@import ~ux-base-style/css/example.css