❤
npm
Sign UpSign In

bs-component-js

0.1.11-beta1 • Public • Published

BSoft前端(web端) 通用js、css库

本工程是BSoft前端通用Js、Css库，基于UED标准开发。

node chrome edge firefox safari opera

gitlab

本文档仅供参考，实际开发以项目为准!

目录

项目结构说明

|-- root
    |-- src
    |   |-- css           （css库）
    |   |   |-- common    （通用样式）
    |   |   |-- reset     （重写样式）
    |   |-- js            （js库）
    |   |-- index.js      （打包入口）
    |-- .gitignore        （git忽略列表）
    |-- index.html        （测试文件）
    |-- package.json      （项目描述）
    |-- README.md
  |-- webpack.config.js   （webpack 配置文件）

一、安装

# 使用npm
npm install bs-component-js

# 或者使用yarn 
yarn add bs-component-js

本地测试使用npm link

npm link ./XXX(本地目录)/bs-component-js

兼容性

IE IE chrome edge firefox safari opera

安装失败？ 请确认npm源非本地源

#获取当前源
npm [config] get registry

#设置源
npm [config] set registry URL

如速度过慢请切换至国内源 常用：https://registry.npm.taobao.org

没有包管理器？ 请参阅 yarn或 npm

二、使用

// main.ts

// css 需在其他样式之后import
import "bs-component-js/dist/bs-component-js.common.css"

// js 以下内容开发中
// import BsCompJs from "bs-component-js"
// Vue.use(BsCompJs)

// js按需引用 
// import { API,Filters } from "bs-component-js"
// Vue.prototype.$api = API
// Object.keys(Filters.forEach((v) => Vue.filter(v, Filters[v]));

css类名使用 "-" 分割

三、JS文档

开发中

四、CSS文档

主题文件

主题文件用于规范色彩、尺寸、间距。

打包时会在dist文件夹单独生成theme.less文件

项目中使用

通过配置文件全局引入，例：

// vite.config.ts

import { defineConfig } from "vite";

export default defineConfig({
    // 上略
    css: {
      preprocessorOptions: {
          less: {
              globalVars: {
                  hack: `true; @import "${path.join(__dirname, "./node_modules/bs-component-js/dist/theme.less")}"`,
              },
          },
      },
    },
    // 下略
})

配置说明

/* 颜色 */
/* 行为相关颜色 */
@color-primary: #4088FE;
@color-success: #26BF40;
@color-warning: #FF9A26;
@color-error: #FF3D40;
@color-info: #999999;
@color-disable: #CCCCCC;
@color-price: #FF3D40;
@color-white: #fff;
@color-black: #000;

/* 文字基本颜色 */
@color-text: #262626;
@color-text-white: #fff;
@color-text-grey: #999;
@color-text-placeholder: #999999;
@color-text-disable: #BBBBBB;

/* 背景颜色 */
@color-bg-white: #ffffff;
@color-bg-grey: #f8f8f8;
@color-bg-disable: #f9f9f9;

/* 边框颜色 */
@border-color: #d5d6db;

/* 尺寸变量 */
/* 文字尺寸 */
@font-size: 14px;

/* icon尺寸 */
@icon-size: 16px;

/* 图片尺寸 */
@img-size: 40px;

/* 边框圆角 */
@border-radius-sm: 4px;
@border-radius: 6px;
@border-radius-lg: 12px;
@border-radius-circle: 50%;

/* 水平间距 */
@spacing-row: 16px;

/* 垂直间距 */
@spacing-col: 16px;

/* 透明度 */
@opacity: 0.7;

/* 控件最大宽度 */
@input-width: 100%;

/* 表格行高 */
@table-row-height: 40px;

/* 表格边框 */
@table-border-color: #dbdbdb;

/* 表头背景色 */
@table-head-bg-color: #F0F3F6;

/* 表格悬停背景色 */
@table-row-hover-color: #d7efff;

