Back to Details

fluxui-development

Compare original and translation side by side

🇺🇸

Original

English
🇨🇳

Translation

Chinese

Flux UI Development

Flux UI开发

When to Apply

适用场景

Activate this skill when:
  • Creating new UI components or pages
  • Working with forms, modals, or interactive elements
  • Styling components with Flux UI patterns
  • Checking available Flux components
在以下场景激活此技能：
  • 创建新的UI组件或页面
  • 处理表单、模态框或交互式元素
  • 使用Flux UI样式模式为组件设置样式
  • 查看可用的Flux组件

Documentation

文档

Use 
search-docs
for detailed Flux UI patterns and documentation.
使用
search-docs
工具获取详细的Flux UI模式及文档。

Basic Usage

基础用法

This project uses the Pro version of Flux UI, which includes all free and Pro components and variants.
Flux UI is a component library for Livewire built with Tailwind CSS. It provides components that are easy to use and customize.
Use Flux UI components when available. Fall back to standard Blade components when no Flux component exists for your needs.
<!-- Basic Button -->
blade
<flux:button variant="primary">Click me</flux:button>
本项目使用Flux UI的Pro版本，包含所有免费版和Pro版的组件及变体。
Flux UI是基于Tailwind CSS为Livewire打造的组件库，提供易于使用和自定义的组件。
优先使用可用的Flux UI组件。当没有满足需求的Flux组件时，再回退使用标准Blade组件。
<!-- 基础按钮 -->
blade
<flux:button variant="primary">Click me</flux:button>

Available Components (Pro Edition)

可用组件（Pro版）

Available: accordion, autocomplete, avatar, badge, brand, breadcrumbs, button, calendar, callout, card, chart, checkbox, command, composer, context, date-picker, dropdown, editor, field, file-upload, heading, icon, input, kanban, modal, navbar, otp-input, pagination, pillbox, popover, profile, radio, select, separator, skeleton, slider, switch, table, tabs, text, textarea, time-picker, toast, tooltip
可用组件包括：accordion、autocomplete、avatar、badge、brand、breadcrumbs、button、calendar、callout、card、chart、checkbox、command、composer、context、date-picker、dropdown、editor、field、file-upload、heading、icon、input、kanban、modal、navbar、otp-input、pagination、pillbox、popover、profile、radio、select、separator、skeleton、slider、switch、table、tabs、text、textarea、time-picker、toast、tooltip

Icons

图标

Flux includes Heroicons as its default icon set. Search for exact icon names on the Heroicons site - do not guess or invent icon names.
<!-- Icon Button -->
blade
<flux:button icon="arrow-down-tray">Export</flux:button>
For icons not available in Heroicons, use Lucide. Import the icons you need with the Artisan command:
bash
php artisan flux:icon crown grip-vertical github
Flux默认集成Heroicons图标集。请在Heroicons网站上搜索精确的图标名称，不要猜测或自创图标名称。
<!-- 图标按钮 -->
blade
<flux:button icon="arrow-down-tray">Export</flux:button>
对于Heroicons中没有的图标，使用Lucide。通过Artisan命令导入所需图标：
bash
php artisan flux:icon crown grip-vertical github

Common Patterns

常见模式

Form Fields

表单字段

<!-- Form Field -->
blade
<flux:field>
    <flux:label>Email</flux:label>
    <flux:input type="email" wire:model="email" />
    <flux:error name="email" />
</flux:field>
<!-- 表单字段 -->
blade
<flux:field>
    <flux:label>Email</flux:label>
    <flux:input type="email" wire:model="email" />
    <flux:error name="email" />
</flux:field>

Tables

表格

<!-- Table -->
blade
<flux:table>
    <flux:table.head>
        <flux:table.row>
            <flux:table.cell>Name</flux:table.cell>
        </flux:table.row>
    </flux:table.head>
</flux:table>
<!-- 表格 -->
blade
<flux:table>
    <flux:table.head>
        <flux:table.row>
            <flux:table.cell>Name</flux:table.cell>
        </flux:table.row>
    </flux:table.head>
</flux:table>

Verification

验证步骤

  1. Check component renders correctly
  2. Test interactive states
  3. Verify mobile responsiveness
  1. 检查组件是否正确渲染
  2. 测试交互状态
  3. 验证移动端响应性

Common Pitfalls

常见误区

  • Not checking if a Flux component exists before creating custom implementations
  • Forgetting to use the 
    search-docs
    tool for component-specific documentation
  • Not following existing project patterns for Flux usage
  • 在创建自定义实现前未检查是否存在对应的Flux组件
  • 忘记使用
    search-docs
    工具获取组件专属文档
  • 未遵循项目中已有的Flux使用规范