Tab

提供 Tab UI 组件的设计模式、可访问性及响应式实现指南。

已扫描

项目

内容

适合谁

前端开发者、UI/UX 设计师

不适合谁

非前端项目使用者、无 Web 开发需求的普通用户

国内可用性

需网络配置。可能需要网络配置或第三方服务可访问。

安装难度

新手友好（★☆☆）。基于终端操作、依赖、API Key 和本地环境要求的初步判断。

安装与下载

复制命令安装

openclaw skills install @ckchzh/tab

官方 ZIP下载官方 ZIP

Skill 说明

命令、参数、文件名以原文为准

Tab — 标签页组件参考

快速参考技能：标签页组件设计、可访问性模式及实现方法。

使用场景

在网页应用中实现标签式内容面板
为相关联的内容区域设计标签导航
通过正确的 ARIA 角色和键盘支持确保标签页的可访问性
在标签页、折叠面板及其他导航模式之间进行选择
构建适用于移动端的响应式标签页组件

命令

`intro`

scripts/script.sh intro

标签页组件概览 — 包括使用时机、类型以及替代方案。

`anatomy`

scripts/script.sh anatomy

标签页结构组成 — 标签列表、标签按钮、标签面板、指示器、徽章。

`patterns`

scripts/script.sh patterns

设计模式 — 水平标签、垂直标签、可滚动标签、可关闭标签、可拖拽标签。

`accessibility`

scripts/script.sh accessibility

可访问性 — ARIA 角色、键盘导航、焦点管理、屏幕阅读器支持。

`state`

scripts/script.sh state

状态管理 — 受控与非受控状态、懒加载、URL 同步、持久化。

`responsive`

scripts/script.sh responsive

响应式策略 — 可滚动标签、下拉菜单转换、优先级标签、滑动手势。

`css`

scripts/script.sh css

CSS 实现 — 指示器动画、主题设置、变体样式、过渡效果。

`checklist`

scripts/script.sh checklist

标签页组件设计与实现检查清单。

`help`

scripts/script.sh help

`version`

scripts/script.sh version

*由 BytesAgain 提供 | bytesagain.com | hello@bytesagain.com*

@ckchzh

已收录 10 个 Skill

Tab