<div class="page page-material"> <!-- page header --> <div class="pageheader"> <h2>{{page.title}} <span>// {{page.subtitle}}</span></h2> <div class="page-bar"> <ul class="page-breadcrumb"> <li> <a ui-sref="app.dashboard"><i class="fa fa-home"></i> {{main.title}}</a> </li> <li> <a href="javascript:;">Material UI</a> </li> <li> <a ui-sref="app.material.bottom-sheet">{{page.title}}</a> </li> </ul> </div> </div> <!-- /page header --> <!-- page content --> <div class="pagecontent"> <div flex layout="column"> <section class="demo-container md-whiteframe-z1"> <md-toolbar> <div class="md-toolbar-tools"> <md-button class="md-icon-button" aria-label="Settings"> <md-icon md-font-icon="zmdi zmdi-menu"></md-icon> </md-button> <h2> <span>Basic Usage</span> </h2> <span flex></span> <md-menu md-position-mode="target-right target"> <md-button aria-label="More" class="md-icon-button" ng-click="$mdOpenMenu()"> <md-icon md-menu-origin md-font-icon="zmdi zmdi-more-vert"></md-icon> </md-button> <md-menu-content width="4"> <md-menu-item ng-repeat="item in [1, 2, 3]"> <md-button> Option {{item}} </md-button> </md-menu-item> </md-menu-content> </md-menu> </div> </md-toolbar> <md-content class="md-padding" id="bottomSheetContainer"> <h2 class="md-title text-hotpink">Usage</h2> <p class="docs">Bottom sheets can be displayed by clicking one of the buttons below. Once shown, it can be dismissed by either swiping down or clicking in the shaded area.</p> <h2 class="md-title text-hotpink">Actions</h2> <p class="docs">Use one of the following buttons to display a bottom sheet.</p> <div class="bottom-sheet-demo inset" layout="row" layout-sm="column" layout-align="center"> <md-button flex="50" class="md-primary md-raised" ng-click="showListBottomSheet($event)">Show as List</md-button> <md-button flex="50" class="md-primary md-raised" ng-click="showGridBottomSheet($event)">Show as Grid</md-button> </div> <div ng-if="alert"> <br> <b layout="row" layout-align="center center" class="md-padding"> {{alert}} </b> </div> <script type="text/ng-template" id="bottom-sheet-list-template.html"><md-bottom-sheet class="md-list md-has-header bottomSheet">
              <md-subheader>Comment Actions</md-subheader>
              <md-list>
                <md-list-item ng-repeat="item in items">
                  <md-button class="md-list-item-content" ng-click="listItemClick($index)">
                    <md-icon md-font-icon="{{item.icon}}"></md-icon>
                    <span class="md-inline-list-icon-label">{{ item.name }}</span>
                  </md-button>
                </md-list-item>
              </md-list>
            </md-bottom-sheet></script> <script type="text/ng-template" id="bottom-sheet-grid-template.html"><md-bottom-sheet class="md-grid bottomSheet">
              <md-list>
                <md-list-item ng-repeat="item in items">
                  <md-button class="md-grid-item-content" ng-click="listItemClick($index)">
                    <md-icon md-font-icon="{{item.icon}}"></md-icon>
                    <div class="md-grid-text"> {{ item.name }} </div>
                  </md-button>
                </md-list-item>
              </md-list>
            </md-bottom-sheet></script> </md-content> </section> </div> </div> <!-- /page content --> </div>