pip-webui/pip-webui-layouts/samples/split/item_details_panel.html

HTML5 UI for LOB applications

<div class="pip-header">
    <div class="pip-details-title">
        <p class="pip-title">{{ selectedItem.title }}</p>
    </div>
    <md-menu md-position-mode="target-right target" class="position-right">
        <md-button class="pip-action md-icon-button" aria-label="menu"
                   ng-click="$mdOpenMenu()">
            <md-icon md-svg-icon="icons:vdots"></md-icon>
        </md-button>
        <md-menu-content width="3">
            <md-menu-item>
                <md-button>Action 1</md-button>
            </md-menu-item>
            <md-menu-item>
                <md-button>Action 2</md-button>
            </md-menu-item>
        </md-menu-content>
    </md-menu>
</div>
<div class="pip-body lp0 rp0">
    <div class="pip-drilldown-list ng-scope">
        <button class="pip-drilldown-list-item md-button md-ink-ripple"
                ng-class="{'pip-selected':!$sizeSmall && $state.name == 'tool.view.split.details' && selected.showPanel == 'sub1' }"
                type="button" ng-click="onSub1Click(selectedItem)">
            <div class="pip-content">
                <p class="pip-title ng-scope">Sub1 List</p>
                <md-icon md-svg-icon="icons:chevron-right" class="ng-scope ng-isolate-scope" aria-hidden="true">
                </md-icon>
            </div>
        </button>
        <button class="pip-drilldown-list-item md-button md-ink-ripple"
                ng-class="{'pip-selected':!$sizeSmall && $state.name == 'tool.view.split.details' && selected.showPanel == 'sub2' }"
                type="button" ng-click="onSub2Click(selectedItem)">
            <div class="pip-content">
                <p class="pip-title ng-scope">Sub2 details</p>
                <md-icon md-svg-icon="icons:chevron-right" class="ng-scope ng-isolate-scope" aria-hidden="true">
                </md-icon>
            </div>
        </button>
    </div>
</div>

<div class="pip-footer">
    <div class="pip-action-list w-stretch">
        <md-button class="pip-action-list-item">
            <md-icon md-svg-icon="icons:check" class="pip-pic"></md-icon>
            <div class="pip-title">Yes</div>
        </md-button>
        <md-button class="pip-action-list-item">
            <md-icon md-svg-icon="icons:cross" class="pip-pic"></md-icon>
            <div class="pip-title">No</div>
        </md-button>
    </div>
</div>