README

font-awesome-picker 的扩展，用颜色替换图标。

特性

轻松选择在前端任何位置使用的颜色块
可以按颜色名称筛选
添加新颜色几乎不需要开发/代码行

安装

Composer

理想情况下，应使用 composer 安装此模块。composer require "moe/color-swab:@stable"

屏幕截图

颜色块查看

筛选查看

使用方法

一个基本的工作示例，将以下内容包含到任何你想要字段类的类中；

    private static $db = array(
        'MenuBackgroundColor' => 'Varchar(255)',
    );

    public function getCMSFields()
    {
        $fields = parent::getCMSFields();

        $fields->addFieldsToTab('Root.Main', array(
            ColorSwabField::create('MenuBackgroundColor', 'Megamenu background colour')
        ));

        return $fields;
    }

然后在模板中简单地将它包含在类元素中

    <nav class="{$MenuBackgroundColor}">[...]</nav>

控制器扩展应确保你可以访问颜色块，这样你就不需要重复 CSS 文件。

添加/更改颜色

要修改颜色选择，需要更改两个文件。

js/color-swabs.js
css/color-swabs.css

例如：要添加黑色，进行以下更改

// js/color-swabs.js    
    var colorSwabs = [
        //[...]
        'black-500'
    ];

/* css/color-swabs.css */
    .color-black-500 {
        background: #000000;
    }

想要图标而不是颜色吗？

我们为你准备好了，查看 font-awesome！

使用的/修改的库

Font Awesome Icon Picker

moe / color-swab

维护者

详细信息