pip-webui/pip-webui-css/samples/css_components/action_list.html

HTML5 UI for LOB applications

<p class="text-title h72 m0 bm8 layout-row layout-align-start-center">
    Action List
</p>

<p class="text-subhead2 h48 m0 bm8 layout-row layout-align-start-center">
    Example
</p>

<img src="http://i.imgur.com/SMlCeRP.png" class="pip-sample-pic">

<div class="pip-action-list">

    <md-button class="pip-action-list-item">
        <md-icon class="pip-pic" md-svg-icon="icons:reply"></md-icon>
        <div class="pip-title">Reply</div>
    </md-button>

    <md-button class="pip-action-list-item">
        <md-icon class="pip-pic" md-svg-icon="icons:forward"></md-icon>
        <div class="pip-title">Forward</div>
    </md-button>

    <md-button class="pip-action-list-item">
        <md-icon class="pip-pic" md-svg-icon="icons:cross"></md-icon>
        <div class="pip-title">Delete</div>
    </md-button>
</div>


<div class="pip-action-list">

    <md-button class="pip-action-list-item">
        <md-icon class="pip-pic" md-svg-icon="icons:reply"></md-icon>
        <div class="pip-title"> Do it tomorrow</div>
    </md-button>

    <md-button class="pip-action-list-item">
        <md-icon class="pip-pic" md-svg-icon="icons:forward"></md-icon>
        <div class="pip-title">Forward</div>
    </md-button>

    <md-button class="pip-action-list-item">
        <md-icon class="pip-pic" md-svg-icon="icons:cross"></md-icon>
        <div class="pip-title">Delete</div>
    </md-button>
</div>

<div class="pip-action-list">

    <md-button class="pip-action-list-item">
        <md-icon class="pip-pic" md-svg-icon="icons:reply"></md-icon>
        <div class="pip-title">Редактировать</div>
    </md-button>

    <md-button class="pip-action-list-item">
        <md-icon class="pip-pic" md-svg-icon="icons:forward"></md-icon>
        <div class="pip-title">Конвертировать</div>
    </md-button>

    <md-button class="pip-action-list-item">
        <md-icon class="pip-pic" md-svg-icon="icons:cross"></md-icon>
        <div class="pip-title">Мебелировать</div>
    </md-button>
    <md-button class="pip-action-list-item">
        <md-icon class="pip-pic" md-svg-icon="icons:cross"></md-icon>
        <div class="pip-title">Отказаться</div>
    </md-button>
</div>