README

#Randock Metronic 5 Bundle

要求

要使用 metronic，我们需要安装 yarn 和 gulp。我们需要在 Dockerfile 中添加类似的内容。

RUN curl -sS https://dl.yarnpkg.com/debian/pubkey.gpg | apt-key add - && \
    echo "deb https://dl.yarnpkg.com/debian/ stable main" | tee /etc/apt/sources.list.d/yarn.list && \
    apt-get update && apt-get install yarn -y

RUN npm cache clean -f && npm install -g n && n stable

RUN npm install gulp -g

安装

通过 Composer

$ composer require randock/metronic5-bundle

将捆绑包添加到 bundles.php

return [
    // ...
    Randock\Metronic5Bundle\RandockMetronic5Bundle::class => ['all' => true],
];

配置

Symfony

选择我们将要使用的布局。有两种可能性：1 或 5。

randock_metronic5:
    layout: 1

Gulp

对于版本 1.0.0，gulp 的最低要求版本是 4.0。

首先，我们必须使用 yarn 安装 gulp

yarn add gulp

必须有一个 gulpfile.js 文件来指示 gulp 脚本的位置。我们可以在这个文件 doc/conf/files/gulp 中找到此文件。

gulp.json 文件是包含我们将要在项目中使用的 js、css 和图像的文件。它还指示 gulp 文件的输出文件夹。

我们可以在 doc/conf/files/gulp 中找到两个名为 gulp-layout1 和 gulp-layout5 的布局1和布局5的示例文件。这些是基础文件，我们可以删除或添加来自 metronic5 捆绑包中的 js、css 或图像。

Webpack

在 webpack.config.js 中，必须添加来自 gulp 的输出文件。理想情况下，它们应包含在共享入口中。您还应使用 .autoProvidejQuery() 从 encore。

示例：

    .autoProvidejQuery()
    .createSharedEntry('theme', [
        './assets/dist/vendors/base/vendors.bundle.js',
        './assets/dist/vendors/base/vendors.bundle.css',
        './assets/dist/demo/default/base/scripts.bundle.js',
        './assets/dist/demo/default/base/style.bundle.css',
        './assets/sass/custom.scss'
    ])

如果有抛出由未定义的变量引起的错误，你应该使用 .addPlugin 包含它。

示例

.addPlugin(new webpack.ProvidePlugin({
        zenscroll: path.resolve(__dirname, './node_modules/zenscroll/zenscroll.js'),
    })
)

如何使用菜单

1 - 创建类

创建一个实现 Randock\MetronicBundle\Menu\Item\MenuItemProviderInterface 接口的类。

必须实现的功能，将在内部有一个 if 语句，以指示我们想要向哪个菜单添加元素。$typeMenu 的可能值为 MenuBuilder::TOP_MENU 和 MenuBuilder::MAIN_MENU

示例

if 语句内的代码将只对 top_menu 执行。

    if (MenuBuilder::TOP_MENU === $typeMenu){
        //some code
    }

if 语句内的代码将只对 main_menu 执行。

    if (MenuBuilder::MAIN_MENU === $typeMenu){
        //some code
    }

if 语句内的代码将同时执行这两个菜单，因此如果我们添加元素，它们将同时添加到这两个菜单中。

    if (MenuBuilder::TOP_MENU === $typeMenu || MenuBuilder::MAIN_MENU === $typeMenu) {
        //some code
    }

2 - 向菜单添加项目

2.1 - 如何向菜单添加项目。

-向菜单根添加项目

此代码将向根菜单添加一个名为 'itemName' 的项目。每个具有子菜单的项目都应该将 'uri' 属性设置为' javascript:;'。

$menu->addChild(‘itemName’, ['uri' => 'javascript:;']);

此代码将在上一个项目 'itemName' 内添加一个项目，使其成为子菜单。新项目将链接到由 'route_name' 定义的路线。

