UNPKG

c-mdui-a

Version:

A fast way to build an application based on Material Design UI(MDUI).

93 lines (77 loc) • 4.2 kB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width"> <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/demo/css/demo.css"/> </head> <body> <div class="preview-container"></div> <div class="editor-panel"> <div class="editor-controls mdui-p-x-1"> <div class="editor-control-html mdui-ripple editor-control-active" onclick="Editor.toogleHTML();">HTML</div> <div class="editor-control-css mdui-ripple " onclick="Editor.toogleCSS();">CSS</div> <div class="editor-control-js mdui-ripple " onclick="Editor.toogleJS();">JavaScript</div> <div class="editor-controls-drag"></div> <div class="editor-controls-run mdui-btn mdui-btn-icon mdui-ripple mdui-m-x-1 mdui-text-color-black-secondary" mdui-tooltip="{content: '运行 Ctrl + Enter'}" onclick="Editor.run();"><i class="mdui-icon material-icons">play_arrow</i></div> <label class="editor-controls-live-mode mdui-switch mdui-m-x-1" mdui-tooltip="{content: '实时预览'}" onchange="Editor.toogleLiveMode();"> <input type="checkbox" checked/> <i class="mdui-switch-icon"></i> </label> <!--<div class="mdui-controls-download mdui-btn mdui-btn-icon mdui-ripple mdui-m-x-1" mdui-tooltip="{content: '下载'}" onclick="Editor.download();"><i class="mdui-icon material-icons">file_download</i></div>--> </div> <div class="editor-container editor-container-html"> <div class="editor-container-label">HTML</div> <pre id="editor-ace-html">&lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;meta charset=&quot;utf-8&quot;&gt; &lt;meta name=&quot;viewport&quot; content=&quot;width=device-width&quot;&gt; &lt;title&gt;排版 - 内联文本样式&lt;/title&gt; &lt;link rel=&quot;stylesheet&quot; href=&quot;../assets/mdui-v0.4.2/css/mdui.min.css&quot;/&gt; &lt;/head&gt; &lt;body&gt; &lt;div class=&quot;mdui-container&quot;&gt; &lt;div class=&quot;mdui-typo&quot;&gt; &lt;p&gt;&lt;a href=&quot;#&quot;&gt;这是一个链接&lt;/a&gt;&lt;/p&gt; &lt;p&gt;使用 mark 标签来&lt;mark&gt;高亮文本&lt;/mark&gt;。&lt;/p&gt; &lt;p&gt;&lt;del&gt;这行文本被视为已删除文本。&lt;/del&gt;&lt;/p&gt; &lt;p&gt;&lt;ins&gt;这行文本是被强势插入的元素。&lt;/ins&gt;&lt;/p&gt; &lt;p&gt;&lt;u&gt;这行文本带有下划线。&lt;/u&gt;&lt;/p&gt; &lt;p&gt;&lt;small&gt;这行文本字体被缩小了。&lt;/small&gt;&lt;/p&gt; &lt;p&gt;&lt;strong&gt;这行文本被加粗了。&lt;/strong&gt;&lt;/p&gt; &lt;p&gt;&lt;em&gt;这段文本是斜体的。&lt;/em&gt;&lt;/p&gt; &lt;p&gt;响应式设计缩写 &lt;abbr title=&quot;Responsive web design&quot;&gt;RWD&lt;/abbr&gt;&lt;/p&gt; &lt;p&gt;这行文本包含内联代码 &lt;code&gt;&amp;lt;code&amp;gt;&lt;/code&gt;&lt;/p&gt; &lt;p&gt;按下 &lt;kbd&gt;Esc&lt;/kbd&gt; 可以关闭对话框&lt;/p&gt; &lt;p&gt;&lt;var&gt;y&lt;/var&gt; = &lt;var&gt;m&lt;/var&gt;&lt;var&gt;x&lt;/var&gt; + &lt;var&gt;b&lt;/var&gt;&lt;/p&gt; &lt;/div&gt; &lt;/div&gt; &lt;script src=&quot;../assets/mdui-v0.4.2/js/mdui.min.js&quot;&gt;&lt;/script&gt; &lt;/body&gt; &lt;/html&gt; </pre> </div> <div class="editor-container editor-container-css"> <div class="editor-container-label">CSS</div> <pre id="editor-ace-css"></pre> </div> <div class="editor-container editor-container-js"> <div class="editor-container-label">JavaScript</div> <pre id="editor-ace-js"></pre> </div> </div> <script src="../assets/mdui-v0.4.2/js/mdui.min.js"></script> <script src="../assets/ace-1.2.6/ace.js"></script> <script src="../assets/ace-1.2.6/ext-language_tools.js"></script> <script src="../assets/demo/js/live-editor.js"></script> <script> var Editor = new LiveEditor(); </script> </body> </html>