一个功能强大且可组合的按钮组件。
<flux:button>Button</flux:button>使用 variant 属性来改变按钮的视觉样式。
<flux:button>Default</flux:button><flux:button variant="primary">Primary</flux:button><flux:button variant="filled">Filled</flux:button><flux:button variant="danger">Danger</flux:button><flux:button variant="ghost">Ghost</flux:button><flux:button variant="subtle">Subtle</flux:button>使用标准的 Tailwind 颜色名称配合 color 属性来控制主要按钮的颜色。
<flux:button variant="primary" color="zinc">Zinc</flux:button><flux:button variant="primary" color="red">Red</flux:button><flux:button variant="primary" color="orange">Orange</flux:button><flux:button variant="primary" color="amber">Amber</flux:button><flux:button variant="primary" color="yellow">Yellow</flux:button><flux:button variant="primary" color="lime">Lime</flux:button><flux:button variant="primary" color="green">Green</flux:button><flux:button variant="primary" color="emerald">Emerald</flux:button><flux:button variant="primary" color="teal">Teal</flux:button><flux:button variant="primary" color="cyan">Cyan</flux:button><flux:button variant="primary" color="sky">Sky</flux:button><flux:button variant="primary" color="blue">Blue</flux:button><flux:button variant="primary" color="indigo">Indigo</flux:button><flux:button variant="primary" color="violet">Violet</flux:button><flux:button variant="primary" color="purple">Purple</flux:button><flux:button variant="primary" color="fuchsia">Fuchsia</flux:button><flux:button variant="primary" color="pink">Pink</flux:button><flux:button variant="primary" color="rose">Rose</flux:button>默认按钮大小适用于大多数情况,但这里还有一些额外的尺寸选项用于特殊场景。
<flux:button>Base</flux:button><flux:button size="sm">Small</flux:button><flux:button size="xs">Extra small</flux:button>为按钮自动调整大小和样式的图标。
<flux:button icon="ellipsis-horizontal" /><flux:button icon="arrow-down-tray">Export</flux:button><flux:button icon:trailing="chevron-down">Open</flux:button><flux:button icon="x-mark" variant="subtle" />带有 wire:click 或 type="submit" 的按钮将在网络请求期间自动显示加载指示器并禁用鼠标事件。
<flux:button wire:click="save"> Save changes</flux:button>你可以使用 :loading="false" 禁用此行为。
<flux:button wire:click="save" :loading="false">将相关按钮融合成一个共享边框的组。
<flux:button.group> <flux:button>Oldest</flux:button> <flux:button>Newest</flux:button> <flux:button>Top</flux:button></flux:button.group>将多个图标按钮融合成一个视觉上相连的组。
<flux:button.group> <flux:button icon="bars-3-bottom-left"></flux:button> <flux:button icon="bars-3"></flux:button> <flux:button icon="bars-3-bottom-right"></flux:button></flux:button.group>在另一个按钮后面或前面附加一个图标按钮以添加额外功能。
<flux:button.group> <flux:button>New product</flux:button> <flux:button icon="chevron-down"></flux:button></flux:button.group>通过传递 href 属性将 HTML a 标签显示为按钮。
<flux:button href="https://google.com" icon:trailing="arrow-up-right"> Visit Google</flux:button>要将按钮显示为输入框,请将 as="button" 传递给 输入框组件。
<flux:input as="button" placeholder="Search..." icon="magnifying-glass" kbd="⌘K" />当使用 ghost 或 subtle 按钮变体时,你可以使用 inset 属性来消除任何不可见的内边距以获得更好的对齐效果。
<div class="flex justify-between"> <flux:heading>Post successfully created.</flux:heading> <flux:button size="sm" icon="x-mark" variant="ghost" inset /></div>|
属性
|
描述
|
|---|---|
| as |
渲染按钮的 HTML 标签。选项: button (默认), a, div。
|
| href |
当按钮用作锁点标签时链接到的 URL。
|
| type |
按钮的 HTML type 属性。选项: button (默认), submit。
|
| variant |
按钮的视觉样式。选项: outline, primary, filled, danger, ghost, subtle。默认: outline。
|
| size |
按钮的大小。选项: base (默认), sm, xs。
|
| icon |
在按钮开始处显示的图标名称。
|
| icon:variant |
图标的视觉样式。选项: outline, solid, mini, micro。默认: micro。
|
| icon:trailing |
在按钮末尾处显示的图标名称。
|
| square |
如果为 true,则使按钮为正方形。(对仅包含图标的按钮很有用。)
|
| inset |
向特定边添加负边距。选项: top, bottom, left, right,或者这四个的任意组合。
|
| loading |
如果为 true,在与 wire:click 或 type="submit" 一起使用时显示加载动画并禁用按钮。如果为 false,按钮将完全不显示加载动画。默认: true。
|
| tooltip |
当鼠标悬停在按钮上时在工具提示中显示的文本。
|
| tooltip:position |
工具提示的位置。选项: top, bottom, left, right。默认: top。
|
| tooltip:kbd |
当鼠标悬停在按钮上时在键盘快捷键工具提示中显示的文本。
|
| kbd |
当鼠标悬停在按钮上时在键盘快捷键工具提示中显示的文本。
|
|
CSS
|
描述
|
|---|---|
| class |
应用于按钮的额外 CSS 类。常见用法: w-full 用于全宽。
|
|
属性
|
描述
|
|---|---|
| data-flux-button |
应用于根元素以进行样式设置和识别。
|