G-UI 是为贴合我个人的需求而制作,并应用到此站点。
颜色
背景 文本 边框 Class 示例 Class 示例 Class 示例 主色 .g-theme-1
文本 .g-text-theme-1
文本 .g-border-theme-1
.g-theme-2
文本 .g-text-theme-2
文本 .g-border-theme-2
.g-theme-3
文本 .g-text-theme-3
文本 .g-border-theme-3
.g-theme-4
文本 .g-text-theme-4
文本 .g-border-theme-4
.g-theme-5
.g-theme
文本 .g-text-theme-5
.g-text-theme
文本 .g-border-theme-5
.g-border-theme
.g-theme-6
文本 .g-text-theme-6
文本 .g-border-theme-6
.g-theme-7
文本 .g-text-theme-7
文本 .g-border-theme-7
.g-theme-8
文本 .g-text-theme-8
文本 .g-border-theme-8
.g-theme-9
文本 .g-text-theme-9
文本 .g-border-theme-9
强调色 .g-accent-1
文本 .g-text-accent-1
文本 .g-border-accent-1
.g-accent-2
文本 .g-text-accent-2
文本 .g-border-accent-2
.g-accent-3
文本 .g-text-accent-3
文本 .g-border-accent-3
.g-accent-4
文本 .g-text-accent-4
文本 .g-border-accent-4
.g-accent-5
.g-accent-hue
文本 .g-text-accent-5
.g-text-accent
文本 .g-border-accent-5
.g-border-accent
.g-accent-6
文本 .g-text-accent-6
文本 .g-border-accent-6
.g-accent-7
文本 .g-text-accent-7
文本 .g-border-accent-7
.g-accent-8
文本 .g-text-accent-8
文本 .g-border-accent-8
.g-accent-9
文本 .g-text-accent-9
文本 .g-border-accent-9
中性色 .g-white
文本 .g-text-white
文本 .g-border-white
.g-grey-1
文本 .g-text-grey-1
文本 .g-border-grey-1
.g-grey-2
文本 .g-text-grey-2
文本 .g-border-grey-2
.g-grey-3
文本 .g-text-grey-3
文本 .g-border-grey-3
.g-grey-4
文本 .g-text-grey-4
文本 .g-border-grey-4
.g-grey-5
.g-grey
文本 .g-text-grey-5
.g-text-grey
文本 .g-border-grey-5
.g-border-grey
.g-grey-6
文本 .g-text-grey-6
文本 .g-border-grey-6
.g-grey-7
文本 .g-text-grey-7
文本 .g-border-grey-7
.g-grey-8
文本 .g-text-grey-8
文本 .g-border-grey-8
.g-grey-9
文本 .g-text-grey-9
文本 .g-border-grey-9
.g-black
文本 .g-text-black
文本 .g-border-black
成功色 .g-success-1
文本 .g-text-success-1
文本 .g-border-success-1
.g-success-2
文本 .g-text-success-2
文本 .g-border-success-2
.g-success-3
文本 .g-text-success-3
文本 .g-border-success-3
.g-success-4
文本 .g-text-success-4
文本 .g-border-success-4
.g-success-5
.g-success
文本 .g-text-success-5
.g-text-success
文本 .g-border-success-5
.g-border-success
.g-success-6
文本 .g-text-success-6
文本 .g-border-success-6
.g-success-7
文本 .g-text-success-7
文本 .g-border-success-7
.g-success-8
文本 .g-text-success-8
文本 .g-border-success-8
.g-success-9
文本 .g-text-success-9
文本 .g-border-success-9
警告色 .g-warning-1
文本 .g-text-warning-1
文本 .g-border-warning-1
.g-warning-2
文本 .g-text-warning-2
文本 .g-border-warning-2
.g-warning-3
文本 .g-text-warning-3
文本 .g-border-warning-3
.g-warning-4
文本 .g-text-warning-4
文本 .g-border-warning-4
.g-warning-5
.g-warning
文本 .g-text-warning-5
.g-text-warning
文本 .g-border-warning-5
.g-border-warning
.g-warning-6
文本 .g-text-warning-6
文本 .g-border-warning-6
.g-warning-7
文本 .g-text-warning-7
文本 .g-border-warning-7
.g-warning-8
文本 .g-text-warning-8
文本 .g-border-warning-8
.g-warning-9
文本 .g-text-warning-9
文本 .g-border-warning-9
错误色 .g-error-1
文本 .g-text-error-1
文本 .g-border-error-1
.g-error-2
文本 .g-text-error-2
文本 .g-border-error-2
.g-error-3
文本 .g-text-error-3
文本 .g-border-error-3
.g-error-4
文本 .g-text-error-4
文本 .g-border-error-4
.g-error-5
.g-error
文本 .g-text-error-5
.g-text-error
文本 .g-border-error-5
.g-border-error
.g-error-6
文本 .g-text-error-6
文本 .g-border-error-6
.g-error-7
文本 .g-text-error-7
文本 .g-border-error-7
.g-error-8
文本 .g-text-error-8
文本 .g-border-error-8
.g-error-9
文本 .g-text-error-9
文本 .g-border-error-9
色相
CSS 变量 默认值 主色 --g-theme-hue
80
强调色 --g-accent-hue
256
中性色 --g-grey-hue
var(--g-theme-hue)
成功色 --g-success-hue
140
警告色 --g-warning-hue
56
错误色 --g-error-hue
4
饱和度
CSS 变量 默认值 中性色 --g-grey-saturation
1%
其他颜色 --g-theme-saturation
80%
明度
CSS 变量 默认值 亮色 暗色 白色 --g-white-lightness
100%
4%
黑色 --g-black-lightness
0%
98%
其他颜色 --g-lightness-1
91%
17%
--g-lightness-2
78%
28%
--g-lightness-3
66%
39%
--g-lightness-4
55%
49%
--g-lightness-5
45%
59%
--g-lightness-6
35%
68%
--g-lightness-7
25%
77%
--g-lightness-8
16%
85%
--g-lightness-9
8%
92%
透明度
Class CSS 变量 默认值 示例 .g-opacity-1
--g-opacity-1
8%
文本 .g-opacity-2
--g-opacity-2
16%
文本 .g-opacity-3
--g-opacity-3
25%
文本 .g-opacity-4
--g-opacity-4
35%
文本 .g-opacity-5
--g-opacity-5
45%
文本 .g-opacity-6
--g-opacity-6
55%
文本 .g-opacity-7
--g-opacity-7
66%
文本 .g-opacity-8
--g-opacity-8
78%
文本 .g-opacity-9
--g-opacity-9
91%
文本
响应式
断点分类 最小宽度 CSS xs
0rem
@media (min-width: 0rem)
sm
30rem
@media (min-width: 30rem)
md
40rem
@media (min-width: 40rem)
lg
60rem
@media (min-width: 60rem)
xl
80rem
@media (min-width: 80rem)
2xl
100rem
@media (min-width: 100rem)
3xl
120rem
@media (min-width: 120rem)
4xl
150rem
@media (min-width: 150rem)
5xl
180rem
@media (min-width: 180rem)
栅格
Class CSS 变量 默认值 .g-row
.g-col-xs-1
.g-col-sm-1
.g-col-md-1
.g-col-lg-1
.g-col-xl-1
.g-col-2xl-1
.g-col-3xl-1
.g-col-4xl-1
.g-col-5xl-1
--g-row-1
1fr
.g-col-xs-2
.g-col-sm-2
.g-col-md-2
.g-col-lg-2
.g-col-xl-2
.g-col-2xl-2
.g-col-3xl-2
.g-col-4xl-2
.g-col-5xl-2
--g-row-2
repeat(2, 1fr)
.g-col-xs-3
.g-col-sm-3
.g-col-md-3
.g-col-lg-3
.g-col-xl-3
.g-col-2xl-3
.g-col-3xl-3
.g-col-4xl-3
.g-col-5xl-3
--g-row-3
repeat(3, 1fr)
.g-col-xs-4
.g-col-sm-4
.g-col-md-4
.g-col-lg-4
.g-col-xl-4
.g-col-2xl-4
.g-col-3xl-4
.g-col-4xl-4
.g-col-5xl-4
--g-row-4
repeat(4, 1fr)
.g-col-xs-5
.g-col-sm-5
.g-col-md-5
.g-col-lg-5
.g-col-xl-5
.g-col-2xl-5
.g-col-3xl-5
.g-col-4xl-5
.g-col-5xl-5
--g-row-5
repeat(5, 1fr)
.g-col-xs-6
.g-col-sm-6
.g-col-md-6
.g-col-lg-6
.g-col-xl-6
.g-col-2xl-6
.g-col-3xl-6
.g-col-4xl-6
.g-col-5xl-6
--g-row-6
repeat(6, 1fr)
.g-col-xs-7
.g-col-sm-7
.g-col-md-7
.g-col-lg-7
.g-col-xl-7
.g-col-2xl-7
.g-col-3xl-7
.g-col-4xl-7
.g-col-5xl-7
--g-row-7
repeat(7, 1fr)
.g-col-xs-8
.g-col-sm-8
.g-col-md-8
.g-col-lg-8
.g-col-xl-8
.g-col-2xl-8
.g-col-3xl-8
.g-col-4xl-8
.g-col-5xl-8
--g-row-8
repeat(8, 1fr)
.g-col-xs-9
.g-col-sm-9
.g-col-md-9
.g-col-lg-9
.g-col-xl-9
.g-col-2xl-9
.g-col-3xl-9
.g-col-4xl-9
.g-col-5xl-9
--g-row-9
repeat(9, 1fr)
.g-col-xs-10
.g-col-sm-10
.g-col-md-10
.g-col-lg-10
.g-col-xl-10
.g-col-2xl-10
.g-col-3xl-10
.g-col-4xl-10
.g-col-5xl-10
--g-row-10
repeat(10, 1fr)
.g-col-xs-11
.g-col-sm-11
.g-col-md-11
.g-col-lg-11
.g-col-xl-11
.g-col-2xl-11
.g-col-3xl-11
.g-col-4xl-11
.g-col-5xl-11
--g-row-11
repeat(11, 1fr)
.g-col-xs-12
.g-col-sm-12
.g-col-md-12
.g-col-lg-12
.g-col-xl-12
.g-col-2xl-12
.g-col-3xl-12
.g-col-4xl-12
.g-col-5xl-12
--g-row-12
repeat(12, 1fr)
示例
g-col-xs-12 g-col-lg-4
g-col-xs-12 g-col-lg-8
<div class="g-row">
<div class="g-col-xs-12 g-col-lg-4 g-theme-4 g-text-center">g-col-xs-12<br/>g-col-lg-4</div>
<div class="g-col-xs-12 g-col-lg-8 g-theme-5 g-text-center">g-col-xs-12<br/>g-col-lg-8</div>
</div>
等分列
Class CSS 变量 默认值 .g-row-xs-1
.g-row-sm-1
.g-row-md-1
.g-row-lg-1
.g-row-xl-1
.g-row-2xl-1
.g-row-3xl-1
.g-row-4xl-1
.g-row-5xl-1
--g-col-1
span 1
.g-row-xs-2
.g-row-sm-2
.g-row-md-2
.g-row-lg-2
.g-row-xl-2
.g-row-2xl-2
.g-row-3xl-2
.g-row-4xl-2
.g-row-5xl-2
--g-col-2
span 2
.g-row-xs-3
.g-row-sm-3
.g-row-md-3
.g-row-lg-3
.g-row-xl-3
.g-row-2xl-3
.g-row-3xl-3
.g-row-4xl-3
.g-row-5xl-3
--g-col-3
span 3
.g-row-xs-4
.g-row-sm-4
.g-row-md-4
.g-row-lg-4
.g-row-xl-4
.g-row-2xl-4
.g-row-3xl-4
.g-row-4xl-4
.g-row-5xl-4
--g-col-4
span 4
.g-row-xs-5
.g-row-sm-5
.g-row-md-5
.g-row-lg-5
.g-row-xl-5
.g-row-2xl-5
.g-row-3xl-5
.g-row-4xl-5
.g-row-5xl-5
--g-col-5
span 5
.g-row-xs-6
.g-row-sm-6
.g-row-md-6
.g-row-lg-6
.g-row-xl-6
.g-row-2xl-6
.g-row-3xl-6
.g-row-4xl-6
.g-row-5xl-6
--g-col-6
span 6
.g-row-xs-7
.g-row-sm-7
.g-row-md-7
.g-row-lg-7
.g-row-xl-7
.g-row-2xl-7
.g-row-3xl-7
.g-row-4xl-7
.g-row-5xl-7
--g-col-7
span 7
.g-row-xs-8
.g-row-sm-8
.g-row-md-8
.g-row-lg-8
.g-row-xl-8
.g-row-2xl-8
.g-row-3xl-8
.g-row-4xl-8
.g-row-5xl-8
--g-col-8
span 8
.g-row-xs-9
.g-row-sm-9
.g-row-md-9
.g-row-lg-9
.g-row-xl-9
.g-row-2xl-9
.g-row-3xl-9
.g-row-4xl-9
.g-row-5xl-9
--g-col-9
span 9
.g-row-xs-10
.g-row-sm-10
.g-row-md-10
.g-row-lg-10
.g-row-xl-10
.g-row-2xl-10
.g-row-3xl-10
.g-row-4xl-10
.g-row-5xl-10
--g-col-10
span 10
.g-row-xs-11
.g-row-sm-11
.g-row-md-11
.g-row-lg-11
.g-row-xl-11
.g-row-2xl-11
.g-row-3xl-11
.g-row-4xl-11
.g-row-5xl-11
--g-col-11
span 11
.g-row-xs-12
.g-row-sm-12
.g-row-md-12
.g-row-lg-12
.g-row-xl-12
.g-row-2xl-12
.g-row-3xl-12
.g-row-4xl-12
.g-row-5xl-12
--g-col-12
span 12
示例
g-col
g-col
g-col
g-col
<div class="g-row-xs-2 g-row-lg-4">
<div class="g-theme-4 g-text-center">g-col</div>
<div class="g-theme-5 g-text-center">g-col</div>
<div class="g-theme-6 g-text-center">g-col</div>
<div class="g-theme-7 g-text-center">g-col</div>
</div>
隐藏
up
在指定宽度及以上的设备上隐藏 down
在指定宽度及以下的设备上隐藏
Class xs
sm
md
lg
xl
2xl
3xl
4xl
5xl
.g-hidden-xs-up
隐藏 隐藏 隐藏 隐藏 隐藏 隐藏 隐藏 隐藏 隐藏 .g-hidden-sm-up
可见 隐藏 隐藏 隐藏 隐藏 隐藏 隐藏 隐藏 隐藏 .g-hidden-md-up
可见 可见 隐藏 隐藏 隐藏 隐藏 隐藏 隐藏 隐藏 .g-hidden-lg-up
可见 可见 可见 隐藏 隐藏 隐藏 隐藏 隐藏 隐藏 .g-hidden-xl-up
可见 可见 可见 可见 隐藏 隐藏 隐藏 隐藏 隐藏 .g-hidden-2xl-up
可见 可见 可见 可见 可见 隐藏 隐藏 隐藏 隐藏 .g-hidden-3xl-up
可见 可见 可见 可见 可见 可见 隐藏 隐藏 隐藏 .g-hidden-4xl-up
可见 可见 可见 可见 可见 可见 可见 隐藏 隐藏 .g-hidden-5xl-up
可见 可见 可见 可见 可见 可见 可见 可见 隐藏 .g-hidden-xs-down
隐藏 可见 可见 可见 可见 可见 可见 可见 可见 .g-hidden-sm-down
隐藏 隐藏 可见 可见 可见 可见 可见 可见 可见 .g-hidden-md-down
隐藏 隐藏 隐藏 可见 可见 可见 可见 可见 可见 .g-hidden-lg-down
隐藏 隐藏 隐藏 隐藏 可见 可见 可见 可见 可见 .g-hidden-xl-down
隐藏 隐藏 隐藏 隐藏 隐藏 可见 可见 可见 可见 .g-hidden-2xl-down
隐藏 隐藏 隐藏 隐藏 隐藏 隐藏 可见 可见 可见 .g-hidden-3xl-down
隐藏 隐藏 隐藏 隐藏 隐藏 隐藏 隐藏 可见 可见 .g-hidden-4xl-down
隐藏 隐藏 隐藏 隐藏 隐藏 隐藏 隐藏 隐藏 可见 .g-hidden-5xl-down
隐藏 隐藏 隐藏 隐藏 隐藏 隐藏 隐藏 隐藏 隐藏
尺寸
Class CSS 变量 默认值 width height xs
md
.g-w-1
.g-h-1
--g-size-1
1px
0.125rem
.g-w-2
.g-h-2
--g-size-2
0.125rem
0.25rem
.g-w-3
.g-h-3
--g-size-3
0.25rem
0.375rem
.g-w-4
.g-h-4
--g-size-4
0.375rem
0.5rem
.g-w-5
.g-h-5
--g-size-5
0.5rem
0.625rem
.g-w-6
.g-h-6
--g-size-6
0.625rem
0.75rem
.g-w-7
.g-h-7
--g-size-7
0.75rem
0.875rem
.g-w-8
.g-h-8
--g-size-8
0.875rem
1rem
.g-w-9
.g-h-9
--g-size-9
1rem
1.25rem
.g-w-10
.g-h-10
--g-size-10
1.25rem
1.625rem
.g-w-11
.g-h-11
--g-size-11
1.625rem
2.125rem
.g-w-12
.g-h-12
--g-size-12
2.125rem
2.75rem
.g-w-13
.g-h-13
--g-size-13
2.75rem
3.5rem
.g-w-14
.g-h-14
--g-size-14
3.5rem
4.375rem
.g-w-15
.g-h-15
--g-size-15
4.375rem
5.375rem
.g-w-16
.g-h-16
--g-size-16
5.375rem
6.5rem
.g-w-17
.g-h-17
--g-size-17
6.5rem
7.75rem
.g-w-18
.g-h-18
--g-size-18
7.75rem
9.125rem
.g-w-19
.g-h-19
--g-size-19
9.125rem
10.625rem
.g-w-20
.g-h-20
--g-size-20
10.625rem
12.25rem
.g-w-21
.g-h-21
--g-size-21
12.25rem
14rem
.g-w-22
.g-h-22
--g-size-22
14rem
15.875rem
.g-w-23
.g-h-23
--g-size-23
15.875rem
17.875rem
.g-w-24
.g-h-24
--g-size-24
17.875rem
20rem
方向
全 默认 左右 / X 轴 x
上下 / Y 轴 y
上 t
下 b
左 l
右 r
间距
Class CSS 变量 默认值 padding margin gap .g-p-1
.g-px-1
.g-py-1
.g-pt-1
.g-pr-1
.g-pb-1
.g-pl-1
.g-m-1
.g-mx-1
.g-my-1
.g-mt-1
.g-mr-1
.g-mb-1
.g-ml-1
.g-g-1
.g-gx-1
.g-gy-1
--g-spacing-1
var(--g-size-1)
.g-p-2
.g-px-2
.g-py-2
.g-pt-2
.g-pr-2
.g-pb-2
.g-pl-2
.g-m-2
.g-mx-2
.g-my-2
.g-mt-2
.g-mr-2
.g-mb-2
.g-ml-2
.g-g-2
.g-gx-2
.g-gy-2
--g-spacing-2
var(--g-size-2)
.g-p-3
.g-px-3
.g-py-3
.g-pt-3
.g-pr-3
.g-pb-3
.g-pl-3
.g-m-3
.g-mx-3
.g-my-3
.g-mt-3
.g-mr-3
.g-mb-3
.g-ml-3
.g-g-3
.g-gx-3
.g-gy-3
--g-spacing-3
var(--g-size-3)
.g-p-4
.g-px-4
.g-py-4
.g-pt-4
.g-pr-4
.g-pb-4
.g-pl-4
.g-m-4
.g-mx-4
.g-my-4
.g-mt-4
.g-mr-4
.g-mb-4
.g-ml-4
.g-g-4
.g-gx-4
.g-gy-4
--g-spacing-4
var(--g-size-4)
.g-p-5
.g-px-5
.g-py-5
.g-pt-5
.g-pr-5
.g-pb-5
.g-pl-5
.g-m-5
.g-mx-5
.g-my-5
.g-mt-5
.g-mr-5
.g-mb-5
.g-ml-5
.g-g-5
.g-gx-5
.g-gy-5
--g-spacing-5
var(--g-size-5)
.g-p-6
.g-px-6
.g-py-6
.g-pt-6
.g-pr-6
.g-pb-6
.g-pl-6
.g-m-6
.g-mx-6
.g-my-6
.g-mt-6
.g-mr-6
.g-mb-6
.g-ml-6
.g-g-6
.g-gx-6
.g-gy-6
--g-spacing-6
var(--g-size-6)
.g-p-7
.g-px-7
.g-py-7
.g-pt-7
.g-pr-7
.g-pb-7
.g-pl-7
.g-m-7
.g-mx-7
.g-my-7
.g-mt-7
.g-mr-7
.g-mb-7
.g-ml-7
.g-g-7
.g-gx-7
.g-gy-7
--g-spacing-7
var(--g-size-7)
.g-p-8
.g-px-8
.g-py-8
.g-pt-8
.g-pr-8
.g-pb-8
.g-pl-8
.g-m-8
.g-mx-8
.g-my-8
.g-mt-8
.g-mr-8
.g-mb-8
.g-ml-8
.g-g-8
.g-gx-8
.g-gy-8
--g-spacing-8
var(--g-size-8)
.g-p-9
.g-px-9
.g-py-9
.g-pt-9
.g-pr-9
.g-pb-9
.g-pl-9
.g-m-9
.g-mx-9
.g-my-9
.g-mt-9
.g-mr-9
.g-mb-9
.g-ml-9
.g-g-9
.g-gx-9
.g-gy-9
--g-spacing-9
var(--g-size-9)
.g-p-10
.g-px-10
.g-py-10
.g-pt-10
.g-pr-10
.g-pb-10
.g-pl-10
.g-m-10
.g-mx-10
.g-my-10
.g-mt-10
.g-mr-10
.g-mb-10
.g-ml-10
.g-g-10
.g-gx-10
.g-gy-10
--g-spacing-10
var(--g-size-11)
.g-p-11
.g-px-11
.g-py-11
.g-pt-11
.g-pr-11
.g-pb-11
.g-pl-11
.g-m-11
.g-mx-11
.g-my-11
.g-mt-11
.g-mr-11
.g-mb-11
.g-ml-11
.g-g-11
.g-gx-11
.g-gy-11
--g-spacing-11
var(--g-size-11)
.g-p-12
.g-px-12
.g-py-12
.g-pt-12
.g-pr-12
.g-pb-12
.g-pl-12
.g-m-12
.g-mx-12
.g-my-12
.g-mt-12
.g-mr-12
.g-mb-12
.g-ml-12
.g-g-12
.g-gx-12
.g-gy-12
--g-spacing-12
var(--g-size-12)
图标
G-UI 内置了 Material Icons ,你可以点击前往复制图标代码。
用法:在 <i>
元素中添加类 .g-icon
和图标代码即可。
search home menu close settings add delete chevron_left chevron_right check
<i class="g-icon">search</i>
<i class="g-icon">home</i>
<i class="g-icon">menu</i>
<i class="g-icon">close</i>
<i class="g-icon">settings</i>
<i class="g-icon">add</i>
<i class="g-icon">delete</i>
<i class="g-icon">chevron_left</i>
<i class="g-icon">chevron_right</i>
<i class="g-icon">check</i>
排版
在文章的父元素上添加 .g-typo
类,就能优化整篇文章的显示样式,包括表格。
<div class="g-typo">
<h1>标题</h1>
<p>正文</p>
<table>
...
</table>
</div>
字体
Roboto 是 Material Design 使用的标准字体,G-UI 框架内置了该字体文件。
字号
Class CSS 变量 默认值 示例 .g-text-1
--g-font-size-1
var(--g-size-6)
文本 Display 1 .g-text-2
--g-font-size-2
var(--g-size-7)
文本 Display 2 .g-text-3
--g-font-size-3
var(--g-size-8)
文本 Display 3 .g-text-4
--g-font-size-4
var(--g-size-9)
文本 Display 4 .g-text-5
--g-font-size-5
var(--g-size-10)
文本 Display 5 .g-text-6
--g-font-size-6
var(--g-size-111)
文本 Display 6 .g-text-7
--g-font-size-7
var(--g-size-12)
文本 Display 7 .g-text-8
--g-font-size-8
var(--g-size-13)
文本 Display 8 .g-text-9
--g-font-size-9
var(--g-size-14)
文本 Display 9
字重
Class CSS 变量 默认值 示例 .g-font-weight-1
--g-font-weight-1
100
文本 Display 1 .g-font-weight-2
--g-font-weight-2
300
文本 Display 2 .g-font-weight-3
--g-font-weight-3
400
文本 Display 3 .g-font-weight-4
--g-font-weight-4
500
文本 Display 4 .g-font-weight-5
--g-font-weight-5
700
文本 Display 5 .g-font-weight-6
--g-font-weight-6
900
文本 Display 6
行距
Class CSS 变量 默认值 --g-line-height-increment
0.75rem
.g-line-height-0
1
.g-line-height-1
--g-line-height-1
calc(var(--g-size-5) + var(--g-line-height-increment))
.g-line-height-2
--g-line-height-2
calc(var(--g-size-6) + var(--g-line-height-increment))
.g-line-height-3
--g-line-height-3
calc(var(--g-size-7) + var(--g-line-height-increment))
.g-line-height-4
--g-line-height-4
calc(var(--g-size-8) + var(--g-line-height-increment))
.g-line-height-5
--g-line-height-5
calc(var(--g-size-9) + var(--g-line-height-increment))
.g-line-height-6
--g-line-height-6
calc(var(--g-size-10) + var(--g-line-height-increment))
.g-line-height-7
--g-line-height-7
calc(var(--g-size-11) + var(--g-line-height-increment))
.g-line-height-8
--g-line-height-8
calc(var(--g-size-12) + var(--g-line-height-increment))
.g-line-height-9
--g-line-height-9
calc(var(--g-size-13) + var(--g-line-height-increment))
表格
在 <table>
元素上添加以下类,即可对应高亮。
Class 功能 .g-table-highlight
行列同时高亮 .g-table-highlight-x
行高亮 .g-table-highlight-y
列高亮
示例
月份 销售额 利润 1月 ¥120,000 ¥30,000 2月 ¥150,000 ¥45,000 3月 ¥180,000 ¥60,000
<div class="g-table">
<table class="g-table-highlight">
<thead>
<tr>
<th>月份</th>
<th>销售额</th>
<th>利润</th>
</tr>
</thead>
<tbody>
<tr>
<td>1月</td>
<td>¥120,000</td>
<td>¥30,000</td>
</tr>
<tr>
<td>2月</td>
<td>¥150,000</td>
<td>¥45,000</td>
</tr>
<tr>
<td>3月</td>
<td>¥180,000</td>
<td>¥60,000</td>
</tr>
</tbody>
</table>
</div>
圆角
Class CSS 变量 默认值 示例 .g-radius-0
none
.g-radius-1
.g-radius-t-1
.g-radius-r-1
.g-radius-b-1
.g-radius-l-1
--g-radius-1
var(--g-size-2)
.g-radius-2
.g-radius-t-2
.g-radius-r-2
.g-radius-b-2
.g-radius-l-2
--g-radius-2
var(--g-size-5)
.g-radius-3
.g-radius-t-3
.g-radius-r-3
.g-radius-b-3
.g-radius-l-3
--g-radius-3
var(--g-size-8)
.g-radius-full
.g-radius-t-full
.g-radius-r-full
.g-radius-b-full
.g-radius-l-full
9999rem
阴影
Class CSS 变量 示例 .g-shadow-0
.g-shadow-1
--g-shadow-1
.g-shadow-2
--g-shadow-2
.g-shadow-3
--g-shadow-3
边框
Class CSS 变量 默认值 示例 .g-border-0
none
.g-border-1
.g-border-t-1
.g-border-r-1
.g-border-b-1
.g-border-l-1
.g-border-x-1
.g-border-y-1
--g-border-1
1px
.g-border-2
.g-border-t-2
.g-border-r-2
.g-border-b-2
.g-border-l-2
.g-border-x-2
.g-border-y-2
--g-border-2
0.125rem
.g-border-3
.g-border-t-3
.g-border-r-3
.g-border-b-3
.g-border-l-3
.g-border-x-3
.g-border-y-3
--g-border-3
0.25rem
动画
类型 CSS 变量 默认值 缓动曲线 --g-easing
cubic-bezier(0.2, 0, 0, 1)
持续时间 --g-duration-1
150ms
--g-duration-2
300ms
--g-duration-3
700ms
过渡 --g-transition-1
all var(--g-duration-1) var(--g-easing)
--g-transition-2
all var(--g-duration-2) var(--g-easing)
--g-transition-3
all var(--g-duration-3) var(--g-easing)
预置动画 Class 示例 旋转 .g-animate-spin
refresh ping .g-animate-ping
favorite 弹跳 .g-animate-bounce
arrow_downward
按钮
为 <a>
或 <button>
元素添加类 .g-btn
即可获得文本按钮的样式。
类型 Buttonadd chevron_left ButtonButtonchevron_right
<!-- 文本按钮 -->
<button class="g-btn">Button</button>
<!-- 图标按钮 -->
<button class="g-btn g-btn-icon"><i class="g-icon">add</i></button>
<!-- 文本图标按钮 -->
<button class="g-btn"><i class="g-icon">chevron_left</i>Button</button>
<button class="g-btn">Button<i class="g-icon">chevron_right</i></button>
大小 ButtonButtonButtonButtonButtonButtonButtonButton
<!-- 常规按钮 -->
<button class="g-btn-1">Button</button>
<button class="g-btn-2">Button</button>
<button class="g-btn">Button</button>
<button class="g-btn-3">Button</button>
<!-- 全宽按钮 -->
<button class="g-btn-1 g-btn-block g-mt-6 g-mb-1">Button</button>
<button class="g-btn-2 g-btn-block g-my-1">Button</button>
<button class="g-btn g-btn-block g-my-1">Button</button>
<button class="g-btn-3 g-btn-block g-my-1" value="Button">Button</button>
样式 ButtonButtonButtonButtonButton
<!-- 默认 -->
<button class="g-btn">Button</button>
<!-- 填色 -->
<button class="g-btn g-theme">Button</button>
<!-- 阴影 -->
<button class="g-btn g-shadow-1">Button</button>
<!-- 边框 -->
<button class="g-btn g-border-3 g-border-theme">Button</button>
<!-- 圆角 -->
<button class="g-btn g-radius-full">Button</button>
禁用
在按钮上加上 disabled
属性即可禁用按钮。ButtonButtonButtonButton
<button class="g-btn" disabled>Button</button>
<button class="g-btn g-theme" disabled>Button</button>
<button class="g-btn g-shadow-1" disabled>Button</button>
<button class="g-btn g-border-2 g-border-theme" disabled>Button</button>
布局
G-UI 提供 4 种常见布局可引用。
在手机和平板上,抽屉栏默认收起隐藏。
在桌面设备上,抽屉栏默认展开显示。
上下布局
<body class="g-layout-tb">
<div id="g-topbar"></div>
<div id="g-main"></div>
</body>
左右布局
g-drawer-btn-fixed
可以使侧边栏按钮悬浮在页面左上角。在桌面设备上,抽屉栏按钮自动隐藏;在手机和平板上,抽屉栏按钮自动显示。
<body class="g-layout-lr">
<button class="g-btn-icon g-drawer-btn-fixed" id="g-drawer-btn">
<i class="g-icon" id="g-drawer-btn-icon">menu</i>
</button>
<div id="g-drawer"></div>
<div id="g-main"></div>
</body>
上左右布局
<body class="g-layout-tlr">
<div id="g-topbar">
<button id="g-drawer-btn" class="g-btn-icon">
<i id="g-drawer-btn-icon" class="g-icon">menu</i>
</button>
</div>
<div id="g-drawer"></div>
<div id="g-main"></div>
</body>
左上下布局
<body class="g-layout-ltb">
<div id="g-drawer"></div>
<div id="g-topbar">
<button id="g-drawer-btn" class="g-btn-icon">
<i id="g-drawer-btn-icon" class="g-icon">menu</i>
</button>
</div>
<div id="g-main"></div>
</body>
自适应布局
数量 Class x
y
2 .g-auto-x-fa
.g-auto-x-af
.g-auto-y-fa
.g-auto-y-af
3 .g-auto-x-faa
.g-auto-x-afa
.g-auto-x-aaf
.g-auto-y-faa
.g-auto-y-afa
.g-auto-x-aaf
4 .g-auto-x-faaa
.g-auto-x-afaa
.g-auto-x-aafa
.g-auto-x-aaaf
.g-auto-y-faaa
.g-auto-y-afaa
.g-auto-y-aafa
.g-auto-y-aaaf
示例
account_balance_wallet
现金
10.00 chevron_right
<a class="g-auto-x-afaa g-gx-5">
<i class="g-icon">account_balance_wallet</i>
<div>现金</div>
<div>10.00</div>
<i class="g-icon">chevron_right</i>
</a>
链接行
链接行会自动继承父元素圆角大小。
链接行 1 链接行 2
<a class="g-link-row">链接行 1</a>
<a class="g-link-row" selected>链接行 2</a>
列表
<ul class="g-list">
<li><a>列表 1</a></li>
<li><a>列表 2</a></li>
<li><a selected>列表 3</a></li>
</ul>
文本框
单行文本框
标签文本
帮助文本标签文本
帮助文本标签文本
帮助文本
<div class="g-textfield-1">
<label>标签文本</label>
<input type="text" placeholder="请输入内容" />
<span class="g-text-error">帮助文本</span>
</div>
<div class="g-textfield-2">
<label>标签文本</label>
<input type="text" placeholder="请输入内容" />
<span class="g-text-error">帮助文本</span>
</div>
<div class="g-textfield-3">
<label>标签文本</label>
<input type="text" placeholder="请输入内容" />
<span class="g-text-error">帮助文本</span>
</div>
<!-- 全宽禁用状态 -->
<div class="g-textfield g-textfield-block">
<input type="text" placeholder="请输入内容" disabled />
</div>
多行文本框
标签文本
帮助文本标签文本
帮助文本标签文本
帮助文本
<div class="g-textfield-1">
<label>标签文本</label>
<textarea placeholder="请输入内容" /></textarea>
<span class="g-text-error">帮助文本</span>
</div>
<div class="g-textfield-2">
<label>标签文本</label>
<textarea placeholder="请输入内容" /></textarea>
<span class="g-text-error">帮助文本</span>
</div>
<div class="g-textfield-3">
<label>标签文本</label>
<textarea placeholder="请输入内容" /></textarea>
<span class="g-text-error">帮助文本</span>
</div>
<!-- 全宽禁用状态 -->
<div class="g-textfield g-textfield-block">
<textarea placeholder="请输入内容" disabled /></textarea>
</div>
选择器
在 <select>
元素上添加类 g-select
即可为该元素赋予美化后的样式。
选择 1选择 2选择 3
<select class="g-select">
<option value="1" selected>选择 1</option>
<option value="2">选择 2</option>
<option value="3">选择 3</option>
</select>
全宽选择器
g-select-block
类可以拉伸到父元素的 100% 宽度,且变为块级(block)元素。
选择 1选择 2选择 3
<select class="g-select-block">
<option value="1" selected>选择 1</option>
<option value="2">选择 2</option>
<option value="3">选择 3</option>
</select>
禁用状态
在 select
元素上添加 disabled
属性,即可禁用选择器。
选择 1选择 2选择 3
<select class="g-select-block" disabled>
<option value="1" selected>选择 1</option>
<option value="2">选择 2</option>
<option value="3">选择 3</option>
</select>
多选框
[ ] 记住密码
<div class="g-checkbox">
<input type="checkbox">
<label>记住密码</label>
</div>
选项卡
下面是一个标准选项卡。
selected
– 默认激活状态。
disabled
– 禁用状态。
选项卡 1选项卡 2选项卡 3
选项卡 1 的内容
选项卡 2 的内容
选项卡 3 的内容
<div class="g-tab-group">
<div class="g-tab">
<button>选项卡 1</button>
<button selected>选项卡 2</button>
<button disabled>选项卡 3</button>
</div>
<div class="g-typo"><hr></div>
<div class="g-tab-content">选项卡 1 的内容</div>
<div class="g-tab-content">选项卡 2 的内容</div>
<div class="g-tab-content">选项卡 3 的内容</div>
</div>
对话框
delete
<button class="g-btn g-btn-icon" data-dialog-id="del" onclick="gDialogOpen('del')"><i class="g-icon">delete</i></button>
<div class="g-dialog g-px-9 g-py-8" id="del">
<div class="g-text-4 g-font-weight-5">确定删除?</div>
<div class="g-text-3 g-mt-2">删除后将不可恢复。</div>
<div class="g-text-right g-mt-4">
<button class="g-btn" onclick="gDialogClose('del')">再想想</button>
<button class="g-btn g-error g-ml-2">删除</button>
</div>
</div>
面包屑
把多个 a
标签放在一个面包屑容器 g-breadcrumb
内即可。当窗口宽度小于断点 sm
时,只保留最后一个。
[G-UI]()[组件]()[面包屑]()
<div class="g-breadcrumb">
<a>G-UI</a>
<a>组件</a>
<a>面包屑</a>
</div>
进度指示器
进度条
<div class="g-progress" value="60%"></div>
进度环
<div class="g-spinner"></div>
<div class="g-spinner" value="30%"></div>
<div class="g-spinner" value="60%"></div>
<div class="g-spinner" value="100%"></div>
文章大纲
<!-- 生成的大纲在这 -->
<div id="g-toc"></div>
<!-- 要识别文章放这 -->
<div id="g-article">文章内容</div>
图片查看器
<div id="g-gallery"><!-- 图片放这 --></div>
<div id="g-viewer">
<button class="g-btn-icon-dense" id="g-viewer-btn-close"><i class="g-icon">close</i></button>
<div id="g-viewer-toolbar">
<button class="g-btn-icon" id="g-viewer-btn-prev"><i class="g-icon">chevron_left</i></button>
<div id="g-viewer-label"></div>
<button class="g-btn-icon" id="g-viewer-btn-next"><i class="g-icon">chevron_right</i></button>
</div>
<img id="g-viewer-img">
<div id="g-viewer-mask"></div>
</div>
辅助类
对齐
文本对齐 Class 类名 居中对齐 g-text-center
左对齐 g-text-left
右对齐 g-text-right
元素对齐 Class 类名 水平居中 g-center
垂直居中 g-valign
元素水平垂直居中:
<!-- 垂直居中 -->
<div class="g-valign">
<!-- 水平居中 -->
<div class="g-center"></div>
</div>
快速浮动
浮动 Class 类名 向左浮动 g-float-left
向右浮动 g-float-right
文本自动截断
g-text-truncate
可以在文本长度超出限制时,自动截断,并用省略号代替。
这是一段非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常长的文字。
<p class="g-text-truncate">这是一段非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常长的文字。</p>
禁止被选中
g-no-select
可以使元素禁止被选中。
这段文字禁止被选中。
<p class="g-no-select">这段文字禁止被选中。</p>
纹理渐变
背景 Class 类名 示例 马赛克 g-texture-mosaic-1
g-texture-mosaic-2
点阵 g-texture-dot-1
g-texture-dot-2
渐变 g-transparent-gradient-t
g-transparent-gradient-b
g-transparent-gradient-l
g-transparent-gradient-r