Input wrapper Blade component

#概述

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

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

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

#禁用输入

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

<x-filament::input.wrapper disabled>
    <x-filament::input
        type="text"
        wire:model="name"
        disabled
    />
</x-filament::input.wrapper>
<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>
<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>
<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>
`
<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>
`

Edit on GitHub

Still need help? Join our Discord community or open a GitHub discussion