Back to Details

fluxui-docs

Compare original and translation side by side

🇺🇸

Original

English
🇨🇳

Translation

Chinese

fluxui-docs

fluxui文档

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 only the free components.
Flux是基于Tailwind CSS构建的官方Livewire组件库，为Livewire应用提供完全灵活、功能完善且具备可访问性的UI组件。本技能仅包含免费组件。

How to use this skill

如何使用本技能

  1. Find the relevant component or doc from the lists below
  2. Read the reference file for full documentation, props, and code examples
  3. Use the code examples to help the user implement the component
  1. 从下方列表中找到相关组件或文档
  2. 阅读参考文件以获取完整文档、属性及代码示例
  3. 使用代码示例帮助用户实现组件

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.
  • 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.
  • Callout: Highlight important information or guide users toward key actions.
  • Card: A container for related content, such as a form, alert, or data list.
  • Checkbox: Select one or multiple options from a set.
  • Dropdown: A composable dropdown component that can handle both simple navigation menus as well as complex a...
  • Field: Encapsulate input elements with labels, descriptions, and validation.
  • 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.
  • 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.
  • 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.
  • 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.
  • Text: Consistent typographical components like text and link.
  • Textarea: Capture multi-line text input from users. Ideal for comments, descriptions, and feedback.
  • Tooltip: Provide additional information when users hover over or focus on an element.
  • Button：适用于应用的强大且可组合的按钮组件。
  • Avatar：显示图片或首字母作为头像。
  • Badge：突出显示状态、类别或数量等信息。
  • Brand：在界面中以简洁、一致的方式展示公司或应用的标志和名称...
  • Breadcrumbs：帮助用户导航并了解其在应用中的位置。
  • Callout：突出显示重要信息或引导用户执行关键操作。
  • Card：用于存放相关内容的容器，如表单、提示框或数据列表。
  • Checkbox：从一组选项中选择一个或多个选项。
  • Dropdown：可组合的下拉组件，既能处理简单导航菜单，也能处理复杂的...
  • Field：封装带有标签、描述和验证的输入元素。
  • Heading：应用中样式一致的标题组件。
  • Icon：Flux采用了优秀的Heroicons项目作为其图标集。Heroicons是一套美观...
  • Input：通过多种文本输入形式收集用户数据。
  • Modal：在主页面上方的图层中显示内容，非常适合用于确认提示、告警和表单。
  • Navbar：垂直或水平排列导航链接。
  • OTP Input：通过一系列独立输入框收集一次性密码。
  • Pagination：显示一系列按钮以导航项目列表。
  • Profile：以紧凑的交互式组件显示用户头像及可选名称的用户资料。
  • Radio：从一组互斥选项中选择一个，非常适合单选题和...
  • Select：从下拉列表中选择单个选项。
  • Separator：在视觉上划分内容区块或项目组。
  • Skeleton：在加载数据时创建占位内容。
  • Switch：切换设置的开启或关闭状态，适用于启用或禁用功能等二元选项。
  • Table：以紧凑、可搜索的格式显示结构化数据。
  • Text：样式一致的排版组件，如文本和链接。
  • Textarea：收集用户的多行文本输入，非常适合用于评论、描述和反馈。
  • Tooltip：当用户悬停或聚焦元素时提供额外信息。

Docs

文档

  • Installation
  • Upgrade guide
  • Principles
  • Patterns
  • Theming
  • Dark mode
  • Customization
  • Help
  • 安装
  • 升级指南
  • 设计原则
  • 设计模式
  • 主题定制
  • 暗黑模式
  • 自定义配置
  • 帮助中心

Layouts

布局

  • Header
  • Sidebar
  • 头部
  • 侧边栏