显示侧边栏

Flux Pro 组件

此组件仅在 Flux 的 Pro 版本中提供。

滑块

使用水平滑块控件选择一个数值。

<flux:slider wire:model="amount" />

最小值 / 最大值 / 步长

使用 min、max 和 step 属性来配置滑块。

<flux:slider min="0" max="100" step="10" />

显示数值

若要显示当前数值，请添加一个带有 wire:text 指令的元素。

圆角半径

<flux:field>    <flux:label>        Corner radius        <x-slot name="trailing">            <span wire:text="amount" class="tabular-nums"></span>        </x-slot>    </flux:label>    <flux:slider wire:model="amount" /></flux:field>

带输入框

若要在滑块旁边显示一个输入框并确保可访问性，请将两者一起包裹在 flux:field 中。

圆角半径

<flux:field>    <flux:label>Corner radius</flux:label>    <div class="flex items-center gap-4 -mt-2">        <flux:slider wire:model="amount" />        <flux:input wire:model="amount" type="number" size="sm" class="max-w-18" />    </div></flux:field>

大步长

使用 big-step 属性来定义在按住 Shift 键并使用方向键时的步长大小。

<flux:slider step="1" big-step="10" />

步进刻度

在滑块下方显示刻度，以可视化每一步的间距。

<flux:slider min="1" max="5">    @foreach (range(1, 5) as $i)        <flux:slider.tick :value="$i" />    @endforeach</flux:slider>

带编号的步进

在滑块下方显示数字，以可视化每一步的间距。

<flux:slider min="1" max="5">    @foreach (range(1, 5) as $i)        <flux:slider.tick :value="$i">{{ $i }}</flux:slider.tick>    @endforeach</flux:slider>

自定义步进

为特定步进显示自定义标签。

低

中

高

<flux:slider min="1" max="5">    <flux:slider.tick value="1">Low</flux:slider.tick>    <flux:slider.tick value="3">Mid</flux:slider.tick>    <flux:slider.tick value="5">High</flux:slider.tick></flux:slider>

范围滑块

使用两个滑块拖动点选择一个数值区间。

<flux:slider range />

基本用法

使用以逗号分隔的数值，通过 value 属性设置初始范围：

<flux:slider range value="20,80" />

你也可以使用 wire:model 将数值绑定到一个 Livewire 属性：

<flux:slider range wire:model="range" />

现在你可以在 Livewire 组件中通过一个数组来访问这些数值：

<?phpuse Livewire\Component;class Dashboard extends Component {    public array $range = [20, 80];}

最小步进间距

使用 min-steps-between 来设置两个拖动点之间的最小距离。该值以步数表示，每一步的大小由 step 属性决定。

<flux:slider range step="1" min-steps-between="10" />

显示区间数值

若要显示选择的区间，请添加两个带有 wire:text 指令的元素。

价格区间

$ – $

<div class="relative">    <flux:field>        <flux:label>            Price range            <x-slot name="trailing">                $<span wire:text="range[0]" class="tabular-nums"></span>                &ndash;                $<span wire:text="range[1]" class="tabular-nums"></span>            </x-slot>        </flux:label>        <flux:slider range wire:model="range" min="0" max="990" step="10" min-steps-between="10" big-step="100" />    </flux:field></div>

自定义样式

使用 track:class 和 thumb:class 属性来自定义滑块的样式。

<flux:slider track:class="h-5" thumb:class="size-5" />

Field

带标签与校验的结构化表单字段

Input

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

参考

flux:slider

Prop	说明
range	启用范围选择。
min	滑块的最小值。
max	滑块的最大值。
step	滑块的步长大小。
big-step	按住 Shift 键时滑块的步长大小。
min-steps-between	以步数表示的两个拖动点之间的最小距离。
track:class	应用于轨道的 CSS 类。
thumb:class	应用于滑块拖动点的 CSS 类。

flux:slider.tick

Prop	Description
value	显示刻度所对应的数值位置。

Slot	说明
default	刻度标签。如果留空，则显示一条水平线。

滑块

基本用法

相关组件

参考