基于 Vue 2.0 优雅的 Material Design UI 组件库muse-ui示例代码-html代码-BFW代码库

基于 Vue 2.0 优雅的 Material Design UI 组件库muse-ui示例代码

代码语言：html

代码描述：基于 Vue 2.0 优雅的 Material Design UI 组件库muse-ui示例代码，采用cdn引入muse-ui

下面为部分代码预览，完整代码请点击下载或在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-dr.........完整代码请登录后点击上方下载按钮下载查看