README

• 简单的响应式横幅

安装

composer require agenciafmd/admix-banners:dev-master

执行迁移

php artisan migrate

自定义横幅最简单的方法是发布

config/upload-configs.php
database/faker/banners/*

为此，我们将使用。

php artisan vendor:publish --tag=admix-banners:minimal

为了更强大的自定义，执行

php artisan vendor:publish --tag=admix-banners:seeders

别忘了

• 将database/faker/banners中的横幅进行替换，以确保项目美观
• 在database/seeders/DatabaseSeeder.php中添加BannersTableSeeder::class
• 执行composer dumpautoload

用法

调用组件<x-banner />

默认配置是

<x-banner quantity=4
          location='home'
          :random=false
          template='agenciafmd/banners::components.home'
/>

如果需要自定义横幅列表，在前端命名空间中创建组件的blade文件

配置

如果需要修改，使用命令发布配置文件

php artisan vendor:publish --tag=admix-banners:configs

对于多个位置，在admix-banners.php中的locations添加更多项，并在upload-configs.php中配置尺寸

示例

<?php

return [
    'name' => 'Banners',
    'icon' => 'icon fe-monitor',
    'sort' => 20,
    'default_sort' => [
        '-is_active',
        '-star',
        '-published_at',
        'name',
    ],
    'locations' => [
        'home' => [
            'name' => 'Home',
            'html' => true,
            'meta' => [
                [
                    'label' => 'tipo',
                    'name' => 'type',
                    'options' => [
                        'Plantas Baixas',
                        'Implantações',
                    ],
                ],
                [
                    'label' => 'título',
                    'name' => 'title',
                ],
                [
                    'label' => 'subtítulo',
                    'name' => 'subtitle',
                ],
            ],
        ],
        ...
    ],
];

对于更多格式，在banner中添加更多项

<?php

return [
    'banner' => [
        'home' => [
            'desktop' => [
                'label' => 'desktop',
                'sources' => [
                    [
                        'conversion' => 'desktop',
                        'media' => '(min-width: 1600px)',
                        'width' => 1920 * 2,
                        'height' => 850 * 2,
                    ],
                ],
            ],
            'notebook' => [
                'label' => 'notebook',
                'sources' => [
                    [
                        'conversion' => 'notebook',
                        'media' => '(min-width: 1024px)',
                        'width' => 1366 * 2,
                        'height' => 605 * 2,
                    ],
                ],
            ],
            'mobile' => [
                'label' => 'mobile',
                'sources' => [
                    [
                        'conversion' => 'mobile',
                        'media' => '(max-width: 1023px)',
                        'width' => 375 * 2,
                        'height' => 600 * 2,
                    ],
                ],
            ],
        ],
        ...
    ],
];