README

为Laravel Nova提供美观的颜色选择字段。使用 vue-swatches。

截图

安装

您可以通过composer将此包安装到使用Nova的Laravel应用程序中

composer require ynacorp/nova-swatches

用法

只需在您的Nova资源中使用Swatches字段即可

namespace App\Nova;

use Yna\NovaSwatches\Swatches;

class Article extends Resource
{
    // ...

    public function fields(Request $request)
    {
        return [
            // ...

            Swatches::make('Color'),

            // ...
        ];
    }
}

自定义

预设

vue-swatches自带一些颜色预设。

    public function fields(Request $request)
    {
        return [
            // ...

            // material-basic is a basic collection of material colors.
            Swatches::make('Color')->colors('material-basic'),

            // ...
        ];
    }

尝试在material-basic、text-basic、text-advanced、material-light和material-dark之间切换。

如果您对预设不满意，可以像下面这样继续自定义。

调色板

您也可以提供一个颜色数组供用户选择。

    public function fields(Request $request)
    {
        return [
            // ...

            // material-basic is a basic collection of material colors.
            Swatches::make('Color')->colors(['#ffffff', '#000']),

            // ...
        ];
    }

还有其他...

vue-swatches非常可自定义，您可以直接传递一个props数组给它

    public function fields(Request $request)
    {
        return [
            // ...

            Swatches::make('Color')
                ->withProps([
                    'colors' => ["#4ae2c4", "#4fccff", "#41c84d"],
                    'show-fallback' => true,
                    'fallback-type' => 'input',
                    'popover-to' => 'left',

                    // More options at https://saintplay.github.io/vue-swatches/api/props.html
                ]),

            // ...
        ];
    }

查看vue-swatches的props部分以获取更多选项。

配置

虽然Swatches组件可以流畅地配置，但您也可以通过发布包的配置来设置默认值

php artisan vendor:publish --tag=config --provider=Yna\\NovaSwatches\\FieldServiceProvider

现在编辑config/nova/swatches.php文件以自定义项目首选的默认值

<?php

return [
    /**
     * Props to pass to the vue-swatches component.
     *
     * See https://saintplay.github.io/vue-swatches/api/props.html
     */
    'props' => [
        'colors' => 'basic', // Preset
        // 'colors' => 'material-basic', // Preset
        // 'colors' => ['#ffffff', '#000'], // Array

        // 'show-fallback' => true,
        // 'fallback-input-type' => 'input', // Or "color"
    ]
];

贡献

我们非常愿意接受对Nova Swatches的任何贡献。