飞立 plui

飞立 plui · 示例页

版本 0.1.0 · 产物 dist/css/plui.css · 交互依赖 src/common.js（sx 函数库）与 src/plui.js

白底黑线的极简风格 本框架只使用黑、白与灰阶：正文 #000，次级文字 #666 / #999，背景 #fff，分隔与边框一律 1px 纯黑实线； 圆角一律 0，不使用阴影、渐变与彩色块。图标全部由纯 CSS 线条或 Unicode 几何字符（▸ ▾ ■ □）绘制，不引入任何图标字体或图片资源。

容器与栅格

五档响应式：xs 基线 <576px，sm ≥576px，md ≥768px，lg ≥992px，xl ≥1200px，xxl ≥1400px。下面三列在 xs 下各占满一行，md 起各占三分之一。

.plui-col-12 .plui-col-md-4
.plui-col-12 .plui-col-md-4
.plui-col-12 .plui-col-md-4
6 / 3
6 / 3
6 / 3
6 / 3
lg 起 8 列
lg 起 4 列

偏移与间距：下面第一列用 .plui-offset-md-2 往右挪两列，行间距用 .plui-g-3。

8 列 + 2 列偏移

组件

按钮

实心 / 描边 / 幽灵三种变体，含 hover、focus、active、disabled 状态。

表单控件

输入框、下拉、复选、单选、开关与输入组。

辅助说明文字使用 .plui-form-text。
https://

标签页

切换逻辑由 src/plui.js 实现，只依赖 common.js 提供的 sx。

第一个标签的内容。切换后本页的 .plui-tab-pane 会切换 .active 类。

第二个标签的内容。

第三个标签的内容。

折叠面板

data-plui-accordion="single" 表示同一组内互斥展开；下面的第二组允许多开。

默认收起，点击标题展开。指示符用 Unicode 几何字符 ▸ / ▾ 实现。

这一组互斥，展开第二项会自动收起第一项。

这一组没有 single 标记，多个面板可以同时展开。

提示框 · 徽标 · 面包屑 · 分页

基础提示框 提示框只有边框与文字层级，没有彩色底块。
可关闭的提示框 关闭按钮用 data-plui-dismiss="alert"。

新 Beta

下拉菜单与模态框

下拉与模态的开关同样由 src/plui.js 处理。

模态框标题

模态框由 src/plui.js 控制显隐，按 Esc 或点击右上角关闭按钮可关闭。

卡片

卡片标题

副标题

卡片内容区域。

纯卡片

没有页脚的第二张卡片。

反色卡片

黑底白字，仍然只用黑白两色。

表格

示例数据表
编号名称断点状态
01xs< 576px基线
02sm≥ 576px启用
03md≥ 768px启用
04lg≥ 992px启用
05xl≥ 1200px启用
06xxl≥ 1400px启用

工具类

m / p 间距、文本对齐与灰阶、边框、背景、弹性布局与显隐。断点变体写作 .plui-属性-断点-值，例如 .plui-mt-md-3、.plui-d-md-none。

黑底白字 浅灰底 白底黑框 次级文字 #666 更弱文字 #999
间距工具类示例：这一块用了 .plui-mt-3 .plui-p-3 .plui-bg-light。

只在小屏显示、大屏隐藏：

这段在 md 以下显示（.plui-d-block .plui-d-md-none）。
这段只在 md 及以上显示（.plui-d-none .plui-d-md-block）。