c-mdui-a
Version:
A fast way to build an application based on Material Design UI(MDUI).
566 lines (537 loc) • 25.6 kB
HTML
<html lang="zh-cmn-Hans">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0,maximum-scale=1.0, user-scalable=no"/>
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>
<meta name="renderer" content="webkit">
<meta http-equiv="Cache-Control" content="no-siteapp"/>
<title>安装 - MDUI 开发文档, Material Design 前端框架</title>
<link rel="stylesheet" href="assets/mdui-v0.4.2/css/mdui.min.css"/>
<link rel="stylesheet" href="assets/highlight-9.12.0/styles/github-gist.css"/>
<link rel="stylesheet" href="assets/highlight-9.12.0/styles/railscasts.css"/>
<link rel="stylesheet" href="assets/docs/css/docs.css"/>
</head>
<body class="mdui-drawer-body-left mdui-appbar-with-toolbar mdui-theme-primary-indigo mdui-theme-accent-pink">
<header class="mdui-appbar mdui-appbar-fixed">
<div class="mdui-toolbar mdui-color-theme">
<span class="mdui-btn mdui-btn-icon mdui-ripple mdui-ripple-white" mdui-drawer="{target: '#main-drawer', swipe: true}"><i class="mdui-icon material-icons">menu</i></span>
<a href="https://www.mdui.org/" class="mdui-typo-headline mdui-hidden-xs">MDUI</a>
<a href="index.html" class="mdui-typo-title">文档</a>
<div class="mdui-toolbar-spacer"></div>
<span class="mdui-btn mdui-btn-icon mdui-ripple mdui-ripple-white" mdui-dialog="{target: '#dialog-docs-theme'}" mdui-tooltip="{content: '设置主题'}"><i class="mdui-icon material-icons">color_lens</i></span>
<a href="https://github.com/zdhxiong/mdui" target="_blank" class="mdui-btn mdui-btn-icon mdui-ripple mdui-ripple-white" mdui-tooltip="{content: '查看 Github'}">
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 36 36" enable-background="new 0 0 36 36" xml:space="preserve" class="mdui-icon" style="width: 24px;height:24px;">
<path fill-rule="evenodd" clip-rule="evenodd" fill="#ffffff" d="M18,1.4C9,1.4,1.7,8.7,1.7,17.7c0,7.2,4.7,13.3,11.1,15.5
c0.8,0.1,1.1-0.4,1.1-0.8c0-0.4,0-1.4,0-2.8c-4.5,1-5.5-2.2-5.5-2.2c-0.7-1.9-1.8-2.4-1.8-2.4c-1.5-1,0.1-1,0.1-1
c1.6,0.1,2.5,1.7,2.5,1.7c1.5,2.5,3.8,1.8,4.7,1.4c0.1-1.1,0.6-1.8,1-2.2c-3.6-0.4-7.4-1.8-7.4-8.1c0-1.8,0.6-3.2,1.7-4.4
c-0.2-0.4-0.7-2.1,0.2-4.3c0,0,1.4-0.4,4.5,1.7c1.3-0.4,2.7-0.5,4.1-0.5c1.4,0,2.8,0.2,4.1,0.5c3.1-2.1,4.5-1.7,4.5-1.7
c0.9,2.2,0.3,3.9,0.2,4.3c1,1.1,1.7,2.6,1.7,4.4c0,6.3-3.8,7.6-7.4,8c0.6,0.5,1.1,1.5,1.1,3c0,2.2,0,3.9,0,4.5
c0,0.4,0.3,0.9,1.1,0.8c6.5-2.2,11.1-8.3,11.1-15.5C34.3,8.7,27,1.4,18,1.4z"></path>
</svg>
</a>
</div>
</header>
<div class="mdui-drawer" id="main-drawer">
<div class="mdui-list" mdui-collapse="{accordion: true}" style="margin-bottom: 76px;">
<div class="mdui-collapse-item mdui-collapse-item-open">
<div class="mdui-collapse-item-header mdui-list-item mdui-ripple">
<i class="mdui-list-item-icon mdui-icon material-icons mdui-text-color-blue">near_me</i>
<div class="mdui-list-item-content">开始使用</div>
<i class="mdui-collapse-item-arrow mdui-icon material-icons">keyboard_arrow_down</i>
</div>
<div class="mdui-collapse-item-body mdui-list">
<a href="download.html" class="mdui-list-item mdui-ripple mdui-list-item-active">安装</a>
<a href="compatibility.html" class="mdui-list-item mdui-ripple ">兼容性</a>
<a href="jq.html" class="mdui-list-item mdui-ripple ">JavaScript 工具库</a>
<a href="global.html" class="mdui-list-item mdui-ripple ">JavaScript 全局方法</a>
</div>
</div>
<div class="mdui-collapse-item ">
<div class="mdui-collapse-item-header mdui-list-item mdui-ripple">
<i class="mdui-list-item-icon mdui-icon material-icons mdui-text-color-deep-orange">layers</i>
<div class="mdui-list-item-content">样式</div>
<i class="mdui-collapse-item-arrow mdui-icon material-icons">keyboard_arrow_down</i>
</div>
<div class="mdui-collapse-item-body mdui-list">
<a href="color.html" class="mdui-list-item mdui-ripple ">颜色与主题</a>
<a href="font.html" class="mdui-list-item mdui-ripple ">字体</a>
<a href="grid.html" class="mdui-list-item mdui-ripple ">网格布局</a>
<a href="typo.html" class="mdui-list-item mdui-ripple ">排版</a>
<a href="icon.html" class="mdui-list-item mdui-ripple ">图标</a>
<a href="media.html" class="mdui-list-item mdui-ripple ">媒体</a>
<a href="helper.html" class="mdui-list-item mdui-ripple ">辅助类</a>
<a href="shadow.html" class="mdui-list-item mdui-ripple ">阴影</a>
</div>
</div>
<div class="mdui-collapse-item ">
<div class="mdui-collapse-item-header mdui-list-item mdui-ripple">
<i class="mdui-list-item-icon mdui-icon material-icons mdui-text-color-green">widgets</i>
<div class="mdui-list-item-content">组件</div>
<i class="mdui-collapse-item-arrow mdui-icon material-icons">keyboard_arrow_down</i>
</div>
<div class="mdui-collapse-item-body mdui-list">
<a href="ripple.html" class="mdui-list-item mdui-ripple ">涟漪动画效果</a>
<a href="button.html" class="mdui-list-item mdui-ripple ">按钮</a>
<a href="fab.html" class="mdui-list-item mdui-ripple ">浮动操作按钮</a>
<a href="select.html" class="mdui-list-item mdui-ripple ">下拉选择</a>
<a href="divider.html" class="mdui-list-item mdui-ripple ">分隔线</a>
<a href="panel.html" class="mdui-list-item mdui-ripple ">可扩展面板</a>
<a href="textfield.html" class="mdui-list-item mdui-ripple ">文本框</a>
<a href="selection_control.html" class="mdui-list-item mdui-ripple ">选择控件</a>
<a href="slider.html" class="mdui-list-item mdui-ripple ">滑块</a>
<a href="list.html" class="mdui-list-item mdui-ripple ">列表</a>
<a href="list_control.html" class="mdui-list-item mdui-ripple ">列表控制</a>
<a href="grid_list.html" class="mdui-list-item mdui-ripple ">网格列表</a>
<a href="tab.html" class="mdui-list-item mdui-ripple ">Tab 选项卡</a>
<a href="toolbar.html" class="mdui-list-item mdui-ripple ">工具栏</a>
<a href="appbar.html" class="mdui-list-item mdui-ripple ">应用栏</a>
<a href="drawer.html" class="mdui-list-item mdui-ripple ">抽屉式导航</a>
<a href="bottom_nav.html" class="mdui-list-item mdui-ripple ">底部导航栏</a>
<a href="card.html" class="mdui-list-item mdui-ripple ">卡片</a>
<a href="chip.html" class="mdui-list-item mdui-ripple ">纸片</a>
<a href="tooltip.html" class="mdui-list-item mdui-ripple ">工具提示</a>
<a href="snackbar.html" class="mdui-list-item mdui-ripple ">Snackbar</a>
<a href="table.html" class="mdui-list-item mdui-ripple ">表格</a>
<a href="dialog.html" class="mdui-list-item mdui-ripple ">对话框</a>
<a href="menu.html" class="mdui-list-item mdui-ripple ">菜单</a>
<a href="progress.html" class="mdui-list-item mdui-ripple ">进度指示器</a>
</div>
</div>
<div class="mdui-collapse-item ">
<div class="mdui-collapse-item-header mdui-list-item mdui-ripple">
<i class="mdui-list-item-icon mdui-icon material-icons mdui-text-color-brown">view_carousel</i>
<div class="mdui-list-item-content">JavaScript 插件</div>
<i class="mdui-collapse-item-arrow mdui-icon material-icons">keyboard_arrow_down</i>
</div>
<div class="mdui-collapse-item-body mdui-list">
<a href="collapse.html" class="mdui-list-item mdui-ripple ">Collapse</a>
<a href="headroom.html" class="mdui-list-item mdui-ripple ">Headroom</a>
</div>
</div>
<div class="mdui-collapse-item ">
<div class="mdui-collapse-item-header mdui-list-item mdui-ripple">
<i class="mdui-list-item-icon mdui-icon material-icons mdui-text-color-purple">local_mall</i>
<div class="mdui-list-item-content">资源</div>
<i class="mdui-collapse-item-arrow mdui-icon material-icons">keyboard_arrow_down</i>
</div>
<div class="mdui-collapse-item-body mdui-list">
<a href="material_icon.html" class="mdui-list-item mdui-ripple ">Material 图标</a>
</div>
</div>
</div>
</div>
<a id="anchor-top"></a>
<div class="mdui-container doc-container doc-no-cover">
<h1 class="doc-title mdui-text-color-theme">安装</h1>
<div class="doc-intro mdui-typo">
<p>我们提供了多种方式来获取 MDUI,且支持 CommonJS、AMD 模块规范。</p>
</div>
<nav class="doc-toc mdui-text-color-theme">
<ul>
<li>
<a data-scroll href="download.html#install">获取 MDUI</a>
<ul>
<li><a data-scroll href="download.html#download">下载文件</a></li>
<li><a data-scroll href="download.html#cdn">CDN</a></li>
<li><a data-scroll href="download.html#bower">Bower</a></li>
<li><a data-scroll href="download.html#npm">NPM</a></li>
</ul>
</li>
<!--<li><a data-scroll href="#custom">在线定制</a></li>-->
<li><a data-scroll href="download.html#build">自定义构建</a></li>
<li><a data-scroll href="download.html"></a></li>
</ul>
</nav>
<div class="doc-chapter">
<div class="mdui-typo">
<h2 class="doc-chapter-title doc-chapter-title-first mdui-text-color-theme">获取 MDUI <a class="doc-anchor" id="install"></a></h2>
</div>
<div class="mdui-typo">
<h4 class="doc-article-title">下载文件 <a class="doc-anchor" id="download"></a></h4>
<p>你可以直接从 MDUI 官网下载打包后的文件,其中包含了压缩过的和未压缩过的 CSS 和 JavaScript 文件,以及 Roboto 字体文件和 Material Icons 图标文件。</p>
<a href="http://mdui.org/" target="_blank" class="mdui-btn mdui-btn-raised mdui-color-theme-accent mdui-ripple">打开 MDUI 官网</a>
</div>
<div class="mdui-typo">
<h4 class="doc-article-title">CDN <a class="doc-anchor" id="cdn"></a></h4>
<p>cdnjs (国外访问速度较快)</p>
<pre><code class="lang-html"><link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/mdui/0.4.2/css/mdui.min.css">
<script src="//cdnjs.cloudflare.com/ajax/libs/mdui/0.4.2/js/mdui.min.js"></script></code></pre>
<p>css.net (国内访问速度较快)</p>
<pre><code class="lang-html"><link rel="stylesheet" href="//cdnjs.loli.net/ajax/libs/mdui/0.4.2/css/mdui.min.css">
<script src="//cdnjs.loli.net/ajax/libs/mdui/0.4.2/js/mdui.min.js"></script></code></pre>
</div>
<div class="mdui-typo">
<h4 class="doc-article-title">Bower <a class="doc-anchor" id="bower"></a></h4>
<p>执行下面的命令安装 MDUI:</p>
<pre><code>bower install mdui --save</code></pre>
</div>
<div class="mdui-typo">
<h4 class="doc-article-title">NPM <a class="doc-anchor" id="npm"></a></h4>
<p>执行下面的命令安装 MDUI:</p>
<pre><code>npm install mdui --save</code></pre>
</div>
<!--<div class="mdui-typo">
<h4 class="doc-article-title">在线定制 <a class="doc-anchor" id="custom"></a></h4>
<p>我们提供了在线打包工具,使你无需掌握 Gulp,只需点几下鼠标就能完成 MDUI 的定制。</p>
<a href="./custom" class="mdui-btn mdui-btn-raised mdui-color-theme-accent mdui-ripple">开始定制</a>
</div>-->
<div class="mdui-typo">
<h2 class="doc-chapter-title mdui-text-color-theme">自定义构建 <a class="doc-anchor" id="build"></a></h2>
<p>MDUI 使用 <a href="http://gulpjs.com/" target="_blank">Gulp</a> 进行构建。从 <a href="https://github.com/zdhxiong/mdui" target="_blank">Github</a> 获得源代码后,可以执行下列 gulp 命令进行构建。</p>
<div class="mdui-table-fluid">
<table class="mdui-table">
<thead>
<tr>
<th style="min-width: 180px;">命令</th>
<th>说明</th>
</tr>
</thead>
<tbody>
<tr>
<td><code>gulp version</code></td>
<td>输出当前版本号</td>
</tr>
<tr>
<td><code>gulp watch</code></td>
<td>在源码发生修改时执行打包命令</td>
</tr>
<tr>
<td><code>gulp build-css</code></td>
<td>打包 CSS 文件,打包后的文件位于 <code>dist/css/</code> 目录中</td>
</tr>
<tr>
<td><code>gulp build-js</code></td>
<td>打包 JavaScript 文件,打包后的文件位于 <code>dist/js/</code> 目录中</td>
</tr>
<tr>
<td><code>gulp build</code></td>
<td>打包所有文件,打包后的文件位于 <code>dist/</code> 目录中</td>
</tr>
<tr>
<td><code>gulp clean-css</code></td>
<td>清空 <code>dist/css/</code> 目录下的 CSS 文件</td>
</tr>
<tr>
<td><code>gulp clean-js</code></td>
<td>清空 <code>dist/js/</code> 目录下的 JavaScript 文件</td>
</tr>
<tr>
<td><code>gulp custom</code></td>
<td>进行定制打包,打包后的文件位于 <code>custom/</code> 目录中。该命令需要包含参数,参数说明如下:
<pre><code>gulp custom
-modules:用“,”分隔的模块名
-primary-colors:用“,”分隔的主色名
-accent-colors:用“,”分隔的强调色名
-color-degrees:用“,”分隔的颜色饱和度
-layout-dark</code></pre>
</td>
</tr>
<tr>
<td><code>gulp clean-custom</code></td>
<td>清空 <code>custom/</code> 目录下的所有文件</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
<div class="doc-footer-nav mdui-color-theme">
<div class="mdui-container">
<div class="mdui-row">
<div class="mdui-col-xs-2 mdui-col-sm-6 doc-footer-nav-left"></div>
<a href="compatibility.html" class="mdui-ripple mdui-color-theme mdui-col-xs-10 mdui-col-sm-6 doc-footer-nav-right">
<div class="doc-footer-nav-text">
<i class="mdui-icon material-icons">arrow_forward</i>
<span class="doc-footer-nav-direction">Next</span>
<div class="doc-footer-nav-chapter">兼容性</div>
</div>
</a>
</div>
</div>
</div>
<div class="mdui-dialog" id="dialog-docs-theme">
<div class="mdui-dialog-title">设置文档主题</div>
<div class="mdui-dialog-content">
<p class="mdui-typo-title">主题色</p>
<div class="mdui-row-xs-1 mdui-row-sm-2 mdui-row-md-3">
<div class="mdui-col">
<label class="mdui-radio mdui-m-b-1">
<input type="radio" name="doc-theme-layout" value="" checked/>
<i class="mdui-radio-icon"></i>
Light
</label>
</div>
<div class="mdui-col">
<label class="mdui-radio mdui-m-b-1">
<input type="radio" name="doc-theme-layout" value="dark" />
<i class="mdui-radio-icon"></i>
Dark
</label>
</div>
</div>
<p class="mdui-typo-title mdui-text-color-theme">主色</p>
<form class="mdui-row-xs-1 mdui-row-sm-2 mdui-row-md-3">
<div class="mdui-col mdui-text-color-amber">
<label class="mdui-radio mdui-m-b-1">
<input type="radio" name="doc-theme-primary" value="amber" />
<i class="mdui-radio-icon"></i>
Amber
</label>
</div>
<div class="mdui-col mdui-text-color-blue">
<label class="mdui-radio mdui-m-b-1">
<input type="radio" name="doc-theme-primary" value="blue" />
<i class="mdui-radio-icon"></i>
Blue
</label>
</div>
<div class="mdui-col mdui-text-color-blue-grey">
<label class="mdui-radio mdui-m-b-1">
<input type="radio" name="doc-theme-primary" value="blue-grey" />
<i class="mdui-radio-icon"></i>
Blue Grey
</label>
</div>
<div class="mdui-col mdui-text-color-brown">
<label class="mdui-radio mdui-m-b-1">
<input type="radio" name="doc-theme-primary" value="brown" />
<i class="mdui-radio-icon"></i>
Brown
</label>
</div>
<div class="mdui-col mdui-text-color-cyan">
<label class="mdui-radio mdui-m-b-1">
<input type="radio" name="doc-theme-primary" value="cyan" />
<i class="mdui-radio-icon"></i>
Cyan
</label>
</div>
<div class="mdui-col mdui-text-color-deep-orange">
<label class="mdui-radio mdui-m-b-1">
<input type="radio" name="doc-theme-primary" value="deep-orange" />
<i class="mdui-radio-icon"></i>
Deep Orange
</label>
</div>
<div class="mdui-col mdui-text-color-deep-purple">
<label class="mdui-radio mdui-m-b-1">
<input type="radio" name="doc-theme-primary" value="deep-purple" />
<i class="mdui-radio-icon"></i>
Deep Purple
</label>
</div>
<div class="mdui-col mdui-text-color-green">
<label class="mdui-radio mdui-m-b-1">
<input type="radio" name="doc-theme-primary" value="green" />
<i class="mdui-radio-icon"></i>
Green
</label>
</div>
<div class="mdui-col mdui-text-color-grey">
<label class="mdui-radio mdui-m-b-1">
<input type="radio" name="doc-theme-primary" value="grey" />
<i class="mdui-radio-icon"></i>
Grey
</label>
</div>
<div class="mdui-col mdui-text-color-indigo">
<label class="mdui-radio mdui-m-b-1">
<input type="radio" name="doc-theme-primary" value="indigo" checked/>
<i class="mdui-radio-icon"></i>
Indigo
</label>
</div>
<div class="mdui-col mdui-text-color-light-blue">
<label class="mdui-radio mdui-m-b-1">
<input type="radio" name="doc-theme-primary" value="light-blue" />
<i class="mdui-radio-icon"></i>
Light Blue
</label>
</div>
<div class="mdui-col mdui-text-color-light-green">
<label class="mdui-radio mdui-m-b-1">
<input type="radio" name="doc-theme-primary" value="light-green" />
<i class="mdui-radio-icon"></i>
Light Green
</label>
</div>
<div class="mdui-col mdui-text-color-lime">
<label class="mdui-radio mdui-m-b-1">
<input type="radio" name="doc-theme-primary" value="lime" />
<i class="mdui-radio-icon"></i>
Lime
</label>
</div>
<div class="mdui-col mdui-text-color-orange">
<label class="mdui-radio mdui-m-b-1">
<input type="radio" name="doc-theme-primary" value="orange" />
<i class="mdui-radio-icon"></i>
Orange
</label>
</div>
<div class="mdui-col mdui-text-color-pink">
<label class="mdui-radio mdui-m-b-1">
<input type="radio" name="doc-theme-primary" value="pink" />
<i class="mdui-radio-icon"></i>
Pink
</label>
</div>
<div class="mdui-col mdui-text-color-purple">
<label class="mdui-radio mdui-m-b-1">
<input type="radio" name="doc-theme-primary" value="purple" />
<i class="mdui-radio-icon"></i>
Purple
</label>
</div>
<div class="mdui-col mdui-text-color-red">
<label class="mdui-radio mdui-m-b-1">
<input type="radio" name="doc-theme-primary" value="red" />
<i class="mdui-radio-icon"></i>
Red
</label>
</div>
<div class="mdui-col mdui-text-color-teal">
<label class="mdui-radio mdui-m-b-1">
<input type="radio" name="doc-theme-primary" value="teal" />
<i class="mdui-radio-icon"></i>
Teal
</label>
</div>
<div class="mdui-col mdui-text-color-yellow">
<label class="mdui-radio mdui-m-b-1">
<input type="radio" name="doc-theme-primary" value="yellow" />
<i class="mdui-radio-icon"></i>
Yellow
</label>
</div>
</form>
<p class="mdui-typo-title mdui-text-color-theme-accent">强调色</p>
<form class="mdui-row-xs-1 mdui-row-sm-2 mdui-row-md-3">
<div class="mdui-col mdui-text-color-amber">
<label class="mdui-radio mdui-m-b-1">
<input type="radio" name="doc-theme-accent" value="amber" />
<i class="mdui-radio-icon"></i>
Amber
</label>
</div>
<div class="mdui-col mdui-text-color-blue">
<label class="mdui-radio mdui-m-b-1">
<input type="radio" name="doc-theme-accent" value="blue" />
<i class="mdui-radio-icon"></i>
Blue
</label>
</div>
<div class="mdui-col mdui-text-color-cyan">
<label class="mdui-radio mdui-m-b-1">
<input type="radio" name="doc-theme-accent" value="cyan" />
<i class="mdui-radio-icon"></i>
Cyan
</label>
</div>
<div class="mdui-col mdui-text-color-deep-orange">
<label class="mdui-radio mdui-m-b-1">
<input type="radio" name="doc-theme-accent" value="deep-orange" />
<i class="mdui-radio-icon"></i>
Deep Orange
</label>
</div>
<div class="mdui-col mdui-text-color-deep-purple">
<label class="mdui-radio mdui-m-b-1">
<input type="radio" name="doc-theme-accent" value="deep-purple" />
<i class="mdui-radio-icon"></i>
Deep Purple
</label>
</div>
<div class="mdui-col mdui-text-color-green">
<label class="mdui-radio mdui-m-b-1">
<input type="radio" name="doc-theme-accent" value="green" />
<i class="mdui-radio-icon"></i>
Green
</label>
</div>
<div class="mdui-col mdui-text-color-indigo">
<label class="mdui-radio mdui-m-b-1">
<input type="radio" name="doc-theme-accent" value="indigo" />
<i class="mdui-radio-icon"></i>
Indigo
</label>
</div>
<div class="mdui-col mdui-text-color-light-blue">
<label class="mdui-radio mdui-m-b-1">
<input type="radio" name="doc-theme-accent" value="light-blue" />
<i class="mdui-radio-icon"></i>
Light Blue
</label>
</div>
<div class="mdui-col mdui-text-color-light-green">
<label class="mdui-radio mdui-m-b-1">
<input type="radio" name="doc-theme-accent" value="light-green" />
<i class="mdui-radio-icon"></i>
Light Green
</label>
</div>
<div class="mdui-col mdui-text-color-lime">
<label class="mdui-radio mdui-m-b-1">
<input type="radio" name="doc-theme-accent" value="lime" />
<i class="mdui-radio-icon"></i>
Lime
</label>
</div>
<div class="mdui-col mdui-text-color-orange">
<label class="mdui-radio mdui-m-b-1">
<input type="radio" name="doc-theme-accent" value="orange" />
<i class="mdui-radio-icon"></i>
Orange
</label>
</div>
<div class="mdui-col mdui-text-color-pink">
<label class="mdui-radio mdui-m-b-1">
<input type="radio" name="doc-theme-accent" value="pink" checked/>
<i class="mdui-radio-icon"></i>
Pink
</label>
</div>
<div class="mdui-col mdui-text-color-purple">
<label class="mdui-radio mdui-m-b-1">
<input type="radio" name="doc-theme-accent" value="purple" />
<i class="mdui-radio-icon"></i>
Purple
</label>
</div>
<div class="mdui-col mdui-text-color-red">
<label class="mdui-radio mdui-m-b-1">
<input type="radio" name="doc-theme-accent" value="red" />
<i class="mdui-radio-icon"></i>
Red
</label>
</div>
<div class="mdui-col mdui-text-color-teal">
<label class="mdui-radio mdui-m-b-1">
<input type="radio" name="doc-theme-accent" value="teal" />
<i class="mdui-radio-icon"></i>
Teal
</label>
</div>
<div class="mdui-col mdui-text-color-yellow">
<label class="mdui-radio mdui-m-b-1">
<input type="radio" name="doc-theme-accent" value="yellow" />
<i class="mdui-radio-icon"></i>
Yellow
</label>
</div>
</form>
</div>
<div class="mdui-divider"></div>
<div class="mdui-dialog-actions">
<button class="mdui-btn mdui-ripple mdui-float-left" mdui-dialog-cancel>恢复默认主题</button>
<button class="mdui-btn mdui-ripple" mdui-dialog-confirm>ok</button>
</div>
</div>
<script src="assets/smooth-scroll-11.1.0/smooth-scroll.min.js"></script>
<script src="assets/holder-2.9.4/holder.min.js"></script>
<script src="assets/highlight-9.12.0/highlight.pack.js"></script>
<script src="assets/mdui-v0.4.2/js/mdui.min.js"></script>
<script>var $$ = mdui.JQ;</script>
<script src="assets/docs/js/docs.js"></script>