Input affixes Blade component

概述

输入前后缀组件用于包装 input 或 select 组件。它提供了 border 及其他元素，如前缀或后缀：

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

<x-filament::input.affixes>
    <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.affixes>

触发输入框状态错误

如果组件无效，可以使用特殊样式表示。要触发该样式，你可以使用 Blade 或者 Alpine.js。

要使用 Blade 触发错误状态，你可以传入 valid 属性到组件中，根据输入的是否有效，它将包含 true 或 false：

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

另外，你也可以使用 Alpine 表达式来触发错误状态：

<div x-data="{ errors: ['name'] }">
    <x-filament::input.affixes alpine-valid="errors.includes('name')">
        <x-filament::input
        type="text"
        wire:model="name"
    />
    </x-filament::input.affixes>
</div>

禁用输入

要禁用输入，你也必须传入 disabled 属性到后缀组件：

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

在输入框旁添加前后缀文本

你可以使用 prefix 或 suffix 插槽， 在输入框的前后放置文本：

<x-filament::input.affixes>
    <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.affixes>

使用图标作为前后缀

使用 prefix-icon 或 suffix-icon 属性，你也可以在输入框的前面或者后面放置图标：

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