vue-material/src/docs/pages/ButtonToggle.vue
2016-07-21 18:56:06 -03:00

77 lines
2.1 KiB
Vue

<template>
<section>
<h2 class="title">Button Toggle</h2>
<md-button-toggle class="md-button-group">
<md-button class="md-icon-button md-toggle">
<md-icon>format_bold</md-icon>
</md-button>
<md-button class="md-icon-button">
<md-icon>format_italic</md-icon>
</md-button>
<md-button class="md-icon-button">
<md-icon>strikethrough_s</md-icon>
</md-button>
<md-button class="md-icon-button md-toggle">
<md-icon>title</md-icon>
</md-button>
</md-button-toggle>
<md-button-toggle type="radio" class="md-button-group md-primary" style="margin-top: 24px">
<md-button class="md-icon-button">
<md-icon>format_align_left</md-icon>
</md-button>
<md-button class="md-icon-button md-toggle">
<md-icon>format_align_center</md-icon>
</md-button>
<md-button class="md-icon-button">
<md-icon>format_align_right</md-icon>
</md-button>
<md-button class="md-icon-button">
<md-icon>format_align_justify</md-icon>
</md-button>
</md-button-toggle>
<md-button-toggle class="md-button-group md-warn" style="margin-top: 24px">
<md-button class="md-icon-button md-toggle">
<md-icon>format_bold</md-icon>
</md-button>
<md-button class="md-icon-button md-toggle">
<md-icon>format_italic</md-icon>
</md-button>
<md-button class="md-icon-button">
<md-icon>format_underline</md-icon>
</md-button>
<md-button class="md-icon-button">
<md-icon>title</md-icon>
</md-button>
</md-button-toggle>
<md-button-toggle class="md-button-group md-accent" style="margin-top: 24px">
<md-button class="md-icon-button md-toggle">
<md-icon>format_bold</md-icon>
</md-button>
<md-button class="md-icon-button md-toggle">
<md-icon>format_italic</md-icon>
</md-button>
<md-button class="md-icon-button">
<md-icon>strikethrough_s</md-icon>
</md-button>
<md-button class="md-icon-button">
<md-icon>title</md-icon>
</md-button>
</md-button-toggle>
</section>
</template>