PolyvUI 使用文档

# AtomCss 原子样式类

# 使用规则

# 数量不得超过3个

标签内的原子样式类不得超过3个，超过3个时需要命名 className 来写对应的样式。

<!-- Good -->
<div class="plv-w-100 plv-mb-20 plv-p-30">这是一行文本</div>

<!-- Bad -->
<div class="plv-w-100 plv-mb-20 plv-p-30 plv-text-center">这也是一行文本</div>

# 不得与其他非原子样式类同时使用

<!-- Bad -->
<div class="c-copy-channel__title plv-text-center">复制直播间</div>

注意，该规则在特殊情况下允许同时使用，如 className 是列表中多个地方使用，但其中一个的距离是不同。

<!-- OK -->
<div class="c-todo-item">to do 1</div>
<div class="c-todo-item plv-mb-20">to do 2</div>
<div class="c-todo-item">to do 3</div>
<div class="c-todo-item">to do 4</div>
<div class="c-todo-item">to do 5</div>

# 不得在项目或页面中定义原子样式类

<!-- Bad -->
<div class="p-share-setting__title p-share-setting__mgb20">分享标题</div>

# 引入方式

import 'polyv-ui/dist-admin/theme/atom-css.css';

# Clearfix 清除浮动

<div class="plv-clearfix">...</div>

# Display 属性

<div class="plv-d-none">...</div>
<div class="plv-d-inline">...</div>
<div class="plv-d-inline-block">...</div>
<div class="plv-d-block">...</div>
<div class="plv-d-table">...</div>
<div class="plv-d-table-cell">...</div>
<div class="plv-d-table-row">...</div>
<div class="plv-d-flex">...</div>
<div class="plv-d-inline-flex">...</div>

# Flex 流式布局

<!-- 流式水平布局 -->
<div class="plv-flex-row">...</div>
<!-- 流式水平反向布局 -->
<div class="plv-flex-row-reverse">...</div>
<!-- 流式垂直布局 -->
<div class="plv-flex-column">...</div>
<!-- 流式垂直反向布局 -->
<div class="plv-flex-column-reverse">...</div>
<!-- 流式垂直居中 -->
<div class="plv-flex-vertical-center">...</div>
<!-- 流式水平居中 -->
<div class="plv-flex-horizontal-center">...</div>
<!-- 流式水平垂直居中 -->
<div class="plv-flex-vh-center">...</div>

# Float 浮动

<!-- 左浮动 -->
<div class="plv-float-left">...</div>
<!-- 右浮动 -->
<div class="plv-float-right">...</div>
<!-- 不浮动 -->
<div class="plv-float-none">...</div>

# Overflow 溢出

该原子类控制 overflow、overflow-x、overflow-y 中的 auto、scroll、hidden。

<div class="plv-overflow-auto"></div>
<div class="plv-overflow-x-scroll"></div>
<div class="plv-overflow-y-hidden"></div>

# Margin 外边距

该原子类控制 margin 以及 left、right、top、bottom 四个方向上的外边距距离。数值范围为 0 ~ 100 的 10 的倍数，额外距离：8px、16px、24px。

<div class="plv-m-auto"></div>
<div class="plv-ml-auto"></div>
<div class="plv-mr-auto"></div>
<div class="plv-mt-auto"></div>
<div class="plv-mb-auto"></div>
<div class="plv-m-0"></div>
<div class="plv-m-20"></div>
<div class="plv-ml-20"></div>
<div class="plv-mr-50"></div>
<div class="plv-mt-80"></div>
<div class="plv-mb-100"></div>

# Padding 内边距

该原子类控制 padding 以及 left、right、top、bottom 四个方向上的内边距距离。数值范围为 0 ~ 100 的 10 的倍数，额外距离：8px、16px、24px。

<div class="plv-p-0"></div>
<div class="plv-p-20"></div>
<div class="plv-pl-20"></div>
<div class="plv-pr-50"></div>
<div class="plv-pt-80"></div>
<div class="plv-pb-100"></div>

# Width 宽度

该原子类控制 width 的尺寸，数值范围为 10 ~ 100 之间 10 的倍数，以及 100 ~ 1000 之间 100 的倍数。

<div class="plv-w-10"></div>
<div class="plv-w-50"></div>
<div class="plv-w-100"></div>
<div class="plv-w-300"></div>

# Height 高度

该原子类控制 height 的尺寸，数值范围为 10 ~ 100 之间 10 的倍数，以及 100 ~ 1000 之间 100 的倍数。

<div class="plv-h-10"></div>
<div class="plv-h-50"></div>
<div class="plv-h-100"></div>
<div class="plv-h-300"></div>

# LineHeight 行高

该原子类控制 line-height 的尺寸，数值范围为 10 ~ 100 之间 10 的倍数，以及 100 ~ 1000 之间 100 的倍数。

<div class="plv-lh-10"></div>
<div class="plv-lh-50"></div>
<div class="plv-lh-100"></div>
<div class="plv-lh-300"></div>

# Border 边框

该原子类控制 border 的边框，包括上下左右方向的边框。

<div class="plv-border"></div>
<div class="plv-border-top"></div>
<div class="plv-border-dashed"></div>
<div class="plv-border-dashed-left"></div>

# Text 文本

.plv-text-center {
  text-align: center;
}
.plv-text-left {
  text-align: left;
}
.plv-text-right {
  text-align: right;
}
.plv-text-nowrap {
  white-space: nowrap;
}
/* 单行文本过长截断 */
.plv-text-truncate {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
/* 两行文本过长截断 */
.plv-text-multiline {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  text-overflow: ellipsis;
  overflow: hidden;
}
/* 文本加粗 */
.plv-text-bold {
  font-weight: bold;
}
.plv-text-lighter {
  font-weight: lighter;
}
/* 文本斜体 */
.plv-text-italic {
  font-style: italic;
}

# VerticalAlign 垂直对齐

.plv-align-baseline {
  vertical-align: baseline;
}
.plv-align-top {
  vertical-align: top;
}
.plv-align-middle {
  vertical-align: middle;
}
.plv-align-bottom {
  vertical-align: bottom;
}
.plv-align-text-top {
  vertical-align: text-top;
}
.plv-align-text-bottom {
  vertical-align: text-bottom;
}

# Position 定位

.plv-position-relative {
  position: relative;
}
.plv-position-absolute {
  position: absolute;
}
.plv-position-fixed {
  position: fixed;
}
.plv-position-static {
  position: static;
}

← ChoiceFile 选择文件 →