README

将丝印默认的单选按钮转换为一个可选择的带有图标、标题和描述的卡片。

安装

您可以通过composer安装此包。

composer require jaocero/radio-deck

为了遵循Filament的主题方法，您需要使用自定义主题才能使用此插件。

自定义主题安装 Filament文档

将插件的视图添加到您的 tailwind.config.js 文件中。

content: [
    ...
    './vendor/jaocero/radio-deck/resources/views/**/*.blade.php',
]

用法

use JaOcero\RadioDeck\Forms\Components\RadioDeck;
use Filament\Support\Enums\IconSize;
use Filament\Support\Enums\Alignment;
use Filament\Support\Enums\IconPosition;

public static function form(Form $form): Form
{
    return $form
        ->schema([
            RadioDeck::make('name')
                ->options([
                    'ios' => 'iOS',
                    'android' => 'Android',
                    'web' => 'Web',
                    'windows' => 'Windows',
                    'mac' => 'Mac',
                    'linux' => 'Linux',
                ])
                ->descriptions([
                    'ios' => 'iOS Mobile App',
                    'android' => 'Android Mobile App',
                    'web' => 'Web App',
                    'windows' => 'Windows Desktop App',
                    'mac' => 'Mac Desktop App',
                    'linux' => 'Linux Desktop App',
                ])
                ->icons([
                    'ios' => 'heroicon-m-device-phone-mobile',
                    'android' => 'heroicon-m-device-phone-mobile',
                    'web' => 'heroicon-m-globe-alt',
                    'windows' => 'heroicon-m-computer-desktop',
                    'mac' => 'heroicon-m-computer-desktop',
                    'linux' => 'heroicon-m-computer-desktop',
                ])
                ->required()
                ->iconSize(IconSize::Large) // Small | Medium | Large | (string - sm | md | lg)
                ->iconSizes([ // Customize the values for each icon size
                    'sm' => 'h-12 w-12',
                    'md' => 'h-14 w-14',
                    'lg' => 'h-16 w-16',
                ])
                ->iconPosition(IconPosition::Before) // Before | After | (string - before | after)
                ->alignment(Alignment::Center) // Start | Center | End | (string - start | center | end)
                ->gap('gap-5') // Gap between Icon and Description (Any TailwindCSS gap-* utility)
                ->padding('px-4 px-6') // Padding around the deck (Any TailwindCSS padding utility)
                ->direction('column') // Column | Row (Allows to place the Icon on top)
                ->extraCardsAttributes([ // Extra Attributes to add to the card HTML element
                    'class' => 'rounded-xl'
                ])
                ->extraOptionsAttributes([ // Extra Attributes to add to the option HTML element
                    'class' => 'text-3xl leading-none w-full flex flex-col items-center justify-center p-4'
                ])
                ->extraDescriptionsAttributes([ // Extra Attributes to add to the description HTML element
                    'class' => 'text-sm font-light text-center'
                ])
                ->color('primary') // supports all color custom or not
                ->multiple() // Select multiple card (it will also returns an array of selected card values)
                ->columns(3)
        ])
        ->columns('full');
}

您还可以使用枚举类来为 ->options()、->descriptions() 和 ->icons() 提供功能。以下是一个如何创建用于此目的的简单枚举类的示例

<?php

namespace App\Filament\Enums;

use Filament\Support\Contracts\HasLabel;
use JaOcero\RadioDeck\Contracts\HasDescriptions;
use JaOcero\RadioDeck\Contracts\HasIcons;

enum AssetType: string implements HasLabel, HasDescriptions, HasIcons
{
    case iOs = 'ios';
    case Android = 'android';
    case Web = 'web';
    case Windows = 'windows';
    case Mac = 'mac';
    case Linux = 'linux';

    public function getLabel(): ?string
    {
        return match ($this) {
            self::iOs => 'iOS',
            self::Android => 'Android',
            self::Web => 'Web',
            self::Windows => 'Windows',
            self::Mac => 'Mac',
            self::Linux => 'Linux',
        };
    }

    public function getDescriptions(): ?string
    {
        return match ($this) {
            self::iOs => 'iOS Mobile App',
            self::Android => 'Android Mobile App',
            self::Web => 'Web App',
            self::Windows => 'Windows Desktop App',
            self::Mac => 'Mac Desktop App',
            self::Linux => 'Linux Desktop App',
        };
    }

    public function getIcons(): ?string
    {
        return match ($this) {
            self::iOs => 'heroicon-m-device-phone-mobile',
            self::Android => 'heroicon-m-device-phone-mobile',
            self::Web => 'heroicon-m-globe-alt',
            self::Windows => 'heroicon-m-computer-desktop',
            self::Mac => 'heroicon-m-computer-desktop',
            self::Linux => 'heroicon-m-computer-desktop',
        };
    }
}

之后，在您的表单中，您可以设置如下

public static function form(Form $form): Form
{
    return $form
        ->schema([
            RadioDeck::make('name')
                ->options(AssetType::class)
                ->descriptions(AssetType::class)
                ->icons(AssetType::class)
                ->required()
                ->iconSize(IconSize::Large)
                ->iconPosition(IconPosition::Before)
                ->alignment(Alignment::Center)
                ->color('danger')
                ->columns(3),
        ])
        ->columns('full');
}

变更日志

有关最近更改的更多信息，请参阅 CHANGELOG

贡献

有关详细信息，请参阅 CONTRIBUTING

安全漏洞

有关如何报告安全漏洞的详细信息，请参阅 我们的安全策略

致谢

• Jay-Are Ocero
• 所有贡献者

许可证

MIT许可证（MIT）。有关更多信息，请参阅 许可证文件