基于 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=&quo.........完整代码请登录后点击上方下载按钮下载查看
热门代码搜索
其他语言代码库
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