© 2025 积蒴一掷

粤ICP备2023006292号

开往-友链接力
内部的最后添加元素 `</span>，可以添加帮助文本，可以根据实际需求更改文本颜色。

用户名[ ] 帮助文本

<div class="g-textfield">
  <label>用户名</label>
  <input type="text"/>
  <span class="g-text-color-red">帮助文本</span>
</div>

禁用状态

在 input 元素上添加 disabled 属性，即可禁用文本框。

[ ]

<div class="g-textfield">
  <input type="text" placeholder="用户名" disabled/>
</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>

标签

为元素添加类 g-tag 即可获得标签的样式，仅 <a>、 <button> 才有点击样式。

标签[标签]()标签[标签]()标签

<span class="g-tag">标签</span>
<button class="g-tag g-color-theme">标签</button>
<a class="g-tag g-color-theme-second">标签</a>

<!-- 禁用状态 -->
<a class="g-tag g-color-theme" disabled>标签</a>
<button class="g-tag g-color-theme-second" disabled>标签</button>

小号标签

比普通标签稍小一点。在类后面添加 -dense 即可。

标签[标签]()标签[标签]()标签

<span class="g-tag-dense">标签</span>
<a class="g-tag-dense g-color-theme">标签</a>
<button class="g-tag-dense g-color-theme-second">标签</button>

<!-- 禁用状态 -->
<a class="g-tag-dense g-color-theme" disabled>标签</a>
<button class="g-tag-dense g-color-theme-second" disabled>标签</button>

选项卡

下面是一个标准选项卡。

  • 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-icon" data-dialog-id="del" onclick="gDialogOpen('del')"><i class="g-icon">delete</i></button>

<div class="g-dialog g-p-x-6 g-p-y-5" id="del">
  <div class="g-font-size-5">确定删除？</div>
  <div class="g-p-y-4">删除后将不可恢复。</div>

  <div class="g-text-right g-m-t-4">
    <button class="g-btn" onclick="gDialogClose('del')">再想想</button>
    <a class="g-btn g-color-red g-m-l-1">删除</a>
  </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>

响应式隐藏

这些工具类通过媒体查询实现针对不同设备隐藏内容。这些工具类包括：

  • g-hidden-{断点参数}：在指定宽度的设备上隐藏。
  • g-hidden-{断点参数}-up：在指定宽度及以上的设备上隐藏。
  • g-hidden-{断点参数}-down：在指定宽度及以下的设备上隐藏。
Class 类名0px<br/><br/>599px600px<br/><br/>839px840px<br/><br/>1199px1200px<br/><br/>1599px1600px<br/><br/>1999px2000px<br/><br/>∞
g-hidden-xs隐藏可见可见可见可见可见
g-hidden-sm可见隐藏可见可见可见可见
g-hidden-md可见可见隐藏可见可见可见
g-hidden-lg可见可见可见隐藏可见可见
g-hidden-xl可见可见可见可见隐藏可见
g-hidden-xxl可见可见可见可见可见隐藏
g-hidden-xs-up隐藏隐藏隐藏隐藏隐藏隐藏
g-hidden-sm-up可见隐藏隐藏隐藏隐藏隐藏
g-hidden-md-up可见可见隐藏隐藏隐藏隐藏
g-hidden-lg-up可见可见可见隐藏隐藏隐藏
g-hidden-xl-up可见可见可见可见隐藏隐藏
g-hidden-xxl-up可见可见可见可见可见隐藏
g-hidden-xs-down隐藏可见可见可见可见可见
g-hidden-sm-down隐藏隐藏可见可见可见可见
g-hidden-md-down隐藏隐藏隐藏可见可见可见
g-hidden-lg-down隐藏隐藏隐藏隐藏可见可见
g-hidden-xl-down隐藏隐藏隐藏隐藏隐藏可见
g-hidden-xxl-down隐藏隐藏隐藏隐藏隐藏隐藏

纹理渐变

背景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

发布时间

2024-01-22

修改时间

分类

文章

阅读量

标签: 编程

添加新评论