fluxui-docs-pro

Name: fluxui-docs-pro
Author: tompec

github.com/tompec设计与 UI275 次安装6 周前更新

代码仓库

关于 fluxui-docs-pro

此文档技能面向使用 Flux 的开发者；Flux 是基于 Tailwind CSS 构建的 Livewire 组件库。它汇集免费版和 Pro 组件的参考资料、代码示例及实现模式。

主要功能

01免费版和 Pro 组件参考
02组件属性与代码示例
03相关组件元数据
04模式与主题文档
05Header 和 Sidebar 布局参考

适用场景

01为 Livewire 界面查找组件
02实现组件前查看属性说明
03查找示例中使用的相关组件
04参考主题与布局指南

安装

复制下面的命令，在终端中运行。

$npx skills add https://github.com/tompec/fluxui-docs-skill --skill fluxui-docs-pro

安装后在 Claude Code 中输入/fluxui-docs-pro确认已加载。

包含的文件

除 SKILL.md 外，安装时一起下载的参考资料和脚本。

references/components/

accordion.md

autocomplete.md

avatar.md

badge.md

brand.md

breadcrumbs.md

button.md

calendar.md

callout.md

card.md

carousel.md

chart.md

checkbox.md

color-picker.md

command.md

composer.md

context.md

date-picker.md

dropdown.md

editor.md

field.md

file-upload.md

flag.md

heading.md

icon.md

input.md

kanban.md

modal.md

navbar.md

otp-input.md

详细介绍

fluxui-docs（Pro）

Flux 是使用 Tailwind CSS 构建的官方 Livewire 组件库，为 Livewire 应用提供完全灵活、实用且易于访问的 UI 组件。此技能包含所有组件（免费版和 Pro 版）。

如何使用此技能

从下方列表中找到相关组件或文档
阅读参考文件，了解完整文档、属性和代码示例
使用代码示例帮助用户实现该组件

组件参考文件的 frontmatter

每个组件参考文件都可能包含 YAML frontmatter，其中包括：

components_used：示例中使用的其他 Flux 组件列表

使用 components_used 查找相关组件和实际使用模式。

组件

Button：功能强大且可组合的按钮组件，适用于你的应用。
Accordion：折叠和展开内容区域，非常适合常见问题解答和内容密集的区域。
Autocomplete：为输入字段提供自动补全建议。
Avatar：将图片或姓名首字母显示为头像。
Badge：突出显示状态、类别或数量等信息。
Brand：以简洁统一的方式，在你的界面中展示公司或应用的徽标和名称……
Breadcrumbs：帮助用户导航并了解自己在应用中的位置。
Calendar：灵活的日期选择日历组件，支持选择单个日期、多个日期和日期……
Callout：突出显示重要信息，或引导用户执行关键操作。
Card：用于容纳相关内容的容器，例如表单、警报或数据列表。
Carousel：水平滚动的幻灯片行，带有吸附效果和感知边缘的控件。
Chart：Flux 的 Chart 组件是一个轻量级、零依赖的工具，可用于在 Livewir... 中构建图表。
Checkbox：从一组选项中选择一个或多个选项。
Color picker：让用户从色板中选取颜色、拖动饱和度/明度画布，或粘贴十六进制值……
Command palette：可搜索的命令列表。
Context menu：在指定区域上单击右键时打开的下拉菜单。
Composer：可配置的消息输入框，支持操作按钮和富文本，非常适合聊天界面……
Date picker：通过日历叠加层让用户选择日期或日期范围，非常适合筛选数据或……
Dropdown：可组合的下拉组件，既可处理简单的导航菜单，也可处理复杂的……
Rich text editor：适用于你的应用的基础富文本编辑器。使用 ProseMirror 构建……
Field：使用标签、描述和验证信息封装输入元素。
File upload：灵活的文件上传组件，内置拖放支持、文件预览和 Livewire……
Flag：使用两字母 Unicode 区域代码显示旗帜。
Heading：适用于你的应用的统一标题组件。
Icon：Flux 使用优秀的 Heroicons 项目作为图标集。Heroicons 是一组精美的……
Input：通过各种文本输入形式收集用户数据。
Kanban：按列排列的一组卡片，代表工作流的不同阶段。
Modal：在主页面上方的图层中显示内容，非常适合确认、警报和表单。
Navbar：垂直或水平排列导航链接。
OTP Input：通过一系列独立的输入字段收集一次性密码。
Pagination：显示一组按钮，用于浏览列表中的项目。
Phone：收集国际电话号码，支持国家选择、本地格式化和 E.164 标准化……
Pillbox：多选组件，将已选项目显示为可移除的“胶囊”，并扩展输入框……
Popover：单击或悬停时在弹出框中显示额外内容。
Profile：通过紧凑、可交互的组件显示用户头像以及可选的姓名。
Progress：用于指示完成情况或加载状态的简单进度条。
Radio：从一组互斥选项中选择一个，非常适合单选问题……
Select：从下拉列表中选择一个选项。
Separator：在视觉上分隔内容区域或项目组。
Skeleton：加载数据时创建占位内容。
Slider：使用水平滑块控件选择数值。
Switch：开启或关闭设置，适用于启用或禁用功能等二元选项。
Table：以精简、可搜索的格式显示结构化数据。
Tabs：在单个容器中将内容组织到不同面板，轻松切换各个区域……
Text：统一的排版组件，例如文本和链接。
Textarea：收集用户输入的多行文本，适用于评论、描述和反馈。
Time picker：让用户选择具体时间，以安排活动或设置预约，非常适合……
Timeline：以垂直或水平时间线显示一系列事件或步骤。
Toast：向用户反馈操作或事件的消息，通常为临时消息且可关闭。
Toggle：使用紧凑的按钮形控件开启或关闭设置。
Tooltip：当用户将鼠标悬停在元素上或聚焦该元素时，提供额外信息。

Docs

Layouts

支持 Markdown

登录后评论