angular-material-npfixed/src/components/panel/demoGroups/index.html

The Angular Material project is an implementation of Material Design in Angular.js. This project provides a set of reusable, well-tested, and accessible Material Design UI components. Angular Material is supported internally at Google by the Angular.js, M

<div ng-controller="PanelGroupsCtrl as ctrl" ng-cloak>

  <md-toolbar class="md-accent">
    <div class="md-toolbar-tools">
      <md-button
        class="md-icon-button"
        aria-label="Settings"
        ng-click="ctrl.showToolbarMenu($event, ctrl.settings)">
        <md-icon md-svg-icon="img/icons/menu.svg"></md-icon>
      </md-button>
      <h2>Toolbar with grouped panels (Maximum open: 2)</h2>
      <span flex></span>
      <md-button
        class="md-icon-button"
        aria-label="Favorite"
        ng-click="ctrl.showToolbarMenu($event, ctrl.favorite)">
        <md-icon md-svg-icon="img/icons/favorite.svg"></md-icon>
      </md-button>
      <md-button
        class="md-icon-button"
        aria-label="More"
        ng-click="ctrl.showToolbarMenu($event, ctrl.more)">
        <md-icon md-svg-icon="img/icons/more_vert.svg"></md-icon>
      </md-button>
    </div>
  </md-toolbar>

  <md-content layout-padding>
    <p>
      Panels can be added to a group. Groups are used to configure specific
      behaviors on multiple panels. To add a panel to a group, use the
      <code>$mdPanel.newPanelGroup</code> method, or simply add a group name
      to the configuration object passed into the <code>$mdPanel.create</code>
      method.
    </p>
    <p>
      Grouping allows for methods to be applied to several panels at once, i.e.
      closing all panels within the toolbar group, or destroying all panels
      within a dialog group. With the <code>maxOpen</code> property, you can
      also limit the number of panels allowed open within a specific group. This
      can be useful in limiting the number of menu panels allowed open at a
      time, etc.
    </p>

    <div layout="row">
      <div layout="column" flex>
        <h2>Multiple Groups</h2>
        <p>
          Panels can be added to multiple groups. The <code>groupName</code>
          parameter in the panel configuration can be a string or an array of
          strings. This allows for the functionality or constraints of multiple
          groups to apply to each created panel.
        </p>
        <p>
          To give an example, the menus within the toolbar above have been added
          to the <strong>toolbar</strong> and <strong>menus</strong> groups.
          The menus to the right have been added to the <strong>menus</strong>
          group as well. The maximum number of open panels within the
          <strong>toolbar</strong> group is <strong>2</strong>. Within the
          <strong>menus</strong> group it is <strong>3</strong>. Opening the
          menus to the right and more than one in the toolbar will result in
          the first opened panel to the right to close.
        </p>
      </div>
      <div style="width: 45px;"></div>
      <div layout="row" flex="nogrow">
        <md-button
          class="md-fab md-primary"
          aria-label="Tools"
          ng-click="ctrl.showContentMenu($event, ctrl.tools)">
          <md-icon md-svg-icon="img/icons/ic_build_24px.svg"></md-icon>
        </md-button>
        <md-button
          class="md-fab md-accent"
          aria-label="Code"
          ng-click="ctrl.showContentMenu($event, ctrl.code)">
          <md-icon md-svg-icon="img/icons/ic_code_24px.svg"></md-icon>
        </md-button>
      </div>
    </div>
  </md-content>

</div>