README

用于Filament Forms的颜色选择字段，使用预设颜色调板。

安装

您可以通过composer安装此包

composer require awcodes/palette

重要

如果您尚未设置自定义主题并且正在使用Filament Panels，请先遵循Filament文档中的说明。以下适用于Panels包和独立Forms包。

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

content: [
    './vendor/awcodes/palette/resources/views/**/*.blade.php',
]

重建您的自定义主题。

npm run build

配置

插件可以在不发布配置的情况下运行，但如果您需要更改任何默认设置，可以使用以下Artisan命令发布配置文件

php artisan vendor:publish --tag="palette-config"

准备您的模型

默认情况下，Palette将选定的颜色以数据数组的形式存储在您的数据库中。因此，您必须在模型中将列类型指定为array或json。

protected $casts = [
    'content' => 'array', // or 'json'
];

存储的内容将具有以下形状

[
    'key' => 'primary',
    'property' => '--primary-500',
    'label' => 'Primary',
    'type' => 'rgb',
    'value' => '238, 246, 213',
]

按颜色的键存储数据

如果您希望仅存储颜色的键，可以通过在ColorPicker或ColorPickerSelect字段上使用storeAsKey()修饰符或在全局范围内通过palette.php配置文件来实现。

use Awcodes\Palette\Forms\Components\ColorPicker;
use Filament\Support\Colors\Color;

ColorPicker::make('color')
    ->storeAsKey(),

颜色选择字段

只需使用ColorPicker字段将字段添加到您的表单中，并传入Filament颜色对象的数组。

如果您需要在颜色调板中包含黑色和白色，可以使用withWhite和withBlack方法。这将将在颜色选项的末尾包含黑色和白色。您还可以使用'swap'参数交换用于黑色和白色的十六进制值。

注意：阴影仅适用于Filament颜色对象

use Awcodes\Palette\Forms\Components\ColorPicker;
use Filament\Support\Colors\Color;

ColorPicker::make('color')
    ->colors([
        'indigo' => Color::Indigo
        'badass' => Color::hex('#bada55'),
        'salmon' => '#fa8072',
        'bg-gradient-secondary' => 'bg-gradient-secondary'
    ])
    ->shades([
        'badass' => 300
    ])
    ->size('sm') // optional 'xs', 'sm', 'md', 'lg', 'xl'
    ->withBlack(swap: '#111111')
    ->withWhite(swap: '#f5f5f5'),

颜色选择选择器

只需使用ColorPickerSelect字段将字段添加到您的表单中，并传入Filament颜色对象的数组。

注意：阴影仅适用于Filament颜色对象

use Awcodes\Palette\Forms\Components\ColorPickerSelect;
use Filament\Support\Colors\Color;

ColorPickerSelect::make('color')
    ->colors([
        'indigo' => Color::Indigo
        'badass' => Color::hex('#bada55'),
        'salmon' => '#fa8072',
        'bg-gradient-secondary' => 'bg-gradient-secondary'
    ])
    ->shades([
        'badass' => 300
    ])
    ->withBlack(swap: '#111111')
    ->withWhite(swap: '#f5f5f5'),

颜色条目

只需将ColorEntry添加到您的信息架构中。

use Awcodes\Palette\Infolists\Components\ColorEntry;

ColorEntry::make('color')
    ->size('sm') // optional 'xs', 'sm', 'md', 'lg', 'xl'

样式钩子类

可用于在ColorPicker上自定义CSS的可用类

对于主容器：palette-color-picker
对于项目：palette-color-picker-item
对于活动/选定项目：palette-color-picker-item-active

可用于在ColorEntry上自定义CSS的可用类

对于主容器：palette-entry-item

测试

composer test

变更日志

有关最近更改的更多信息，请参阅变更日志。

贡献

有关详细信息，请参阅贡献指南。

安全漏洞

有关如何报告安全漏洞，请参阅我们的安全策略。

致谢

许可证

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

awcodes / palette

维护者

详细信息