fluxui-docs-pro

Compare original and translation side by side

🇺🇸

Original

English

🇨🇳

Translation

Chinese

fluxui-docs (Pro)

fluxui-docs（专业版）

Flux is the official Livewire component library built with Tailwind CSS. Provides fully flexible, functional, and accessible UI components for Livewire applications. This skill includes all components (free and Pro).

Flux是基于Tailwind CSS构建的官方Livewire组件库，为Livewire应用提供完全灵活、功能完善且具备无障碍访问性的UI组件。本技能涵盖所有组件（免费版和专业版）。

How to use this skill

如何使用本技能

Find the relevant component or doc from the lists below
Read the reference file for full documentation, props, and code examples
Use the code examples to help the user implement the component

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

Component reference frontmatter

组件参考前置信息

Each component reference file may include YAML frontmatter with:

```
components_used
```
: List of other Flux components used in the examples

Use

components_used

to find related components and real-world usage patterns.

每个组件参考文件可能包含YAML前置信息，其中包括：

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

利用

components_used

查找相关组件和实际使用场景。

Components

组件

Button: A powerful and composable button component for your application.
Accordion: Collapse and expand sections of content. Perfect for FAQs and content-heavy areas.
Autocomplete: Enhance an input field with autocomplete suggestions.
Avatar: Display an image or initials as an avatar.
Badge: Highlight information like status, category, or count.
Brand: Display your company or application's logo and name in a clean, consistent way across your interf...
Breadcrumbs: Help users navigate and understand their place within your application.
Calendar: A flexible calendar component for date selection. Supports single dates, multiple dates, and date...
Callout: Highlight important information or guide users toward key actions.
Card: A container for related content, such as a form, alert, or data list.
Chart: Flux's Chart component is a lightweight, zero-dependency tool for building charts in your Livewir...
Checkbox: Select one or multiple options from a set.
Command palette: A searchable list of commands.
Context menu: Dropdown menus that open when right clicking a designated area.
Composer: A configurable message input with support for action buttons and rich text. Ideal for chat interf...
Date picker: Allow users to select dates or date ranges via a calendar overlay. Perfect for filtering data or...
Dropdown: A composable dropdown component that can handle both simple navigation menus as well as complex a...
Rich text editor: A basic rich text editor for your application. Built using ProseMirror...
Field: Encapsulate input elements with labels, descriptions, and validation.
File upload: A flexible file upload component with built-in drag-and-drop support, file previews, and Livewire...
Heading: A consistent heading component for your application.
Icon: Flux uses the excellent Heroicons project for its icon collection. Heroicons is a set of beautifu...
Input: Capture user data with various forms of text input.
Kanban: A collection of cards arranged in columns, representing different stages of a workflow.
Modal: Display content in a layer above the main page. Ideal for confirmations, alerts, and forms.
Navbar: Arrange navigation links vertically or horizontally.
OTP Input: Capture one-time passwords with a series of individual input fields.
Pagination: Display a series of buttons to navigate through a list of items.
Pillbox: A multi-select component that displays selected items as removable "pills" that expand the input...
Popover: Show extra content in a popup on click or hover.
Profile: Display a user's profile with an avatar and optional name in a compact, interactive component.
Radio: Select one option from a set of mutually exclusive choices. Perfect for single-choice questions a...
Select: Choose a single option from a dropdown list.
Separator: Visually divide sections of content or groups of items.
Skeleton: Create placeholder content while loading data.
Slider: Select a value using a horizontal slider control.
Switch: Toggle a setting on or off. Suitable for binary options like enabling or disabling features.
Table: Display structured data in a condensed, searchable format.
Tabs: Organize content into separate panels within a single container. Easily switch between sections w...
Text: Consistent typographical components like text and link.
Textarea: Capture multi-line text input from users. Ideal for comments, descriptions, and feedback.
Time picker: Allow users to select specific times for scheduling events or setting appointments. Perfect for t...
Toast: A message that provides feedback to users about an action or event, often temporary and dismissible.
Tooltip: Provide additional information when users hover over or focus on an element.

Button：适用于应用的功能强大且可组合的按钮组件。
Accordion：可折叠和展开内容区块，非常适合常见问题（FAQs）和内容密集区域。
Autocomplete：为输入字段添加自动补全建议功能。
Avatar：以图片或首字母形式显示头像。
Badge：突出显示状态、类别或数量等信息。
Brand：在界面中以简洁、一致的方式展示公司或应用的标志和名称...
Breadcrumbs：帮助用户导航并了解其在应用中的位置。
Calendar：用于日期选择的灵活日历组件，支持单个日期、多个日期和日期范围选择。
Callout：突出显示重要信息或引导用户执行关键操作。
Card：用于容纳相关内容的容器，如表单、提示框或数据列表。
Chart：Flux的Chart组件是一款轻量、无依赖的工具，用于在Livewire应用中构建图表。
Checkbox：从一组选项中选择一个或多个选项。
Command palette：可搜索的命令列表。
Context menu：右键点击指定区域时打开的下拉菜单。
Composer：可配置的消息输入框，支持操作按钮和富文本，非常适合聊天界面场景。
Date picker：允许用户通过日历浮层选择日期或日期范围，非常适合数据筛选或预约场景。
Dropdown：可组合的下拉组件，既能处理简单的导航菜单，也能处理复杂的选择场景。
Rich text editor：适用于应用的基础富文本编辑器，基于ProseMirror构建。
Field：将输入元素与标签、描述和验证逻辑封装在一起。
File upload：灵活的文件上传组件，内置拖拽支持、文件预览和Livewire集成功能。
Heading：为应用提供一致的标题组件。
Icon：Flux使用优秀的Heroicons项目作为其图标库，Heroicons是一套美观的开源图标集。
Input：通过各种文本输入形式收集用户数据。
Kanban：按列排列的卡片集合，代表工作流的不同阶段。
Modal：在主页面上方的层级中显示内容，非常适合确认操作、提示和表单场景。
Navbar：垂直或水平排列导航链接。
OTP Input：通过一系列独立输入框收集一次性密码。
Pagination：显示一系列按钮，用于导航项目列表。
Pillbox：多选组件，将选中项显示为可移除的“药丸”样式，展开输入区域以添加更多选项。
Popover：点击或悬停时在弹出框中显示额外内容。
Profile：以紧凑的交互式组件显示用户头像和可选名称。
Radio：从一组互斥选项中选择一个，非常适合单选题和偏好设置场景。
Select：从下拉列表中选择单个选项。
Separator：在视觉上分隔内容区块或项目组。
Skeleton：在数据加载时创建占位内容。
Slider：通过水平滑块控件选择值。
Switch：切换设置的开启或关闭状态，适用于启用/禁用功能等二元选项。
Table：以紧凑、可搜索的格式显示结构化数据。
Tabs：将内容组织到单个容器内的不同面板中，可轻松在各区块间切换。
Text：一致的排版组件，如文本和链接。
Textarea：收集用户的多行文本输入，非常适合评论、描述和反馈场景。
Time picker：允许用户选择特定时间用于安排事件或预约，非常适合日程管理场景。
Toast：向用户提供操作或事件反馈的消息，通常是临时且可关闭的。
Tooltip：当用户悬停或聚焦元素时提供额外信息。

Docs

文档

Installation
Upgrade guide
Principles
Patterns
Theming
Dark mode
Customization
Help

安装
升级指南
设计原则
设计模式
主题配置
深色模式
自定义配置
帮助中心

Layouts

布局

Header
Sidebar

页头
侧边栏