muse-ui

demo

by Mike Lin

HTML

<script src="//cdn.bootcss.com/vue/2.0.6/vue.js"></script>
<script src="https://unpkg.com/[email protected]/dist/muse-ui.js"></script>
<link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/muse-ui.css">
<script src="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700,400italic"></script>
<div id="app">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700,400italic">
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
<div class="demo-raised-button-container">
  <mu-raised-button class="demo-raised-button" label="选择文件">
    <input type="file" class="file-button">
  </mu-raised-button>
  <mu-raised-button class="demo-raised-button" label="文字在后面" icon="android" primary></mu-raised-button>
  <mu-raised-button class="demo-raised-button" label="文字在前面" label-position="before" icon="folder" secondary></mu-raised-button>
  <mu-raised-button class="demo-raised-button" href="https://github.com/museui/muse-ui" label="链接按钮" label-position="after" secondary>
      <i class="mudocs-icon-custom-github mu-icon" style="font-size:24px;"></i>
  </mu-raised-button>
  <mu-raised-button class="demo-raised-button" icon="android" background-color="#a4c639"></mu-raised-button>
</div>
</div>

CSS

.file-button{
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  opacity: 0;
}

.demo-raised-button-container{
  display: flex;
  align-items: center;
  flex-wrap: wrap;
}
.demo-raised-button {
  margin: 12px;
}

JavaScript

new Vue({
	  el: '#app'
})