@beisen-phoenix/style-token NPM

组件说明

此组件为pc端基础样式组件,定义了符合平台设计样式变量,并且为换肤奠定了可实现的基础.
此组件是你开发其他组件所必须依赖的包

变量说明

该组件封装了平台预定义的pc端基本样式变量以及mixin
$S1 ~ $S6 定义了平台预定义的背景色,对应设计稿的S1~S4
$M1 ~ $M10 定义了平台预定义的字体色,对应设计稿的M1~M10
$Sp1 ~ $Sp11 预定义了几种间距,对应设计稿的Sp-1 ~ Sp-11
$Ra1 ~ $Ra5 预定义了五种圆角,对应了设计稿的Ra-1 ~ Ra-5
$blue $green $yellow $red 预定义了四中功能色(一般用于页面的tip),对应了设计稿的 F-blue F-green F-yellow F-red
$D1 ~ $D11 以及 $D1n1 ~ $D11n1 预定义了辅助色,分别对应了设计稿的D1 ~ D11 以及 D1-1 ~ D11-1
$Fs1 ~ $Fs8 预定义了8种字体样式(包括了字号以及行高),对应了设计稿的Fs-1 ~ Fs-8
$Sh1 ~ $Sh5 预定义了5种阴影效果,对应了设计稿的Sh-1 ~ Sh-5

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

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

如何使用

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

    "@beisen-phoenix/style-token": "0.0.1"

在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';

结合 Styled-components 完成样式的定义

参照示例

typescript

status-tag @infinitebrahmanuniverse/nolb-_beisen-@everything-registry/sub-chunk-118 ux-new-social-archives ux-new-social-security ux-pc-feedback ux-personal-info-card ux-historical-social-security ux-increase-personnel ux-checkbox-zhangjunqiu ux-chatrobot-indexview ux-details-editor ux-recruit-tree ux-staff-adjustment ux-tl-template ux-user-selector2 ux-treeselect-zhangyurui ux-tag-cloud ux-task-drawer ux-stop-payment ux-work-report ux-work-report-drawer ux-work-report-setting ux-work-report-statistics-drawer italent-subordinate-tree italent-create-task lelel2-demo-button group-single-select multi-select-list lv2-demo-button pop-search radio-group-with-button single-select-list @beisen-cmps/italent-at-others @beisen-cmps/italent-create-summary @beisen-cmps/task-drawer @beisen-phoenix/department @beisen-phoenix/drawer @beisen-phoenix/empty @beisen-phoenix/container @beisen-phoenix/data-table @beisen-phoenix/date-picker @beisen-phoenix/composite-input @beisen-phoenix/form @beisen-phoenix/grid @beisen-phoenix/group-single-select @beisen-phoenix/img-preview @beisen-phoenix/field-upload @beisen-phoenix/file-list @beisen-phoenix/file-preview @beisen-phoenix/input @beisen-phoenix/input-number @beisen-phoenix/input-range @beisen-phoenix/loading @beisen-phoenix/message @beisen-phoenix/modal @beisen-phoenix/mobile-container @beisen-phoenix/popover @beisen-phoenix/popup @beisen-phoenix/progress @beisen-phoenix/radio @beisen-phoenix/radio-group @beisen-phoenix/rate @beisen-phoenix/rc-tree @beisen-phoenix/react-table @beisen-phoenix/result-page @beisen-phoenix/search-form @beisen-phoenix/select @beisen-phoenix/select-list @beisen-phoenix/single-select-list @beisen-phoenix/steps @beisen-phoenix/switch @beisen-phoenix/tooltip @beisen-phoenix/unmodeled-layer @beisen-phoenix/upload-block @beisen-phoenix/upload-button @beisen-phoenix/upload-button-block @beisen-phoenix/tag @beisen-phoenix/textarea @beisen-phoenix/time-picker @beisen-phoenix/timeline @beisen-phoenix/multi-select-list @beisen-phoenix/pagination @beisen-phoenix/percent @beisen-phoenix/person-selector @beisen-phoenix/pop-search @beisen-phoenix/popconfirm @beisen-phoenix/user-selector @beisen-platform/index-page @beisen-platform/jobtype-selector @beisen-phoenix/table @beisen-phoenix/table-v2 @beisen/fast-table @beisen/flex-layout @beisen/drawer @beisen/enhance-modal @beisen-cmps/cooperation @beisen-phoenix/alert @beisen-phoenix/all-in-one @beisen-phoenix/anchor

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago