Skip to content

Commit

Permalink
Update docs for Edge 1. use unpkg 2. add import
Browse files Browse the repository at this point in the history
  • Loading branch information
@zhangxinxu
zhangxinxu committed Jun 2, 2023
1 parent d8a919a commit ecb2d84
Show file tree
Hide file tree
Showing 27 changed files with 639 additions and 513 deletions.
26 changes: 13 additions & 13 deletions edge/about.design.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,26 +7,26 @@
<meta name="description" content="LuLu UI edge主题中文文档，面向PC，也兼容移动端，非常适合对外用户web网站的UI框架，阅文集团前端团队荣誉出品。本页面文档内容关于命名与设计">
<meta name="keywords" content="LuLu UI, 中文文档, UI框架, UI组件库, LuLu, Web, 前端, 命名与设计">
<title>LuLu UI edge主题中文文档 &raquo; 命名与设计</title>
<link rel="stylesheet" href="https://qidian.gtimg.com/lulu/edge/css/common/animate.css">
<link rel="stylesheet" href="https://qidian.gtimg.com/lulu/edge/css/common/ui.css">
<link rel="stylesheet" href="https://unpkg.com/lu2/theme/edge/css/common/animate.css">
<link rel="stylesheet" href="https://unpkg.com/lu2/theme/edge/css/common/ui.css">
<link rel="stylesheet" href="../edge/assets/css/mockup.css">
</head>
<body>
<input id="asideCheck" type="checkbox" class="aside-checkbox"><label for="asideCheck" class="aside-label"><svg width="24" height="24"><use xlink:href="#icon-bars"></use></svg></label>
<header class="header">
<a href="../" accesskey="1" class="logo-a" data-theme="edge"><h1 class="logo">LuLu UI Edge版中文文档 &raquo; 命名与设计</h1></a>
<div class="header-right">
<ui-drop id="dropDoc" target="dropDocData" class="ui-droplist-arrow mr20">文档</ui-drop>
<datalist id="dropDocData">
<option href="">文档</option>
<option href="https://www.zhangxinxu.com/sp/lulu/guide/edge/">教程</option>
</datalist>
<select id="selectTheme" class="select-theme" is="ui-select">
<option value="peak">Peak主题</option>
<option value="pure">Pure主题</option>
<option value="edge" selected>Edge主题</option>
</select>
<a href="https://github.com/yued-fe/lulu" target="_blank" rel="noopener nofollow" class="blue ml15">Github➹</a>
<a class="ui-button" data-type="success" href="https://www.zhangxinxu.com/sp/lulu/guide/edge/">教程</a>
<a href="https://github.com/yued-fe/lulu" target="_blank" rel="noopener nofollow" class="github-a">
<svg width="40" height="40" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512">
<path d="M400 32H48C21.5 32 0 53.5 0 80v352c0 26.5 21.5 48 48 48h352c26.5 0 48-21.5 48-48V80c0-26.5-21.5-48-48-48zM277.3 415.7c-8.4 1.5-11.5-3.7-11.5-8 0-5.4.2-33 .2-55.3 0-15.6-5.2-25.5-11.3-30.7 37-4.1 76-9.2 76-73.1 0-18.2-6.5-27.3-17.1-39 1.7-4.3 7.4-22-1.7-45-13.9-4.3-45.7 17.9-45.7 17.9-13.2-3.7-27.5-5.6-41.6-5.6-14.1 0-28.4 1.9-41.6 5.6 0 0-31.8-22.2-45.7-17.9-9.1 22.9-3.5 40.6-1.7 45-10.6 11.7-15.6 20.8-15.6 39 0 63.6 37.3 69 74.3 73.1-4.8 4.3-9.1 11.7-10.6 22.3-9.5 4.3-33.8 11.7-48.3-13.9-9.1-15.8-25.5-17.1-25.5-17.1-16.2-.2-1.1 10.2-1.1 10.2 10.8 5 18.4 24.2 18.4 24.2 9.7 29.7 56.1 19.7 56.1 19.7 0 13.9.2 36.5.2 40.6 0 4.3-3 9.5-11.5 8-66-22.1-112.2-84.9-112.2-158.3 0-91.8 70.2-161.5 162-161.5S388 165.6 388 257.4c.1 73.4-44.7 136.3-110.7 158.3zm-98.1-61.1c-1.9.4-3.7-.4-3.9-1.7-.2-1.5 1.1-2.8 3-3.2 1.9-.2 3.7.6 3.9 1.9.3 1.3-1 2.6-3 3zm-9.5-.9c0 1.3-1.5 2.4-3.5 2.4-2.2.2-3.7-.9-3.7-2.4 0-1.3 1.5-2.4 3.5-2.4 1.9-.2 3.7.9 3.7 2.4zm-13.7-1.1c-.4 1.3-2.4 1.9-4.1 1.3-1.9-.4-3.2-1.9-2.8-3.2.4-1.3 2.4-1.9 4.1-1.5 2 .6 3.3 2.1 2.8 3.4zm-12.3-5.4c-.9 1.1-2.8.9-4.3-.6-1.5-1.3-1.9-3.2-.9-4.1.9-1.1 2.8-.9 4.3.6 1.3 1.3 1.8 3.3.9 4.1zm-9.1-9.1c-.9.6-2.6 0-3.7-1.5s-1.1-3.2 0-3.9c1.1-.9 2.8-.2 3.7 1.3 1.1 1.5 1.1 3.3 0 4.1zm-6.5-9.7c-.9.9-2.4.4-3.5-.6-1.1-1.3-1.3-2.8-.4-3.5.9-.9 2.4-.4 3.5.6 1.1 1.3 1.3 2.8.4 3.5zm-6.7-7.4c-.4.9-1.7 1.1-2.8.4-1.3-.6-1.9-1.7-1.5-2.6.4-.6 1.5-.9 2.8-.4 1.3.7 1.9 1.8 1.5 2.6z"></path>
</svg>
</a>
</div>
</header>

Expand Down Expand Up @@ -67,7 +67,7 @@ <h4>面向设计开发</h4>
<p>所以，LuLu UI是没有版本的概念的，只有一条核心线自己往前走。当新项目过来需要使用的时候，完全拷贝LuLu UI到项目开发目录中，然后根据当前项目的设计风格，对HTML和JS进行结构上的调整，是放心大胆的调整。</p>
<p>因此，LuLu UI组件不是传统的大而全，而是走极简轻便灵活方向，表现为模块低耦合，层级扁平；API非常少，尤其一些基本组件，直接就没有API。</p>
<p>LuLu UI没有版本概念，只有主题，目前有morden、peak, pure和edge四个主题，寓意为“现代”、“巅峰”、“纯粹”和“边缘”。</p>
<p>本文档对应的是edge版本，不兼容IE浏览器，Safari浏览器需要引入<a href="https://qidian.gtimg.com/lulu/edge/js/common/all.js">safari-polyfill</a>。</p>
<p>本文档对应的是edge版本，不兼容IE浏览器，Safari浏览器需要引入<a href="https://unpkg.com/lu2/theme/edge/js/common/all.js">safari-polyfill</a>。</p>
<h4>基于HTML开发</h4>
<p>相对于其他UI框架，LuLu UI技术栈更偏向HTML和CSS，以便更友好地还原设计和增强体验。</p>
<p>具体而言，LuLu UI基于HTML开发，实现前端开发分离，具体可参考“<a href="https://www.zhangxinxu.com/wordpress/?p=5180">顺势而为，HTML发展与UI组件设计进化</a>”。</p>
Expand Down Expand Up @@ -179,10 +179,10 @@ <h4>基于HTML开发</h4>

<a href="#" id="backtop" class="backtop"></a>

<script src="https://qidian.gtimg.com/lulu/edge/js/common/ui/Keyboard.js"></script>
<script src="https://qidian.gtimg.com/lulu/edge/js/common/safari-polyfill.js"></script>
<script type="module" src="https://qidian.gtimg.com/lulu/edge/js/common/ui/Select.js"></script>
<script type="module" src="https://qidian.gtimg.com/lulu/edge/js/common/ui/Drop.js"></script>
<script src="https://unpkg.com/lu2/theme/edge/js/common/ui/Keyboard.js"></script>
<script src="https://unpkg.com/lu2/theme/edge/js/common/safari-polyfill.js"></script>
<script type="module" src="https://unpkg.com/lu2/theme/edge/js/common/ui/Select.js"></script>
<script type="module" src="https://unpkg.com/lu2/theme/edge/js/common/ui/Drop.js"></script>
<!-- 底部 -->
<script src="../edge/assets/js/mockup.js"></script>
</body>
Expand Down
Loading

0 comments on commit ecb2d84

Please sign in to comment.