$menu[‘itemName’]->addChild(‘itemNameChild’, [‘route’ => ‘route_name’]);

如果路线需要参数，我们可以使用 'routeParameters' 添加它，如以下示例所示

$menu[‘itemName’]
    ->addChild(
        ‘itemNameChild’, 
        [
            ‘route’ => ‘route_name’, 
            'routeParameters' => ['id' => 3]
        ]
    );

2.2 - 给菜单排序

要排序菜单，我们必须添加一个额外的参数 'orderNumber' 并设置其值。此参数将使用 setExtra 函数添加。

项目按升序排序，orderNumber 越低，在菜单中的位置越靠左/上方。

未设置 'orderNumber' 值的项目将出现在所有设置了值的项目之后。

强烈建议使用它们之间有间距的值。例如，10、20、30、40……如果我们想在它们之间添加一些项目，这将很有用。

示例：此代码将添加一个orderNumber值为20的项目，然后它将添加一个值为10的同级项目。正如我们之前所说的，我们添加的值较小的项目将位于菜单的开始处。

$menu['Test']
    ->addChild('Second Item',['uri' => 'javascript:;'])
    ->setExtra('orderNumber', 20);
    
$menu['Test']
    ->addChild('First Item',['uri' => 'javascript:;'])
    ->setExtra('orderNumber', 10);

2.3 项目自定义选项

菜单项有添加图标和通知的可能性。

我们可以在下面的代码中添加一些附加功能。

$menu
    ->addChild('I am a menu item', ['uri' => 'javascript:;'])
    ->setExtras(
        [
            'icon' => 'flaticon-share',
            'notification' => 5,
            'notificationType' => MenuItemProviderInterface::DANGER
        ]
    );

notificationType的可能值有：{MenuItemProviderInterface::SUCCESS, MenuItemProviderInterface::WARNING, MenuItemProviderInterface::DANGER, MenuItemProviderInterface::INFO}

我们还可以使用点选项，这将添加如下所示的点。

使用的代码

$menu
    ->addChild('Test', ['uri' => 'javascript:;']);

$menu['Test']
    ->addChild('Second Item', ['uri' => 'javascript:;'])
    ->setExtras(
        [
            'dot' => 'dot',
            'notification' => 5,
            'notificationType' => 'danger'
        ]
    );

图标和点选项不能同时使用。

2.4 顶级菜单约束

顶层菜单只有在1级深度项的情况下才能正常工作。

2.5 顶级菜单分隔符

要向菜单添加分隔符/空白空间，我们必须使用函数向根添加一个子项。

->setAttribute('class', 'm-nav__separator m-nav__separator--fit')

此代码（在顶层菜单中渲染）将生成一个包含一个项目、一个分隔符和另外两个项目的菜单。

$menu
    ->addChild('I am a menu item', ['uri' => 'javascript:;'])
    ->setExtras(
        [
            'icon' => 'flaticon-share',
            'notification' => 5,
            'notificationType' => MenuItemProviderInterface::DANGER
        ]
    );
$menu
    ->addChild('divider', ['uri' => 'javascript:;'])
    ->setAttribute('class', 'm-nav__separator m-nav__separator--fit')
    ->setExtra('divider', true);

$menu
    ->addChild('I am another menu item', ['uri' => 'javascript:;'])
    ->setExtras(
        [
            'icon' => 'flaticon-share',
            'notification' => 5,
            'notificationType' => MenuItemProviderInterface::INFO
        ]
    );
$menu
    ->addChild('Menu Item', ['uri' => 'javascript:;'])
    ->setExtras(
        [
            'icon' => 'flaticon-share',
            'notification' => 5,
            'notificationType' => MenuItemProviderInterface::INFO
        ]
    );

此代码将生成以下输出。

3 - 创建服务

使用刚刚创建的类创建一个服务，并使用标签 { name: metronic.menu_add_items, priority: X}。

