基于 Vue 2.0 优雅的 Material Design UI 组件库muse-ui示例代码
代码语言：html
所属分类：布局界面
代码描述：基于 Vue 2.0 优雅的 Material Design UI 组件库muse-ui示例代码，采用cdn引入muse-ui
代码标签： vue muse-ui 组件库 Material
下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, minimal-ui">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700,400italic">
<link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/material-icons.css">
<link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/muse-ui.css">
</head>
<body>
<div id="app">
<mu-container>
<mu-flex justify-content="center" align-items="center">
<mu-switch style="margin-left: 16px" v-model="docked" label="docked"></mu-switch>
<mu-radio style="margin-left: 16px" v-model="position" value="left" label="left"></mu-radio>
<mu-radio style="margin-left: 16px" v-model="position" value="right" label="right"></mu-radio>
<mu-button color="primary" style="margin-left: 16px" @click="opendocker = !opendocker">
toggle
</mu-button>
</mu-flex>
<mu-drawer :open.sync="opendocker" :docked="docked" :right="position === 'right'">
<mu-list>
<mu-list-item button>
<mu-list-item-title>Menu Item 1</mu-list-item-title>
</mu-list-item>
<mu-list-item button>
<mu-list-item-title>Menu Item 2</mu-list-item-title>
</mu-list-item>
<mu-list-item @click="open = false" button>
<mu-list-item-title>Close</mu-list-item-title>
</mu-list-item>
</mu-list>
</mu-drawer>
</mu-container>
<mu-container>
<mu-slider class="demo-slider" color="secondary" v-model="color.value1"></mu-slider>
<mu-slider class="demo-slider" track-color="green" v-model="color.value2"></mu-slider>
<mu-slider class="demo-slider" thumb-color="orange" v-model="color.value3"></mu-slider>
</mu-container>
<mu-button ref="button" @click="open = !open">Dropdown</mu-button>
<mu-popover cover :open.sync="open" :trigger="trigger">
<mu-list>
<mu-list-item button>
<mu-list-item-title>Refresh</mu-list-item-title>
</mu-list-item>
<mu-list-item button>
<mu-list-item-title>Send feedback</mu-list-item-title>
</mu-list-item>
<mu-list-item button>
<mu-list-item-title>Settings</mu-list-item-title>
</mu-list-item>
<mu-list-item button>
<mu-list-item-title>Help</mu-list-item-title>
</mu-list-item>
<mu-list-item button>
<mu-list-item-title>Sign out</mu-list-item-title>
</mu-list-item>
</mu-list>
</mu-popover>
<mu-flex>
显示时间：
<mu-switch class="demo-picker-form" v-model="display"></mu-switch>
</mu-flex>
<mu-flex>
横屏显示：
<mu-checkbox class="demo-picker-form" v-model="landscape" label="landscape"></mu-checkbox>
</mu-flex>
<mu-flex>
时间类型：
<mu-radio class="demo-picker-form" v-model="type" value="ampm" label="ampm"></mu-radio>
<mu-radio class="demo-picker-form" v-model="type" value="24hr" label="24hr"></mu-radio>
</mu-flex>
<mu-flex>
选择模式：
<mu-radio class="demo-picker-form" v-model="viewType" value="clock" label="clock"></mu-radio>
<mu-radio class="demo-picker-form" v-model="viewType" value="list" label="list"></mu-radio>
</mu-flex>
<mu-flex justify-content="between" align-items="end" wrap="wrap">
<mu-paper :z-depth="1">
<mu-time-picker :no-display="!display" :view-type="viewType" :time.sync="time" :format="type" :landscape="landscape"></mu-time-picker>
</mu-paper>
</mu-flex>
<mu-container>
<mu-tabs :value.sync="active3" center color="teal">
<mu-tab>
<mu-icon value="phone"></mu-icon>
RECENTS
</mu-tab>
<mu-tab>
<mu-icon value="favorite"></mu-icon>
FAVORITES
</mu-tab>
<mu-tab>
<mu-icon value="person_pin"></mu-icon>
NEARBY
</mu-tab>
</mu-tabs>
<div class="demo-text" v-if="active3 === 0">
<p>“……是的，我承认从很早以前我都害怕死亡，在医院里被人研究的时候，以前做出布局的时候，其实我很怕死的，因为除了死以外，我没有值得珍惜的东西，很奇怪是吧？恰好是这样我真的很怕死，因为我想要有值得珍惜的东西之后，死亡之后才会不寂寞，我才能够安然的面对死亡……”</p>
</div>
<div class="demo-text" v-if="active3 === 1">
<p>“我的心从来没有这么坚定过，所以我会为了补偿而死，也可以为了补偿而死……一辈子，急辈子都无所谓，我绝不后退！”</p>
<p>“如果我后退呢？如果我想要死呢？我不想你再次背对着我逃跑了……”</p>
<p>“那么就去地狱找到你，我绝对不逃！”</p>
<p>“白痴，你也哭了？因为那些软弱拖累你的脚步？”</p>
</div>
<div class="demo-text" v-if="active3 === 2">
<.........完整代码请登录后点击上方下载按钮下载查看
热门代码搜索
其他语言代码库
Html代码库
Python代码库
Java代码库
Php代码库
Phpcli代码库
Golang代码库
C#代码库
Nodejs代码库
C代码库
C++代码库
Sql代码库
R代码库
Rust代码库
Ruby代码库
Dart代码库
Vb代码库
D代码库
F#代码库
Typescript代码库
Coffeescript代码库
Julia代码库
Kotlin代码库
Perl代码库
Groovy代码库
Lua代码库
Vala代码库
Ocaml代码库
Assembly代码库
Objectc代码库
Scala代码库
Erlang代码库
Pascal代码库
Swift代码库
Fortran代码库
Bash代码库
Clojure代码库
Ada代码库
Elixir代码库
Cobol代码库
Haskell代码库
Nim代码库
Racket代码库
Lisp代码库
网友评论0