飞立（plui）组件清单
版本 0.3.0。所有类名统一 plui- 前缀，与 Bootstrap 的组件划分对齐，便于迁移认知。
状态标记：[JS] 表示需要 src/plui.js（依赖 src/common.js），其余为纯 CSS。
容器与栅格
| 类名 | 说明 |
|---|
.plui-container | 固定宽度容器，各断点最大宽度 540 / 720 / 960 / 1140 / 1320px |
.plui-container-fluid | 占满宽度的容器 |
.plui-row | 行，Flex 实现，12 列 |
.plui-col | 等分剩余空间的列 |
.plui-col-auto | 按内容宽度自适应 |
.plui-col-{1..12} | 占 n 列 |
.plui-col-{断点} | 在该断点起等分剩余空间 |
.plui-col-{断点}-{1..12} | 在该断点起占 n 列 |
.plui-offset-{0..11} | 偏移 n 列 |
.plui-offset-{断点}-{0..11} | 在该断点起偏移 n 列 |
.plui-g-{0..5} | 行列间距，档位同间距令牌 |
.plui-gx-{0..5} / .plui-gy-{0..5} | 只设列间距 / 行间距 |
<div class="plui-container">
<div class="plui-row g-3">
<div class="plui-col-12 plui-col-md-4">四分之一</div>
<div class="plui-col-12 plui-col-md-8">四分之三</div>
</div>
</div>
按钮
| 类名 | 说明 |
|---|
.plui-btn | 实心按钮：黑底白字 |
.plui-btn-outline | 描边按钮：白底黑框 |
.plui-btn-ghost | 幽灵按钮：无边框 |
.plui-btn-sm / .plui-btn-lg | 小号 / 大号 |
.plui-btn-block | 占满整行 |
.plui-btn-group | 按钮组（横排） |
.plui-btn-group-vertical | 按钮组（竖排） |
状态：:hover（黑白互换）、:focus-visible（2px 黑色描边）、:active、:disabled（按钮禁用统一用原生 disabled 属性，不另设类）。
<button class="plui-btn">保存</button>
<button class="plui-btn plui-btn-outline">取消</button>
<button class="plui-btn" disabled>不可用</button>
表单
| 类名 | 说明 |
|---|
.plui-form | 表单容器 |
.plui-form-group | 表单分组（带下边距） |
.plui-form-label | 标签，600 字重 |
.plui-form-label-plain | 弱化标签 |
.plui-form-control | 输入框 / 文本域 / 下拉的基础类 |
.plui-form-select | 下拉（在 control 基础上加右侧留白） |
.plui-form-control-sm / -lg | 小号 / 大号控件 |
.plui-form-control-plaintext | 只读文本展示 |
.plui-form-text | 控件下方的辅助说明 |
.plui-form-check | 复选 / 单选的一行 |
.plui-form-check-input | 复选 / 单选输入框（accent-color: #000） |
.plui-form-check-label | 复选 / 单选的文字 |
.plui-form-check-disabled | 禁用态容器 |
.plui-form-switch | 开关容器 |
.plui-form-switch | 开关外层 |
.plui-form-switch .plui-form-check-input | 开关本体（用原生 checkbox，滑块用伪元素画） |
.plui-input-group | 输入组：控件 + 前后缀 |
.plui-input-group-text | 输入组里的固定文本 |
<div class="plui-form-group">
<label class="plui-form-label" for="n">名称</label>
<input class="plui-form-control" id="n" type="text">
<small class="plui-form-text">说明文字</small>
</div>
导航
| 类名 | 说明 |
|---|
.plui-nav | 导航列表 |
.plui-nav-item | 导航项 |
.plui-nav-link | 导航链接，当前项加 .active |
.plui-navbar | 顶部导航栏 |
.plui-navbar-brand | 品牌区 |
.plui-navbar-nav | 导航栏里的导航列表 |
.plui-navbar-toggler | 折叠开关按钮 |
.plui-navbar-toggler-icon | 三条 1px 黑线画的图标 |
.plui-navbar-collapse | 可折叠区域，加 .show 展开 |
导航栏折叠是纯 CSS + data-plui-toggle="collapse" [JS]。
标签页 [JS]
| 类名 | 说明 |
|---|
.plui-nav-tabs | 标签条容器 |
.plui-nav-tabs-link | 单个标签，当前项加 .active |
.plui-tab-content | 面板容器 |
.plui-tab-pane | 单个面板，当前项加 .active |
切换由 data-plui-toggle="tab" + data-plui-target="#面板id" 触发。
折叠面板 [JS]
| 类名 | 说明 |
|---|
.plui-accordion | 容器，加 data-plui-accordion="single" 表示互斥 |
.plui-accordion-item | 单项 |
.plui-accordion-button | 标题按钮 |
.plui-accordion-indicator | 指示符（▸ / ▾） |
.plui-accordion-collapse | 折叠体，加 .show 展开 |
.plui-accordion-body | 折叠体内容 |
提示框
| 类名 | 说明 |
|---|
.plui-alert | 基础提示框 |
.plui-alert-heading | 标题行 |
.plui-alert-dismissible | 可关闭版（右侧留出关闭按钮位置） |
.plui-alert-close | 关闭按钮，配合 data-plui-dismiss="alert" [JS] |
.plui-alert-info / -warning / -danger / -success | 四个单色变体，靠边框粗细与底色深浅区分 |
卡片
| 类名 | 说明 |
|---|
.plui-card | 卡片外框 |
.plui-card-header / .plui-card-body / .plui-card-footer | 三段结构 |
.plui-card-title / .plui-card-subtitle | 标题与副标题 |
面包屑
| 类名 | 说明 |
|---|
.plui-breadcrumb | 容器 |
.plui-breadcrumb-item | 每一项 |
.plui-breadcrumb-link | 链接项 |
.plui-breadcrumb-item.active | 当前页，纯文本无下划线 |
分页
| 类名 | 说明 |
|---|
.plui-pagination | 容器 |
.plui-page-item | 条目 |
.plui-page-link | 链接 / 按钮本体 |
.plui-page-item.active | 当前页 |
.plui-page-item.disabled | 禁用 |
表格
| 类名 | 说明 |
|---|
.plui-table | 基础表格 |
.plui-table-bordered | 全边框 |
.plui-table-striped | 斑马纹（浅灰底） |
.plui-table-hover | 悬停高亮 |
.plui-table-sm | 紧凑行高 |
.plui-table-caption | 表说明 |
徽标
| 类名 | 说明 |
|---|
.plui-badge | 黑底白字小标签 |
.plui-badge-outline | 白底黑框版 |
下拉菜单 [JS]
| 类名 | 说明 |
|---|
.plui-dropdown | 容器 |
.plui-dropdown-toggle | 触发按钮，配合 data-plui-toggle="dropdown" |
.plui-dropdown-menu | 菜单面板，展开时加 .show |
.plui-dropdown-menu-end | 右对齐菜单 |
.plui-dropdown-item | 菜单项 |
.plui-dropdown-item.active | 当前项 |
.plui-dropdown-divider | 分隔线 |
模态框 [JS]
| 类名 | 说明 |
|---|
.plui-modal | 容器，展开时加 .show |
.plui-modal-dialog / .plui-modal-dialog-lg | 对话框与宽版 |
.plui-modal-content | 内容面板 |
.plui-modal-header / -body / -footer | 三段结构 |
.plui-modal-title | 标题 |
.plui-modal-close | 右上角关闭按钮，配合 data-plui-dismiss="modal" |
.plui-backdrop | 遮罩，由 JS 动态创建 |
列表组
<ul class="plui-list-group">
<li class="plui-list-group-item">第一条</li>
<li class="plui-list-group-item plui-active">当前项</li>
</ul>
进度条
<div class="plui-progress">
<div class="plui-progress-bar plui-progress-bar-75" style="width:75%">75%</div>
</div>
堆叠
<div class="plui-stack plui-stack-2">
<div>第一项</div>
<div>第二项</div>
</div>
轮播 [JS]
<div class="plui-carousel" data-plui-ride="carousel" data-plui-interval="6000">
<div class="plui-carousel-inner">
<div class="plui-carousel-item plui-carousel-item-active">第一张</div>
<div class="plui-carousel-item">第二张</div>
</div>
<button class="plui-carousel-control-prev" data-plui-slide="prev"><span class="plui-carousel-control-prev-icon"></span></button>
<button class="plui-carousel-control-next" data-plui-slide="next"><span class="plui-carousel-control-next-icon"></span></button>
<div class="plui-carousel-indicators">
<button class="plui-carousel-indicator plui-active" data-plui-slide="to" data-plui-slide-to="0"></button>
<button class="plui-carousel-indicator" data-plui-slide="to" data-plui-slide-to="1"></button>
</div>
</div>
吐司 [JS]
<div class="plui-toast-container" id="toasts"></div>
window.plui.toast.notify({ title: '提示', body: '正文', delay: 3000 });
工具提示与弹出框 [JS]
<span data-plui-tooltip="提示文字" data-plui-placement="top">悬停</span>
<button data-plui-toggle="popover" data-plui-target="#my-popover">弹出框</button>
加载态
<span class="plui-spinner"></span>
<div class="plui-skeleton plui-skeleton-text"></div>
离屏面板 Offcanvas [JS]
从屏幕四边滑出的抽屉，带遮罩、滚动条锁定与焦点管理。
| 类名 | 说明 |
|---|
.plui-offcanvas | 面板本体，默认隐藏 |
.plui-offcanvas-start / -end / -top / -bottom | 四个滑出方向 |
.plui-offcanvas-header / .plui-offcanvas-body / .plui-offcanvas-footer | 三段结构 |
.plui-offcanvas-title / .plui-offcanvas-close | 标题与关闭按钮 |
.plui-offcanvas-backdrop | 遮罩（JS 生成，无需手写） |
<button class="plui-btn" data-plui-toggle="offcanvas" data-plui-target="#my-offcanvas">打开</button>
<div class="plui-offcanvas plui-offcanvas-start" id="my-offcanvas" tabindex="-1" aria-labelledby="my-offcanvas-title">
<div class="plui-offcanvas-header">
<h5 class="plui-offcanvas-title" id="my-offcanvas-title">侧边抽屉</h5>
<button class="plui-offcanvas-close" data-plui-dismiss="offcanvas" aria-label="关闭">×</button>
</div>
<div class="plui-offcanvas-body">面板内容</div>
</div>
JS：new plui.Offcanvas(el)，show() / hide() / toggle() / dispose()；事件 show.bs.plui / shown.bs.plui / hide.bs.plui / hidden.bs.plui，另有 show.bs.plui.offcanvas 等组件专属事件。
无障碍：打开时焦点进入面板并锁在面板内（Tab 循环），Esc 关闭，关闭后焦点归还触发按钮。
滚动监听 ScrollSpy [JS]
滚动到指定区块时自动高亮对应导航项。
<nav class="plui-scrollspy-nav" data-plui-spy="#scroll-spy">
<a class="plui-scrollspy-link" href="#sec-1">第一节</a>
<a class="plui-scrollspy-link" href="#sec-2">第二节</a>
</nav>
<div id="sec-1" class="plui-scrollspy-section">…</div>
<div id="sec-2" class="plui-scrollspy-section">…</div>
JS：new plui.ScrollSpy(navEl)，refresh() / dispose()；命中项会加 .active 并写 aria-current="true"。
占位块 Placeholder
骨架屏占位，不依赖 JS。
| 类名 | 说明 |
|---|
.plui-placeholder | 占位块 |
.plui-placeholder-xs / -sm / -lg | 高度档位 |
.plui-placeholder-glow | 呼吸闪烁 |
.plui-placeholder-wave | 扫光 |
按钮组与输入组
| 类名 | 说明 |
|---|
.plui-btn-group / .plui-btn-group-vertical | 按钮组，横排 / 竖排 |
.plui-btn-group-lg / .plui-btn-group-sm | 尺寸档位 |
.plui-btn-check | 勾选式按钮组（配合 input[type=radio] / checkbox） |
.plui-input-group | 输入组 |
.plui-input-group-text | 前置 / 后置文本 |
.plui-input-group-check | 输入组内的勾选框 |
.plui-input-group-has-validation | 校验反馈定位 |
<div class="plui-btn-group" role="group" aria-label="视图切换">
<input class="plui-btn-check" type="radio" name="view" id="v1" checked>
<label class="plui-btn" for="v1">列表</label>
<input class="plui-btn-check" type="radio" name="view" id="v2">
<label class="plui-btn" for="v2">网格</label>
</div>
<div class="plui-input-group">
<span class="plui-input-group-text">@</span>
<input class="plui-form-control" type="text" aria-label="用户名">
<button class="plui-btn" type="button">搜索</button>
</div>
浮动标签
<div class="plui-form-floating">
<input class="plui-form-control" id="f1" placeholder="邮箱">
<label for="f1">邮箱</label>
</div>
输入框有值或获得焦点时标签上浮；标签通过 for 与控件关联，键盘与读屏均可正常定位。
导航变体
| 类名 | 说明 |
|---|
.plui-nav-underline | 下划线式导航（Bootstrap 5.3 风格） |
.plui-nav-fill | 等分填充导航 |
.plui-nav-tabs / .plui-nav-pills | 标签页 / 药丸式导航 |
图文元素
| 类名 | 说明 |
|---|
.plui-figure / .plui-figure-img / .plui-figure-caption | 图注 |
.plui-blockquote / .plui-blockquote-footer | 引用块 |
.plui-code / .plui-pre | 行内代码 / 代码块 |
.plui-kbd | 键盘按键 |
.plui-mark / .plui-mark-strong | 高亮 |
.plui-abbr | 缩写说明 |
.plui-initialism | 小型大写缩写 |
.plui-list-unstyled / .plui-list-inline | 列表样式（定义在 base 层） |
.plui-link-stretched / .plui-link-underline / .plui-link-underline-hover | 链接 |
.plui-small | 小字号 |
辅助类
| 类名 | 说明 |
|---|
.plui-ratio / .plui-ratio-1x1 / -4x3 / -16x9 / -21x9 | 比例盒 |
.plui-sticky-top / .plui-sticky-bottom | 粘性定位 |
.plui-fixed-top / .plui-fixed-bottom | 固定定位 |
.plui-clearfix | 清浮动 |
.plui-invisible / .plui-visible | 可见性 |
.plui-float-start / .plui-float-end | 浮动 |
.plui-user-select-none / .plui-user-select-all | 用户选择 |
.plui-pe-none / .plui-pe-auto | 指针事件 |
.plui-border-start / .plui-border-end | 方向边框 |
.plui-vh-100 / .plui-vw-100 / .plui-min-vh-100 | 视口尺寸 |
主题与偏好
| 位置 | 说明 |
|---|
data-plui-theme="dark" / ="light" | 手动指定主题，覆盖系统偏好 |
@media (prefers-color-scheme: dark) | 未指定主题时跟随系统 |
@media (prefers-reduced-motion: reduce) | 尊重「减少动效」偏好 |
@media (forced-colors: active) | Windows 高对比度模式适配 |
@media print | 打印样式：隐藏浮层、露出链接地址、避免卡片跨页截断 |
工具类
工具类在 v0.2.0 全面重做为 Tailwind 式原子类：8 个分类、8038 个类名（含断点变体），由 build/generators/ 下的刻度表生成。完整清单、刻度表与命名规则见 UTILITIES.md。
命名规则：.plui-{断点}:{属性}-{取值}，断点段放最前面。
| 分类 | 例子 |
|---|
| 间距 | .plui-p-4、.plui-mt-2、.plui-md:p-8、.plui-gap-3、.plui-space-y-2 |
| 颜色 | .plui-bg-gray-100、.plui-text-muted、.plui-border、.plui-text-red-600 |
| 排版 | .plui-text-3xl、.plui-font-medium、.plui-leading-tight、.plui-truncate |
| 布局 | .plui-flex、.plui-grid、.plui-hidden、.plui-w-1/2、.plui-absolute |
| 弹性与网格 | .plui-items-center、.plui-justify-between、.plui-grid-cols-3、.plui-col-span-2 |
| 边框 | .plui-border、.plui-border-t、.plui-rounded、.plui-rounded-full |
| 效果 | .plui-opacity-50、.plui-shadow-sm、.plui-transition、.plui-duration-300 |
| 交互 | .plui-cursor-pointer、.plui-pointer-events-none、.plui-sr-only |
v0.1.0 的旧工具类名（.plui-m-{0..5}、.plui-d-*、.plui-text-lg-start、.plui-mt-md-3 等）已全部移除，迁移对照见 README.md 与 DECISIONS.md。
附录：组件类名总表
下表由 build/check.mjs 校验：表中类名必须与 src/css/components/ 里的定义一一对应，缺一即检查失败。
| 源文件 | 类名数 | 类名 |
|---|
src/css/components/accordion.css | 9 | .plui-accordion .plui-accordion-body .plui-accordion-button .plui-accordion-collapse .plui-accordion-flush .plui-accordion-header .plui-accordion-indicator .plui-accordion-item .plui-collapse |
src/css/components/alert.css | 11 | .plui-alert .plui-alert-close .plui-alert-danger .plui-alert-dark .plui-alert-dismissible .plui-alert-heading .plui-alert-info .plui-alert-light .plui-alert-primary .plui-alert-success .plui-alert-warning |
src/css/components/badge.css | 8 | .plui-badge .plui-badge-danger .plui-badge-info .plui-badge-lg .plui-badge-outline .plui-badge-pill .plui-badge-success .plui-badge-warning |
src/css/components/breadcrumb.css | 4 | .plui-breadcrumb .plui-breadcrumb-divider .plui-breadcrumb-item .plui-breadcrumb-link |
src/css/components/button.css | 26 | .plui-btn .plui-btn-block .plui-btn-check .plui-btn-danger .plui-btn-dark .plui-btn-ghost .plui-btn-group .plui-btn-group-lg .plui-btn-group-sm .plui-btn-group-vertical .plui-btn-info .plui-btn-lg .plui-btn-light .plui-btn-link .plui-btn-outline .plui-btn-outline-danger .plui-btn-outline-info .plui-btn-outline-secondary .plui-btn-outline-success .plui-btn-outline-warning .plui-btn-primary .plui-btn-secondary .plui-btn-sm .plui-btn-success .plui-btn-warning .plui-disabled |
src/css/components/card.css | 16 | .plui-card .plui-card-body .plui-card-danger .plui-card-footer .plui-card-header .plui-card-horizontal .plui-card-img-bottom .plui-card-img-top .plui-card-info .plui-card-link .plui-card-primary .plui-card-subtitle .plui-card-success .plui-card-text .plui-card-title .plui-card-warning |
src/css/components/carousel.css | 14 | .plui-active .plui-carousel .plui-carousel-control-next .plui-carousel-control-next-icon .plui-carousel-control-prev .plui-carousel-control-prev-icon .plui-carousel-fade .plui-carousel-indicator .plui-carousel-indicators .plui-carousel-inner .plui-carousel-item .plui-carousel-item-active .plui-carousel-item-next .plui-carousel-item-prev |
src/css/components/dropdown.css | 7 | .plui-dropdown .plui-dropdown-divider .plui-dropdown-header .plui-dropdown-item .plui-dropdown-menu .plui-dropdown-menu-end .plui-dropdown-toggle |
src/css/components/form.css | 34 | .plui-btn .plui-form .plui-form-check .plui-form-check-disabled .plui-form-check-inline .plui-form-check-input .plui-form-check-label .plui-form-color .plui-form-control .plui-form-control-lg .plui-form-control-plaintext .plui-form-control-sm .plui-form-floating .plui-form-group .plui-form-label .plui-form-label-plain .plui-form-range .plui-form-row .plui-form-select .plui-form-select-lg .plui-form-select-sm .plui-form-switch .plui-form-text .plui-form-text-muted .plui-input-group .plui-input-group-check .plui-input-group-has-validation .plui-input-group-lg .plui-input-group-sm .plui-input-group-text .plui-invalid-feedback .plui-is-invalid .plui-is-valid .plui-valid-feedback |
src/css/components/icon.css | 9 | .plui-icon .plui-icon-fill-none .plui-icon-lg .plui-icon-pulse .plui-icon-sm .plui-icon-spin .plui-icon-stroke-1 .plui-icon-stroke-2 .plui-icon-xl |
src/css/components/list-group.css | 8 | .plui-active .plui-disabled .plui-list-group .plui-list-group-flush .plui-list-group-horizontal .plui-list-group-item .plui-list-group-item-action .plui-list-group-numbered |
src/css/components/modal.css | 19 | .plui-backdrop .plui-modal .plui-modal-body .plui-modal-close .plui-modal-content .plui-modal-dialog .plui-modal-dialog-centered .plui-modal-dialog-lg .plui-modal-dialog-scrollable .plui-modal-dialog-sm .plui-modal-dialog-xl .plui-modal-footer .plui-modal-fullscreen .plui-modal-fullscreen-lg .plui-modal-fullscreen-md .plui-modal-fullscreen-sm .plui-modal-fullscreen-xl .plui-modal-header .plui-modal-title |
src/css/components/nav.css | 19 | .plui-active .plui-nav .plui-nav-fill .plui-nav-item .plui-nav-link .plui-nav-underline .plui-navbar .plui-navbar-brand .plui-navbar-collapse .plui-navbar-expand .plui-navbar-expand-lg .plui-navbar-expand-md .plui-navbar-expand-sm .plui-navbar-expand-xl .plui-navbar-expand-xxl .plui-navbar-nav .plui-navbar-text .plui-navbar-toggler .plui-navbar-toggler-icon |
src/css/components/offcanvas.css | 13 | .plui-offcanvas .plui-offcanvas-backdrop .plui-offcanvas-body .plui-offcanvas-bottom .plui-offcanvas-close .plui-offcanvas-end .plui-offcanvas-footer .plui-offcanvas-header .plui-offcanvas-start .plui-offcanvas-title .plui-offcanvas-top .plui-scroll-locked .plui-scroll-locked-body |
src/css/components/pagination.css | 5 | .plui-page-item .plui-page-link .plui-page-link-lg .plui-page-link-sm .plui-pagination |
src/css/components/placeholder.css | 6 | .plui-placeholder .plui-placeholder-glow .plui-placeholder-lg .plui-placeholder-sm .plui-placeholder-wave .plui-placeholder-xs |
src/css/components/popover.css | 8 | .plui-popover .plui-popover-arrow .plui-popover-body .plui-popover-bottom .plui-popover-end .plui-popover-header .plui-popover-start .plui-popover-top |
src/css/components/progress.css | 15 | .plui-progress .plui-progress-bar .plui-progress-bar-0 .plui-progress-bar-100 .plui-progress-bar-25 .plui-progress-bar-50 .plui-progress-bar-75 .plui-progress-bar-animated .plui-progress-bar-danger .plui-progress-bar-info .plui-progress-bar-striped .plui-progress-bar-success .plui-progress-bar-warning .plui-progress-lg .plui-progress-sm |
src/css/components/scrollspy.css | 3 | .plui-scrollspy-link .plui-scrollspy-nav .plui-scrollspy-section |
src/css/components/spinner.css | 11 | .plui-loading-text .plui-skeleton .plui-skeleton-block .plui-skeleton-text .plui-spinner .plui-spinner-border .plui-spinner-grow .plui-spinner-grow-lg .plui-spinner-grow-sm .plui-spinner-lg .plui-spinner-sm |
src/css/components/stack.css | 7 | .plui-stack .plui-stack-1 .plui-stack-2 .plui-stack-3 .plui-stack-4 .plui-stack-5 .plui-stack-6 |
src/css/components/table.css | 10 | .plui-table .plui-table-active .plui-table-bordered .plui-table-borderless .plui-table-caption .plui-table-hover .plui-table-lg .plui-table-responsive .plui-table-sm .plui-table-striped |
src/css/components/tabs.css | 6 | .plui-nav-pills .plui-nav-tabs .plui-nav-tabs-link .plui-nav-vertical .plui-tab-content .plui-tab-pane |
src/css/components/toast.css | 7 | .plui-hide .plui-toast .plui-toast-autohide .plui-toast-body .plui-toast-close .plui-toast-container .plui-toast-header |
src/css/components/tooltip.css | 6 | .plui-tooltip .plui-tooltip-arrow .plui-tooltip-bottom .plui-tooltip-end .plui-tooltip-start .plui-tooltip-top |
src/css/components/typography-elements.css | 15 | .plui-abbr .plui-blockquote .plui-blockquote-footer .plui-code .plui-figure .plui-figure-caption .plui-figure-img .plui-initialism .plui-kbd .plui-link-stretched .plui-link-underline .plui-link-underline-hover .plui-mark .plui-mark-strong .plui-pre |
状态类与过渡（plui.js 约定）
| 类名 | 作用 |
|---|
.plui-show | 组件处于显示状态（模态框、离屏面板、下拉、折叠、工具提示、弹出框、吐司统一使用） |
.plui-fade | 淡入淡出过渡；未带 plui-show 时透明度为 0 |
.plui-collapsing | 折叠动画进行中：高度收拢并裁剪内容 |
.plui-collapse | 折叠体容器，与 plui-show 组合决定展开态 |
.plui-hide | 吐司等组件的隐藏态 |
.plui-carousel-item-active | 轮播当前项 |
active | 标签页、导航、滚动监听等使用无前缀状态类 |
样式层同时兼容旧写法 .show，因此 v0.2.0 时代手写的标记不需要改动即可继续生效。