Metronic

下一代应用程序的终极Bootstrap和Angular 6管理主题框架,一次购买永久包更新,当前版本5.5.5。

How to create a custom page

There are the example how to create your own page and add it to the left side menu and breadcrumbs.

1. Create a custom Page

Run this Angular CLI command for generate new component:

ng generate component content/pages/my-page

The result of the command is:

how-to-create-custom-page-module

2. Register new component in the routing

Register new component in the /src/app/content/pages/pages-routing.module.ts file:

// Other imports
import { MyPageComponent } from './my-page/my-page.component'; // <= Import component

const routes: Routes = [
  {
    path: '',
    component: PagesComponent,
      canActivate: [NgxPermissionsGuard],
      data: {
        permissions: {
          only: ['ADMIN', 'USER'],
            except: ['GUEST'],
            redirectTo: '/login'
          }
        },
        children: [
        {
          path: '',
          loadChildren: './components/dashboard/dashboard.module#DashboardModule'
        },
        {
          path: 'my-page', // <= Page URL
          component: MyPageComponent // <= Page component registration
        },
        {
          path: 'mail',
          loadChildren: './components/apps/mail/mail.module#MailModule'
        },
        {
          path: 'ecommerce',
          loadChildren: './components/apps/e-commerce/e-commerce.module#ECommerceModule'
        }

// Other code

3. Add page to the left menu

Add page to the left menu in /src/app/config/menu.ts file:

// Other imports 
import { ConfigModel } from '../core/interfaces/config';

export class MenuConfig implements ConfigModel {
  public config: any = {};

  constructor() {
    this.config = {
      header: {
        self: {},
        items: [
          // Header menu configuration
        ]
      },
      aside: {
        self: {},
        items: [
          {
            title: 'Dashboard',
            desc: 'Some description goes here',
            root: true,
            icon: 'flaticon-line-graph',
            page: '/',
            badge: {type: 'm-badge--danger', value: '2'},
            translate: 'MENU.DASHBOARD'
          },
          {
            title: 'My Page', // <= Title of the page
            desc: 'Some my description goes here', // <= Description of the page
            root: true,
            page: '/my-page', // <= URL
            icon: 'flaticon-line-graph' // <= Choose the icon
           },
           {section: 'Components'},

// Other code

4. Add page to the breadcumbs

Add page to the breadcrumbs in /src/app/config/pages.ts file:

import { ConfigModel } from '../core/interfaces/config';

export class PagesConfig implements ConfigModel {
  public config: any = {};

  constructor() {
    this.config = {
      '/': {
        page: {
          title: 'Dashboard',
          desc: 'Latest updates and statistic charts'
        }
      },
      'my-page': { // <= add page URL
        page: { title: 'My page', desc: 'My page desc' } // <= Page name and description
      },
      ngbootstrap: {
        accordion: {
           page: { title: 'Accordion', desc: '' }
        },
        alert: {
          page: { title: 'Alert', desc: '' }
        },

// Other code

The result of the 4 steps is:

how-to-create-custom-page-3

我运营着一个由20个产品经理,开发人员,QA和UX资源组成的团队。以前我们自己设计了一切。对于我们最新的平台,我们试用了Metronic。我无法高估Metronic的影响力。它加速了3倍的开发,并将质量保证问题减少了50%。如果你减少了对设计时间/资源的需求,开发速度的提高和质量保证的减少,那么这个项目可能只为我们节省了10万美元,我计划将它用于所有平台。
设计的灵活性也使我们能够提供更好的外观和工作平台,并使我的头痛减少90%。谢谢KeenThemes! Jonathan Bartlett, Metronic 客户

强大的框架

Metronic的所有产品都可在全球范围内定制,以提供无限的独特风格项目

多演示

为数百个演示中的下一个项目选择一个完美的设计

无限组件

利用最新的UI / UX交易为您的应用程序提供大量组件的大量组件

Angular 6支持

企业级Angular 6集成了内置的身份验证模块等等

Bootstrap 4

Metronic深度定制Bootstrap,具有原生外观

独家数据库插件

我们超级时尚和直观的Datatable包含所有先进的CRUD功能

60,000+强

Metronic是全球60,000多名开发商信赖的唯一主题

持续更新

使用新演示和功能的终身更新得到保证

质量准则

Metronic是一个具有代码结构的作家,所有开发人员都可以轻松拿起并坠入爱河

全球超过60,000名开发人员信赖的Ultimate Bootstrap Admin主题