优先级用于确定服务的调用顺序。数字越低，服务调用越早。
请记住将其设置为公共的。

示例

serviceName:
    class: ClassName
    tags:
        - { name: metronic.menu_add_items, priority: 50 }
    public: true

如何使用 headerList

1- 创建服务

1.1 - 创建一个类，其实现了Randock\Metronic5Bundle\HeaderBuilder\HeaderList\Definition\HeaderListInterface接口，并标记为name: metronic.header_dropdown_list。

示例

    Randock\WordpressManager\Infrastructure\HeaderTest\TaskHeaderList:
        class: Randock\WordpressManager\Infrastructure\HeaderTest\TaskHeaderList
        tags:
            - { name: metronic.header_list, priority: 10 }
        public: true

优先级用于确定服务的调用顺序。数字越低，渲染越早。它将从左到右渲染。

2- 创建类

创建一个实现Randock\Metronic5Bundle\HeaderBuilder\HeaderList\Definition\HeaderListInterface接口的类。

####2.1 类函数

getType(): 目前唯一选项是HeaderListInterface::NOTIFICATION，因此此方法应返回该值。
getItems() (通知)：应返回一个NotificationHeaderListItem对象的数组，这些对象可以具有以下属性
- title → 列表元素的第一行文本
- url → 点击标题后我们将被重定向到的url
- rightText → 以特殊格式显示在标题右侧的文本
- badge（可以是文本或图标）
  - text→ 徽章的文本
  - icon→ 徽章的图标
  - type→ 徽章的类型（不同颜色）。可以具有以下值 → {NotificationHeaderListItem::SUCCESS, NotificationHeaderListItem::WARNING, NotificationHeaderListItem::INFO, NotificationHeaderListItem::BRAND, NotificationHeaderListItem::METAL, NotificationHeaderListItem::LIGHT, NotificationHeaderListItem::ACCENT, NotificationHeaderListItem::FOCUS, NotificationHeaderListItem::PRIMARY }
- linkAfterTitle→ 标题右侧的链接。它有两个必需参数
  - href→ 链接的路由
  - text→ 链接的文本
getOptions: 不需要选项。

示例

[
    'header' => [
        'title' => 'Hei! I\'m a title',
        'subtitle' => 'And I am a subtitle'
    ],
    'height' => '200',
    'newItems' => true,
    'icon' => 'flaticon-music-2'
];

icon: 它必须有表示图标的必要类。
header
- title→ 将显示在标题中的文本
- subtitle→ 标题背景颜色
height→ 显示的headerList的高度
newItems：如果定义且为true，则在图标上方显示一个红色点
icon→ 头部列表的图标

randock / metronic5-bundle

维护者

详细信息

README

目录

要求

安装

配置

Symfony

Gulp

Webpack

如何使用菜单

1 - 创建类

创建一个实现 Randock\MetronicBundle\Menu\Item\MenuItemProviderInterface 接口的类。

2 - 向菜单添加项目

2.1 - 如何向菜单添加项目。

2.2 - 给菜单排序

2.3 项目自定义选项

2.4 顶级菜单约束

2.5 顶级菜单分隔符

3 - 创建服务

如何使用 headerList

1- 创建服务

2- 创建类

randock / metronic5-bundle

维护者

详细信息

README

目录

要求

安装

配置

Symfony

Gulp

Webpack

如何使用菜单

1 - 创建类

创建一个实现 Randock\MetronicBundle\Menu\Item\MenuItemProviderInterface 接口 的类。

2 - 向菜单添加项目

2.1 - 如何向菜单添加项目。

2.2 - 给菜单排序

2.3 项目自定义选项

2.4 顶级菜单约束

2.5 顶级菜单分隔符

3 - 创建服务

如何使用 headerList

1- 创建服务

2- 创建类

创建一个实现 Randock\MetronicBundle\Menu\Item\MenuItemProviderInterface 接口的类。