Css 帮助类(CssHelper)
# Css 帮助类
前端框架中预定义了一些常用的 css 帮助类，所有代码都在packages/styles/_helper.scss (opens new window)文件中，可以满足大部分简单的样式需求~
# 文本颜色
dy-text-info
dy-text-primary
dy-text-success
dy-text-warning
dy-text-danger
dy-text-white
<p class="dy-text-info">dy-text-info</p>
<p class="dy-text-primary">dy-text-primary</p>
<p class="dy-text-success">dy-text-success</p>
<p class="dy-text-warning">dy-text-warning</p>
<p class="dy-text-danger">dy-text-danger</p>
<p class="dy-text-white dy-bg-info">dy-text-white</p>
1
2
3
4
5
6
2
3
4
5
6
# 文本对齐(align)
居左 dy-text-left
居中 dy-text-center
居右 dy-text-right
<p class="dy-text-left dy-text-primary">居左 dy-text-left</p>
<p class="dy-text-center dy-text-success">居中 dy-text-center</p>
<p class="dy-text-right dy-text-warning">居右 dy-text-right</p>
1
2
3
2
3
# 文本加粗
正常
加粗dy-text-bold
<p class="dy-text-primary">正常</p>
<p class="dy-text-bold dy-text-primary">加粗dy-text-bold</p>
1
2
2
# 字体大小
注意
支持 1-50px
dy-size-10
dy-size-20
dy-size-30
<div class="dy-size-10">dy-size-10</div>
<div class="dy-size-20">dy-size-20</div>
<div class="dy-size-30">dy-size-30</div>
1
2
3
2
3
# 背景颜色
dy-bg-info
dy-bg-primary
dy-bg-success
dy-bg-warning
dy-bg-danger
<p class="dy-bg-info dy-text-white">dy-bg-info</p>
<p class="dy-bg-primary dy-text-white">dy-bg-primary</p>
<p class="dy-bg-success dy-text-white">dy-bg-success</p>
<p class="dy-bg-warning dy-text-white">dy-bg-warning</p>
<p class="dy-bg-danger dy-text-white">dy-bg-danger</p>
1
2
3
4
5
2
3
4
5
# 内边距(padding)
注意
以下所有内边距都支持从 1-30px
完整内边距(p 表示 padding)
dy-p-1
dy-p-5
dy-p-10
dy-p-30
<p class="dy-p-1 dy-bg-info dy-text-white">dy-p-1</p>
<p class="dy-p-5 dy-bg-primary dy-text-white">dy-p-5</p>
<p class="dy-p-10 dy-bg-success dy-text-white">dy-p-10</p>
<p class="dy-p-30 dy-bg-warning dy-text-white">dy-p-30</p>
1
2
3
4
2
3
4
上内边距(t 表示 top)
dy-p-t-1
dy-p-t-5
dy-p-t-10
dy-p-t-30
<p class="dy-p-t-1 dy-bg-info dy-text-white">dy-p-t-1</p>
<p class="dy-p-t-5 dy-bg-primary dy-text-white">dy-p-t-5</p>
<p class="dy-p-t-10 dy-bg-success dy-text-white">dy-p-t-10</p>
<p class="dy-p-t-30 dy-bg-warning dy-text-white">dy-p-t-30</p>
1
2
3
4
2
3
4
下内边距(b 表示 bottom)
将上内边距的 t 换成 b~
左内边距(l 表示 left)
将上内边距的 t 换成 l~
右内边距(r 表示 right)
将上内边距的 t 换成 r~
组合内边距
dy-p-t-15 dy-p-l-30
<p class="dy-p-t-15 dy-p-l-30 dy-bg-primary dy-text-white">
dy-p-t-15 dy-p-l-30
</p>
1
2
3
2
3
# 外边距(margin)
外边距用户与内边距相同，只是把 dy-p-5 换成 dy-m-5 即可~
# 阴影
简单阴影效果
<div class="dy-box-shadow dy-m-30 dy-p-30">简单阴影效果</div>
1