/* 表格偶数行背景色 */
@table-row-striped-color: #f9f9f9;

/* tab背景色 */
@tabs-tab-bg-color: #F0F3F6;
@tabs-tab-active-bg-color: #fff;

/* tab文本色 */
@tab-tab-active-color: @color-primary;

/* 投影参数 */
@box-shadow: 0 0 15px rgb(0 0 0 / 10%);

尺寸数值说明

预设样式中，对尺寸(如宽高、内外边距、行高等等)预设有一组固定数值(单位为px)，数值规律如下。

20px以内: 每5px递增

0px、5px、10px、15px、20px

200px以内： 每10px递增

0px、10px、20px、30px、40px、50px、60px、70px、80px、90px、100px、110px、120px、130px、140px、150px、160px、170px、180px、190px、200px

6的倍数：

0px、6px、12px、18px、24px、30px、36px、42px、48px、54px、60px

8的倍数：

0px、8px、16px、24px、32px、40px、48px、56px、64px、72px、80px

负数： 同20px以内

0px、-5px、-10px、-15px、-20px

目前负数只对margin生效

颜色

文本颜色 .color-[color]

主题色： theme.less中的色彩

/* color */
.color-primary { color: @color-primary; }
.color-success { color: @color-success; }
.color-warning { color: @color-warning; }
.color-error { color: @color-error; }
.color-info { color: @color-info; }
.color-disable { color: @color-disable; }
.color-price { color: @color-price; }
.color-white { color: @color-white; }
.color-black { color: @color-black; }
.color-grey { color: @color-grey; }

/* text color */
.color-text { color: @color-text; }
.color-text-white { color: @color-text-white; }
.color-text-grey { color: @color-text-grey; }
.color-text-placeholder { color: @color-text-placeholder; }
.color-text-disable { color: @color-text-disable; }

例

<div class="color-info">一段文字<span class="color-error">中的一部分</span></div>

预设色： 从#000到#fff

