组合输入框

一个可配置的消息输入框，支持操作按钮和富文本，非常适合用于聊天界面和 AI 提示词输入。

<form wire:submit="send">    <flux:composer wire:model="prompt" label="Prompt" label:sr-only placeholder="How can I help you today?">        <x-slot name="actionsLeading">            <flux:button size="sm" variant="subtle" icon="paper-clip" />            <flux:button size="sm" variant="subtle" icon="slash" />            <flux:button size="sm" variant="subtle" icon="adjustments-horizontal" />        </x-slot>        <x-slot name="actionsTrailing">            <flux:button size="sm" variant="filled" icon="microphone" />            <flux:button type="submit" size="sm" variant="primary" icon="paper-airplane" />        </x-slot>    </flux:composer></form>

带页眉内容

使用 header 插槽在输入区域上方展示文件预览或其他内容。

<flux:composer wire:model="prompt" label="Prompt" label:sr-only placeholder="How can I help you today?">    <x-slot name="header">        <!-- Header content... -->        <div class="relative border border-zinc-200 dark:border-zinc-700 rounded-lg overflow-hidden">            <img src="https://fluxui.dev/img/demo/caleb.png" alt="Profile picture" class="size-14">            <div class="absolute top-0 right-0 p-1">                <button type="button" class="p-0.5 rounded-full bg-zinc-900/50 hover:bg-zinc-900/70 flex justify-center items-center">                    <flux:icon icon="x-mark" variant="micro" class="text-white" />                </button>            </div>        </div>    </x-slot>    <x-slot name="actionsLeading">        <!-- ... -->    </x-slot>    <x-slot name="actionsTrailing">        <!-- ... -->    </x-slot></flux:composer>

行内布局

将操作按钮与输入框放在同一行，以获得更紧凑的布局。

<flux:composer wire:model="prompt" rows="1" inline label="Prompt" label:sr-only placeholder="How can I help you today?">    <x-slot name="actionsLeading">        <flux:button size="sm" variant="ghost" icon="plus" />    </x-slot>    <x-slot name="actionsTrailing">        <flux:button size="sm" variant="filled" icon="microphone" />        <flux:button type="submit" size="sm" variant="primary" icon="paper-airplane" />    </x-slot></flux:composer>

输入框风格

通过设置 variant="input" 属性，使 composer 的圆角样式与其他表单输入框保持一致。

姓名

消息

<flux:composer variant="input" label="Message" placeholder="What's on your mind?">    <!-- ... --></flux:composer>

高度

通过 rows 和 max-rows 属性设置输入区域的初始高度和最大高度。

<flux:composer rows="4" max-rows="8" ...>    <!-- ... --></flux:composer>

提交行为

默认情况下，按下 Ctrl/Cmd + Enter 会提交表单。将 submit="enter" 设置为仅按 Enter 即可提交。

<form wire:submit="send">    <flux:composer wire:model="prompt" submit="enter" ...>        <!-- ... -->    </flux:composer></form>

富文本

通过向 input 插槽传入 editor 组件来启用富文本格式化。

Bold ⌘B

Italic ⌘I

Bullet list

Ordered list

Insert link ⌘K

Insert link

Unlink

Align

<flux:composer wire:model="prompt" rows="3" label="Prompt" label:sr-only placeholder="How can I help you today?">    <x-slot name="input">        <flux:editor variant="borderless" toolbar="bold italic bullet ordered | link | align" />    </x-slot>    <x-slot name="actionsLeading">        <flux:button size="sm" variant="subtle" icon="paper-clip" />        <flux:button size="sm" variant="subtle" icon="slash" />        <flux:button size="sm" variant="subtle" icon="adjustments-horizontal" />    </x-slot>    <x-slot name="actionsTrailing">        <flux:button size="sm" variant="filled" icon="microphone" />        <flux:button type="submit" size="sm" variant="primary" icon="paper-airplane" />    </x-slot></flux:composer>

禁用状态

通过添加 disabled 属性来禁止用户与 composer 交互。

<flux:composer disabled ...>    <!-- ... --></flux:composer>

校验错误状态

当 name 或 wire:model 属性与 label 属性一起使用时，验证错误会自动为 composer 应用错误样式。

<flux:composer wire:model="prompt" label="Prompt" label:sr-only ...>    <!-- ... --></flux:composer>

Field

带标签的结构化表单字段

Input

用于收集用户输入的文本字段

参考

flux:composer

属性	说明
wire:model	将 composer 绑定到一个 Livewire 属性。更多信息请参阅 wire:model 文档。
name	composer 的 name 属性，用于检测验证错误。
placeholder	在输入为空时显示的占位文本。
label	composer 的标签文本。当提供该属性时，会将 composer 包裹在 flux:field 组件中，并在旁边渲染一个 flux:label 组件。参见 field 组件。
label:sr-only	在视觉上隐藏标签，但仍然对屏幕阅读器可见。
description	显示在 composer 附近的帮助文本。参见 field 组件。
description:sr-only	在视觉上隐藏描述文本，但仍然对屏幕阅读器可见。
rows	输入区域可见行数。默认值：2。
max-rows	随着内容增多，输入区域可以扩展到的最大行数。
inline	将操作按钮与输入框并排显示在同一行中。
submit	控制表单提交的键盘行为。可选值：cmd+enter（默认），enter。
disabled	禁止用户与 composer 交互。
invalid	当值为 true 时，为 composer 应用错误样式。

插槽	说明
input	自定义输入内容。使用该插槽可以将默认的 textarea 替换为富文本编辑器。
header	显示在输入区域上方的内容，适合用于文件预览或上传信息。
footer	显示在输入区域下方的内容。
actionsLeading	显示在操作栏起始位置的按钮或操作。
actionsTrailing	显示在操作栏末尾的按钮或操作，通常包含提交按钮。

属性	说明
data-flux-composer	应用在根元素上，用于样式控制和标识。

组合输入框

相关组件

参考