Input wrapper Blade 组件

简介

input wrapper 组件应作为 input 或 select 组件的包裹层使用。它提供边框以及前缀、后缀等元素。

<x-filament::input.wrapper>
    <x-filament::input
        type="text"
        wire:model="name"
    />
</x-filament::input.wrapper>

<x-filament::input.wrapper>
    <x-filament::input.select wire:model="status">
        <option value="draft">Draft</option>
        <option value="reviewing">Reviewing</option>
        <option value="published">Published</option>
    </x-filament::input.select>
</x-filament::input.wrapper>

触发输入的错误状态

该组件在无效时有特殊样式。要触发该样式，可以使用 Blade 或 Alpine.js。

要用 Blade 触发错误状态，可向组件传入 valid 属性，其值为 true 或 false，取决于输入是否有效：

<x-filament::input.wrapper :valid="! $errors->has('name')">
    <x-filament::input
        type="text"
        wire:model="name"
    />
</x-filament::input.wrapper>

或者，你可以使用 Alpine.js 表达式触发错误状态，取决于表达式求值为 true 还是 false：

    <x-filament::input.wrapper alpine-valid="! errors.includes('name')">
        <x-filament::input
            type="text"
            wire:model="name"
        />
    </x-filament::input.wrapper>

禁用输入

要禁用输入，还必须向 wrapper 组件传入 disabled 属性：

<x-filament::input.wrapper disabled>
    <x-filament::input
        type="text"
        wire:model="name"
        disabled
    />
</x-filament::input.wrapper>

在输入旁添加前后缀文本

可使用 prefix 和 suffix 插槽在输入前后放置文本：

<x-filament::input.wrapper>
    <x-slot name="prefix">
        https://
    </x-slot>

    <x-filament::input
        type="text"
        wire:model="domain"
    />

    <x-slot name="suffix">
        .com
    </x-slot>
</x-filament::input.wrapper>

使用图标作为前后缀

可使用 prefix-icon 和 suffix-icon 属性在输入前后放置图标：

<x-filament::input.wrapper suffix-icon="heroicon-m-globe-alt">
    <x-filament::input
        type="url"
        wire:model="domain"
    />
</x-filament::input.wrapper>

设置前后缀图标的颜色

前后缀图标默认为灰色，但可使用 prefix-icon-color 和 affix-icon-color 属性设置不同颜色：

<x-filament::input.wrapper
    suffix-icon="heroicon-m-check-circle"
    suffix-icon-color="success"
>
    <x-filament::input
        type="url"
        wire:model="domain"
    />
</x-filament::input.wrapper>