/*color number*/
.color-000 { color: #000; }
.color-111 { color: #111; }
.color-222 { color: #222; }
...
.color-fff { color: #fff; }

例

<div class="color-333">一段文字<span class="color-999">中的一部分</span></div>

背景颜色 .bg-[color]

主题色： theme.less中的色彩

/* bg color */
.bg-white { background-color: @color-bg-white; }
.bg-grey { background-color: @color-bg-grey; }
.bg-disable { background-color: @color-bg-disable; }

例

<div class="bg-grey">一段文字<span class="bg-white">中的一部分</span></div>

预设色： 从#000到#fff

.bg-000 { background-color: #000; }
.bg-111 { background-color: #111; }
.bg-222 { background-color: #222; }
...
.bg-fff { background-color: #444; }

例

<div class="bg-fff">一段文字<span class="bg-000 color-fff">中的一部分</span></div>

使用color属性 [color="color"]

此种方法权重高于使用class

[color="primary"] { color: @color-primary; }
[color="success"] { color: @color-success; }
[color="warning"] { color: @color-warning; }
[color="error"] { color: @color-error; }
[color="info"] { color: @color-info; }
[color="disable"] { color: @color-disable; }
[color="price"] { color: @color-price; }
[color="white"] { color: @color-white; }
[color="black"] { color: @color-black; }
[color="grey"] { color: @color-grey; }

例：

<!-- 此时颜色为@color-error -->
<div class="color-primary" color="error">一段文字</div>

文字

字号 .f[num]

数值：

  1. 8-20
  2. 20-30(偶数)
/* font-size */
.f8 { font-size: 8px; }
.f9 { font-size: 9px; }
.f10 { font-size: 10px; }
.f11 { font-size: 11px; }
.f12 { font-size: 12px; }
...
.f30 { font-size: 30px; }

例：

<div class="f20">一段文字</div>

粗细 .[lighter/bold/bolder]

/* font-weight */
.lighter { font-weight: lighter; }
.bold { font-weight: bold; }
.bolder { font-weight: bolder; }

例：

<div class="bold">一段文字</div>

斜体 .italic

/* italic */
.italic { font-style: italic; }

例：

<div class="italic">一段文字</div>

对齐方式 .text-[left/center/right]

/* text-align */
.text-left { text-align: left; }
.text-center { text-align: center; }
.text-right { text-align: right; }

例：

<div class="text-right">一段文字</div>

行高 .lh[num]

数值：

见尺寸数值说明

/* line-height */
.lh0 { line-height: 0px; }
.lh5 { line-height: 5px; }
.lh10 { line-height: 10px; }
...

例：

<div class="lh200">一段文字</div>

装饰线 .text-[underline/delete]

/* underline 下划线 */
.text-underline { text-decoration: underline; }

/* delete 删除线 */
.text-delete { text-decoration: line-through; }

例：

<div class="text-delete">一段文字</div>

强制换行/不换行 .text-[wrap/nowrap]

/* wrap */
.text-wrap {
  word-break: break-all;
  white-space: normal;
}

.text-nowrap {
  word-break: break-all;
  white-space: nowrap;
}

例：

<!-- 换行 -->
<div class="w50 text-wrap">一段文字一段文字一段文字</div> 
<!-- 不换行 -->
<div class="w50 text-nowrap">一段文字一段文字一段文字</div>

文字省略（...） .text-ellipsis

需要设置宽度

/* text-ellipsis */
.text-ellipsis {
  word-break: break-all;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

例：

<!-- 超出部分显示... -->
<div class="w50 text-ellipsis">一段文字一段文字一段文字</div>

垂直对齐 .v-[top/middle/bottom]

/*垂直对齐*/
.v-top { vertical-align: top; }
.v-middle { vertical-align: middle; }
.v-bottom { vertical-align: bottom; }
<div>
  123
  <div class="inline-block h50 w50 b1 v-top"></div>
  321
</div>

盒模型尺寸

盒模型类型 .[border-box/content-box]

设置盒模型类型为怪异盒模型/标准盒模型

/* box-sizing */
.border-box { box-sizing: border-box; }
.content-box { box-sizing: content-box; }
<!-- 包含内边距和边框 -->
<div class="w50 h50 pd10 b1 border-box">border-box</div>
<!-- 不包含内边距和边框 -->
<div class="w50 h50 pd10 b1 content-box">content-box</div>

外边距 .[m/mt/mb/ml/mr] [num]

外边距：.m[num] 上外边距：.mt[num] 下外边距：.mb[num] 左外边距：.ml[num] 右外边距：.mr[num]

数值：

见尺寸数值说明，margin值可为负数

权重：

  1. mt/mb/ml/mr > m
  2. 数值越大权重越大
  3. 负数>正数

例

<!-- 此时mt为5 -->
<div class="m10 mt5"></div> 

<!-- 此时mt为10 -->
<div class="mt10 mt5"></div> 

<!-- 此时mt为-10 -->
<div class="mt-10 mt5"></div>
解决父元素下掉问题 .m-fix
<!-- 此时父元素下掉10px -->
<div>
  <div class="mt10">
</div> 

<!-- 此时父元素不下掉 -->
<div class="m-fix">
  <div class="mt10">
</div>

内边距 .[pd/pt/pb/pl/pr] [num]

内边距：.pd[num] 上内边距：.pt[num] 下内边距：.pb[num] 左内边距：.pl[num] 右内边距：.pr[num]

数值：

见尺寸数值说明

权重：

  1. pt/pb/pl/pr > pd
  2. 数值越大权重越大

例

<!-- 此时pb为0 -->
<div class="p16 pb0"></div> 

<!-- 此时pt为10 -->
<div class="pt10 pt5"></div>

边框 .[b/bt/bb/bl/br] [num]

边框：.b[num] 上边框：.bt[num] 下边框：.bb[num] 左边框：.bl[num] 右边框：.br[num]

颜色： 见主题文件

数值： 0、1、2

权重：

  1. bt/bb/bl/br > b
  2. 数值越大权重越大

例

<div class="b1 bl2 bb0"></div>

边框圆角 .radius[缺省/num]

设置边框圆角

数值： 0-10，缺省表示使用主题文件数值

<!-- 4像素圆角 -->
<div class="w50 h50 b1 radius4"></div>

宽 .w[num]

数值：

见尺寸数值说明

例

<!-- 宽200px -->
<div class="w200 b1">一段文字</div>

宽(%) .w[num]p

数值：

5%——100%, 按5%递增

例

<!-- 宽20% -->
<div class="w20p b1">一段文字</div>

高 .h[num]

数值：

见尺寸数值说明

例

<!-- 高100px -->
<div class="h100 b1">一段文字</div>

高(%) .h[num]p

数值：

5%——100%, 按5%递增

例

<!-- 高50% -->
<div class="h50p b1"> 一段文字</div>

特殊值 .[full/full-width/full-height]

.full 等同于 .w100p.h100p .full-width 等同于 .w100p .full-height 等同于 .h100p

<div class="full"></div>
<div class="full-width"></div>
<div class="full-height"></div>

常规布局

Display(显示) .[none/inline/block/inline-block]

<!-- 不显示 -->
<div class="none"></div> 

<!-- 内联元素 -->
<div class="inline"></div> 

<!-- 块元素 -->
<div class="block"></div> 

<!-- 内联块元素 -->
<div class="inline-block"></div>

hidden(不可见) [visible="false"]

通过设置visibility实现，注意与.none的区别

<!-- 不可见 -->
<div visible="false"></div>

Position(定位) .[relative/absolute/fixed/sticky]

.relative { position: relative; }
.absolute { position: absolute; }
.fixed { position: fixed; }
.sticky { position: sticky; }

例

<!-- 相对定位 -->
<div class="relative"></div> 

<!-- 绝对定位 -->
<div class="absolute"></div> 

<!-- 相对窗口固定 -->
<div class="fixed"></div> 

<!-- 粘性 -->
<div class="sticky"></div>

预设位置： 需配合定位使用

上下左右：

.top { top: 0; }
.bottom { bottom: 0; }
.left { left: 0; }
.right { right: 0; }

例：

<div class="relative">
  <!-- 处于父元素左上方，距离左上各10px -->
  <div class="absolute top left mt10 ml10"></div> 
</div>

水平垂直居中：

.center {
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

例：

<div class="relative">
  <!-- 相对父元素水平、垂直居中 -->
  <div class="absolute center"></div> 
</div>

浮动 .[fl/fr]

.fl { float: left; }
.fr { float: right; }

例

<!-- 左浮动 -->
<div>
  <div class="fl w100 h100 b1"></div> 
  <div class="fl w100 h100 b1"></div> 
  <div class="fl w100 h100 b1"></div> 
  <div class="fl w100 h100 b1"></div> 
</div>

<!-- 右浮动 -->
<div>
  <div class="fr w100 h100"></div> 
  <div class="fr w100 h100"></div> 
  <div class="fr w100 h100"></div> 
  <div class="fr w100 h100"></div> 
</div>

清浮动 .clear

.clear {
  overflow: hidden;
  clear: both;
}

例

<div class="clear">
  <div class="fl w100 h100 b1"></div> 
  <div class="fl w100 h100 b1"></div> 
  <div class="fl w100 h100 b1"></div> 
  <div class="fl w100 h100 b1"></div> 
</div>

<div class="clear">
  <div class="fr w100 h100 b1"></div> 
  <div class="fr w100 h100 b1"></div> 
  <div class="fr w100 h100 b1"></div> 
  <div class="fr w100 h100 b1"></div> 
</div>
BFC（块级格式化上下文） .hidden

解决问题：

  1. 元素浮动造成父元素高度塌陷
  2. 相邻元素之间垂直外边距发生折叠

使用.hidden创建BFC

.hidden { overflow: hidden; }
<!-- 此时margin折叠 -->
<div class="m10">111</div>
<div class="m10">222</div>

<!-- 此时margin不折叠 -->
<div class="hidden">
  <div class="m10">111</div>
</div>
<div class="hidden">
  <div class="m10">222</div>
</div>

溢出(overflow) .[hidden/scroll/scroll-y/scroll-x]

.hidden { overflow: hidden; }
.scroll { overflow: auto; }
.scroll-y {
  overflow-x: hidden;
  overflow-y: auto;
}
.scroll-x {
  overflow-x: auto;
  overflow-y: hidden;
}

例

<!-- 内容会被修剪，并且其余内容是不可见的 -->
<div class="w50 h50 hidden text-nowrap">
  <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Sapiente sed, nulla, assumenda consequuntur accusamus a earum, est vitae quia expedita reprehenderit autem praesentium eius officia aut? Deleniti illo ut minus?</p>
  <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Sapiente sed, nulla, assumenda consequuntur accusamus a earum, est vitae quia expedita reprehenderit autem praesentium eius officia aut? Deleniti illo ut minus?</p>
</div>

<!-- 如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容。 -->
<div class="w50 h50 scroll text-nowrap">
  <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Sapiente sed, nulla, assumenda consequuntur accusamus a earum, est vitae quia expedita reprehenderit autem praesentium eius officia aut? Deleniti illo ut minus?</p>
  <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Sapiente sed, nulla, assumenda consequuntur accusamus a earum, est vitae quia expedita reprehenderit autem praesentium eius officia aut? Deleniti illo ut minus?</p>
  <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Sapiente sed, nulla, assumenda consequuntur accusamus a earum, est vitae quia expedita reprehenderit autem praesentium eius officia aut? Deleniti illo ut minus?</p>
  <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Sapiente sed, nulla, assumenda consequuntur accusamus a earum, est vitae quia expedita reprehenderit autem praesentium eius officia aut? Deleniti illo ut minus?</p>
  <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Sapiente sed, nulla, assumenda consequuntur accusamus a earum, est vitae quia expedita reprehenderit autem praesentium eius officia aut? Deleniti illo ut minus?</p>
</div>

<!-- 横向隐藏，纵向auto -->
<div class="w50 h50 scroll-y text-nowrap">
  <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Sapiente sed, nulla, assumenda consequuntur accusamus a earum, est vitae quia expedita reprehenderit autem praesentium eius officia aut? Deleniti illo ut minus?</p>
  <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Sapiente sed, nulla, assumenda consequuntur accusamus a earum, est vitae quia expedita reprehenderit autem praesentium eius officia aut? Deleniti illo ut minus?</p>
  <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Sapiente sed, nulla, assumenda consequuntur accusamus a earum, est vitae quia expedita reprehenderit autem praesentium eius officia aut? Deleniti illo ut minus?</p>
  <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Sapiente sed, nulla, assumenda consequuntur accusamus a earum, est vitae quia expedita reprehenderit autem praesentium eius officia aut? Deleniti illo ut minus?</p>
  <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Sapiente sed, nulla, assumenda consequuntur accusamus a earum, est vitae quia expedita reprehenderit autem praesentium eius officia aut? Deleniti illo ut minus?</p>
</div>

<!-- 纵向隐藏，横向auto -->
<div class="w50 h50 scroll-x text-nowrap">
  <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Sapiente sed, nulla, assumenda consequuntur accusamus a earum, est vitae quia expedita reprehenderit autem praesentium eius officia aut? Deleniti illo ut minus?</p>
  <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Sapiente sed, nulla, assumenda consequuntur accusamus a earum, est vitae quia expedita reprehenderit autem praesentium eius officia aut? Deleniti illo ut minus?</p>
  <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Sapiente sed, nulla, assumenda consequuntur accusamus a earum, est vitae quia expedita reprehenderit autem praesentium eius officia aut? Deleniti illo ut minus?</p>
  <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Sapiente sed, nulla, assumenda consequuntur accusamus a earum, est vitae quia expedita reprehenderit autem praesentium eius officia aut? Deleniti illo ut minus?</p>
  <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Sapiente sed, nulla, assumenda consequuntur accusamus a earum, est vitae quia expedita reprehenderit autem praesentium eius officia aut? Deleniti illo ut minus?</p>
</div>

flex布局 .flex

.flex { display: flex; }

例

<div class="flex">
  <button> btn1</button>
  <button> btn2</button>
  <button> btn3</button>
</div>

容器-主轴纵向 .flex-col

.flex-col { flex-direction: column; }

例

<div class="flex flex-col">
  <button> btn1</button>
  <button> btn2</button>
  <button> btn3</button>
</div>

容器-反向排序 .flex-reverse

配合.flex、.flex-col使用

<!-- 从左往右排序 -->
<div class="flex"></div>

<!-- 从右往左排序 -->
<div class="flex flex-reverse"></div>

<!-- 从上往下排序 -->
<div class="flex flex-col"></div>

<!-- 从下往上排序 -->
<div class="flex flex-col flex-reverse"></div>

容器-换行 .flex-wrap

.flex-wrap { flex-wrap: wrap; }

容器-主轴对齐 .flex-[start/center/end/between/around]

.flex-start { justify-content: flex-start; }
.flex-center { justify-content: center; }
.flex-end { justify-content: flex-end; }
.flex-between { justify-content: space-between; }
.flex-around { justify-content: space-around; }

容器-垂直主轴对齐 .flex-[vstart/vcenter/vend/vbaseline]

.flex-vstart { align-items: flex-start; }
.flex-vcenter { align-items: center; }
.flex-vend { align-items: flex-end; }
/* 第一行文字基准线对齐 */
.flex-vbaseline { align-items: baseline; }

容器-轴线对齐 .flex-container-[start/center/end/between/around]

当存在多条轴线时, 容器对齐方式

.flex-container-start { align-content: flex-start; }
.flex-container-center { align-content: center; }
.flex-container-end { align-content: flex-end; }
.flex-container-between { align-content: space-between; }
.flex-container-around { align-content: space-around; }

成员-垂直主轴对齐 .flex-item-[vstart/vcenter/vend/vbaseline/vstretch]

.flex-item-vstart { align-self: flex-start; }
.flex-item-vcenter { align-self: center; }
.flex-item-vend { align-self: flex-end; }
.flex-item-vbaseline { align-self: baseline; }
/* 不设置高度时生效 */
.flex-item-vstretch { align-self: stretch; }

成员-扩张 .grow[1/2/3]

定义成员的扩张比例

.grow1 { flex-grow: 1; }
.grow2 { flex-grow: 2; }
.grow3 { flex-grow: 3; }
.flex-item-full

相当于 .grow1

.flex-item-full { flex: 1 1; }

成员-不收缩 .shrink0

定义成员的收缩比例为0

.shrink0 { flex-shrink: 0; }

grid布局 .grid

网格布局

.grid { display: grid; }

容器-划分网格（固定列数） .grow-[num]

将容器均等划分为固定num列，自动填充若干行的网格

数值： 2-7

例

<!-- 3列2行 3*2网格 -->
<div class="grid grid-3">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
  <div>5</div>
</div>

容器-划分网格（固定列宽） .grow-n-[num]

将容器根据列宽与容器宽度划分n列，自动填充若干行的网格

数值：

见尺寸数值说明

例

<!-- 根据容器宽度自动划分n列（此处3列），每列60px -->
<div class="w200 grid grid-n-60">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
  <div>5</div>
</div>

容器-划分网格（固定列、行数） .grow-[x]-[y]

将容器均等划分为 x*y 的网格

数值：

最大支持7*7的网格

例

<!-- 2列3行 2*3网格 -->
<div class="grid grid-2-3">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
  <div>5</div>
</div>

容器-纵向排列 .grid-col

需固定行数才可生效

例

<!-- 纵向填充的 2*3网格 -->
<div class="grid grid-2-3 grid-col">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
  <div>5</div>
</div>

容器-网格间距 .grid-gap[0]

网格水平与垂直间距

数值： 尺寸数值说明（40px以内）

例

<!-- 网格间距10px -->
<div class="w100 h150 grid grid-2-3 grid-gap10">
  <div class="w100p h100p">1</div>
  <div class="w100p h100p">2</div>
  <div class="w100p h100p">3</div>
  <div class="w100p h100p">4</div>
  <div class="w100p h100p">5</div>
</div>
网格水平间距 .grid-col-gap[num]

用法、数值同.grid-gap

例

<!-- 网格间距10px -->
<div class="w100 h150 grid grid-2-3 grid-col-gap10">
  <div class="w100p h100p">1</div>
  <div class="w100p h100p">2</div>
  <div class="w100p h100p">3</div>
  <div class="w100p h100p">4</div>
  <div class="w100p h100p">5</div>
</div>
网格垂直间距 .grid-row-gap[num]

用法、数值同.grid-gap

例

<div class="w100 h150 grid grid-2-3 grid-row-gap10">
  <div class="w100p h100p">1</div>
  <div class="w100p h100p">2</div>
  <div class="w100p h100p">3</div>
  <div class="w100p h100p">4</div>
  <div class="w100p h100p">5</div>
</div>

容器-网格水平对齐 .grid-[start/center/end]

网格水平对齐方式

/* 左对齐 */
.grid-start { justify-items: start; }
/* 居中 */
.grid-center { justify-items: center; }
/* 右对齐 */
.grid-end { justify-items: end; }

例

<div class="w100 h150 grid grid-2-3 grid-center">
  <div class="w100p h100p">1</div>
  <div class="w100p h100p">2</div>
  <div class="w100p h100p">3</div>
  <div class="w100p h100p">4</div>
  <div class="w100p h100p">5</div>
</div>

容器-网格垂直对齐 .grid-[vstart/vcenter/vend/vbaseline]

网格垂直对齐方式

/* 顶部对齐 */
.grid-vstart { align-items: start; }
/* 垂直居中 */
.grid-vcenter { align-items: center; }
/* 底部对齐 */
.grid-vend { align-items: end; }
/* 首行文字对齐 */
.grid-vbaseline { align-items: baseline; }

例

<div class="w100 h150 grid grid-2-3 grid-vcenter">
  <div class="w100p h100p">1</div>
  <div class="w100p h100p">2</div>
  <div class="w100p h100p">3</div>
  <div class="w100p h100p">4</div>
  <div class="w100p h100p">5</div>
</div>

容器-容器水平对齐 .grid-container-[start/center/end/between/around]

当容器水平空间剩余时，水平对齐方式，此时水平间距会失效

/* 左对齐 */
.grid-container-start { justify-content: start; }
/* 居中 */
.grid-container-center { justify-content: center; }
/* 右对齐 */
.grid-container-end { justify-content: end; }
/* 两端对齐 */
.grid-container-between { justify-content: space-between; }
/* 等间距 */
.grid-container-around { justify-content: space-around; }

例

<div class="w100 h150 grid grid-n-30 grid-container-between">
  <div class="w30 h50 b1">1</div>
  <div class="w30 h50 b1">2</div>
  <div class="w30 h50 b1">3</div>
  <div class="w30 h50 b1">4</div>
  <div class="w30 h50 b1">5</div>
</div>

成员-网格水平对齐 .grid-item-[start/center/end]

单独处理某网格水平对齐方式

/* 左对齐 */
.grid-item-start { justify-self: start; }
/* 居中 */
.grid-item-center { justify-self: center; }
/* 右对齐 */
.grid-item-end { justify-self: end; }

例

<div class="w200 h150 grid grid-2-3 grid-end">
  <div class="w50 h50 b1 grid-item-start">1</div>
  <div class="w50 h50 b1">2</div>
  <div class="w50 h50 b1">3</div>
  <div class="w50 h50 b1">4</div>
  <div class="w50 h50 b1">5</div>
</div>

成员-网格垂直对齐 .grid-item-[vstart/vcenter/vend]

单独处理某网格垂直对齐方式

/* 顶部对齐 */
.grid-item-vstart { align-self: start; }
/* 垂直居中 */
.grid-item-vcenter { align-self: center; }
/* 底部对齐 */
.grid-item-vend { align-self: end; }

例

<div class="w200 h200 grid grid-2-3 grid-vstart">
  <div class="w50 h50 b1 grid-item-vend">1</div>
  <div class="w50 h50 b1">2</div>
  <div class="w50 h50 b1">3</div>
  <div class="w50 h50 b1">4</div>
  <div class="w50 h50 b1">5</div>
</div>

交互

指针类型(cursor) .[pointer/wait/not-allow/move/help]

变更指针类型

/* 手指 */
.pointer { cursor: pointer; }
/* 转圈 */
.wait { cursor: wait; }
/* 禁止 */
.not-allow { cursor: not-allowed; }
/* 十字 */
.move { cursor: move; }
/* 问号 */
.help { cursor: help; }

例

<div class="m20 pointer">手指</div>
<div class="m20 wait">转圈</div>
<div class="m20 not-allow">禁止</div>
<div class="m20 move">十字</div>
<div class="m20 help">问号</div>

禁止选中文本 .select-none

/* 禁止用户选中文本 */
.select-none { user-select: none; }

例

<div class="select-none">无法选中的文本</div>

不透明度 .opacity[缺省/num]

设置元素不透明度%

数值: 0、10、20、30、40...90，缺省表示使用主题文件数值

例

<!-- 设置主题文件中的不透明度 -->
<div class="w50 h50 bg-000 opacity"></div>
<!-- 设置不透明度50% -->
<div class="w50 h50 bg-000 opacity50"></div>

快速设置hover后变为100%的opacity [opacity=[缺省/num]]

设置元素不透明度%，hover后为100%

数值: 0、10、20、30、40...90，缺省表示使用主题文件数值

例

<!-- 设置主题文件中的不透明度，hover后100% -->
<div class="w50 h50 bg-000" opacity></div>
<!-- 设置不透明度50%，hover后100% -->
<div class="w50 h50 bg-000" opacity="50"></div>

投影 .box-shadow

为元素设置投影

数值： 见主题文件

/* 投影 */
.box-shadow { box-shadow: @box-shadow; }

例

<div class="w50 h50 m20 box-shadow"></div>

生成圆形 .circle

将元素转变为圆

<!-- 50*50的圆形 -->
<div class="w50 h50 bg-000 circle"></div>

旋转 [deg="num"]

以元素中心为轴心旋转一个角度

数值：

  1. -45~45：精度为1
  2. -180~-45，,5~180：精度为5
<!-- 顺时针10° -->
<div class="w50 h50 bg-000" deg="10"></div>

<!-- 逆时针17° -->
<div class="w50 h50 bg-000" deg="-17"></div>

样式重写

文档完善中...

五、常见问题

请求异常未进入回调/进入成功回调

  • 检查src/api/api.ts中responseInterceptors函数（集中式错误处理）是否拦截或抛出异常

六、变更记录

版本 更新日期 变更内容
0.1.5 2022-06-24 第一次更新
0.1.6 2022-06-28 添加 [color="color"]
0.1.7 2022-06-28 添加 [opacity=[num]]

Readme

Keywords

Package Sidebar

Install

npm i bs-component-js

Weekly Downloads

313

Version

0.1.11-beta1

License

MIT

Unpacked Size

567 kB

Total Files

53

Last publish

Collaborators

  • natsumesu
Try on RunKit
Report malware