-
Notifications
You must be signed in to change notification settings - Fork 2
/
Copy pathindex.html
25 lines (24 loc) · 17 KB
/
index.html
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
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>NU-system</title>
<meta name="description" content="💪 一个无 UI 依赖的母版组件库系统">
<link rel="icon" href="/logo.png">
<link rel="preload" href="/assets/css/0.styles.9fedd137.css" as="style"><link rel="preload" href="/assets/js/app.81668514.js" as="script"><link rel="preload" href="/assets/js/9.77a8261c.js" as="script"><link rel="prefetch" href="/assets/js/10.4fa53c3d.js"><link rel="prefetch" href="/assets/js/11.bf92767f.js"><link rel="prefetch" href="/assets/js/12.ba2157ec.js"><link rel="prefetch" href="/assets/js/13.cf73b531.js"><link rel="prefetch" href="/assets/js/14.6f12d7b5.js"><link rel="prefetch" href="/assets/js/15.55bfc607.js"><link rel="prefetch" href="/assets/js/16.c8ea8f8e.js"><link rel="prefetch" href="/assets/js/17.6d9f421f.js"><link rel="prefetch" href="/assets/js/18.815fbb53.js"><link rel="prefetch" href="/assets/js/19.a8012cb8.js"><link rel="prefetch" href="/assets/js/2.15581550.js"><link rel="prefetch" href="/assets/js/20.e66e70f5.js"><link rel="prefetch" href="/assets/js/21.8a7cdd55.js"><link rel="prefetch" href="/assets/js/22.859b0496.js"><link rel="prefetch" href="/assets/js/23.ecd39291.js"><link rel="prefetch" href="/assets/js/24.daac0001.js"><link rel="prefetch" href="/assets/js/25.50c1a319.js"><link rel="prefetch" href="/assets/js/26.58e5ecb9.js"><link rel="prefetch" href="/assets/js/27.5d2071de.js"><link rel="prefetch" href="/assets/js/28.029e3c6c.js"><link rel="prefetch" href="/assets/js/29.bba44c32.js"><link rel="prefetch" href="/assets/js/3.4a8249f2.js"><link rel="prefetch" href="/assets/js/30.01eeedea.js"><link rel="prefetch" href="/assets/js/31.ec9acf36.js"><link rel="prefetch" href="/assets/js/32.22863263.js"><link rel="prefetch" href="/assets/js/33.3569fb94.js"><link rel="prefetch" href="/assets/js/34.90861bfa.js"><link rel="prefetch" href="/assets/js/35.a819716c.js"><link rel="prefetch" href="/assets/js/36.b3d4bf82.js"><link rel="prefetch" href="/assets/js/37.21f91c78.js"><link rel="prefetch" href="/assets/js/38.a995514c.js"><link rel="prefetch" href="/assets/js/39.76b01777.js"><link rel="prefetch" href="/assets/js/4.42a457c1.js"><link rel="prefetch" href="/assets/js/40.469ca96d.js"><link rel="prefetch" href="/assets/js/41.61252c8f.js"><link rel="prefetch" href="/assets/js/42.3552d246.js"><link rel="prefetch" href="/assets/js/43.99635ec4.js"><link rel="prefetch" href="/assets/js/44.c8773e35.js"><link rel="prefetch" href="/assets/js/45.8fc54fac.js"><link rel="prefetch" href="/assets/js/46.abe89ec8.js"><link rel="prefetch" href="/assets/js/47.4c592457.js"><link rel="prefetch" href="/assets/js/48.a63652cd.js"><link rel="prefetch" href="/assets/js/49.2408c4fd.js"><link rel="prefetch" href="/assets/js/5.21147274.js"><link rel="prefetch" href="/assets/js/50.3c53e9c8.js"><link rel="prefetch" href="/assets/js/51.8944fd20.js"><link rel="prefetch" href="/assets/js/52.96ed7b05.js"><link rel="prefetch" href="/assets/js/53.8efbdc02.js"><link rel="prefetch" href="/assets/js/54.1eb6e1ee.js"><link rel="prefetch" href="/assets/js/55.ff8c8c9f.js"><link rel="prefetch" href="/assets/js/56.785ea906.js"><link rel="prefetch" href="/assets/js/57.84f70045.js"><link rel="prefetch" href="/assets/js/58.7b767068.js"><link rel="prefetch" href="/assets/js/59.6d5816c3.js"><link rel="prefetch" href="/assets/js/6.5c4e5eab.js"><link rel="prefetch" href="/assets/js/60.5451a261.js"><link rel="prefetch" href="/assets/js/61.930a1a36.js"><link rel="prefetch" href="/assets/js/62.b0b41a05.js"><link rel="prefetch" href="/assets/js/7.d9aeb52a.js"><link rel="prefetch" href="/assets/js/8.c6eb55f9.js">
<link rel="stylesheet" href="/assets/css/0.styles.9fedd137.css">
</head>
<body>
<div id="app" data-server-rendered="true"><div class="theme-container no-sidebar"><header class="navbar"><div class="sidebar-button"><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" viewBox="0 0 448 512" class="icon"><path fill="currentColor" d="M436 124H12c-6.627 0-12-5.373-12-12V80c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12z"></path></svg></div> <a href="/" class="home-link router-link-exact-active router-link-active"><!----> <span class="site-name">NU-system</span></a> <div class="links" style="max-width:nullpx;"><div class="search-box"><input aria-label="Search" autocomplete="off" spellcheck="false" value=""> <!----></div> <nav class="nav-links can-hide"><div class="nav-item"><a href="/intro/" class="nav-link">简介</a></div><div class="nav-item"><div class="dropdown-wrapper"><a class="dropdown-title"><span class="title">HTML</span> <span class="arrow right"></span></a> <ul class="nav-dropdown" style="display:none;"><li class="dropdown-item"><!----> <a href="/html/validator/" class="nav-link">Validator</a></li></ul></div></div><div class="nav-item"><div class="dropdown-wrapper"><a class="dropdown-title"><span class="title">CSS</span> <span class="arrow right"></span></a> <ul class="nav-dropdown" style="display:none;"><li class="dropdown-item"><!----> <a href="/css/" class="nav-link">Intro</a></li><li class="dropdown-item"><!----> <a href="/css/acss/" class="nav-link">ACSS</a></li><li class="dropdown-item"><!----> <a href="/css/button/" class="nav-link">Button</a></li><li class="dropdown-item"><!----> <a href="/css/dialog/" class="nav-link">Dialog</a></li><li class="dropdown-item"><!----> <a href="/css/toast/" class="nav-link">Toast</a></li><li class="dropdown-item"><!----> <a href="/css/select/" class="nav-link">Select</a></li><li class="dropdown-item"><!----> <a href="/css/input/" class="nav-link">Input</a></li></ul></div></div><div class="nav-item"><div class="dropdown-wrapper"><a class="dropdown-title"><span class="title">React</span> <span class="arrow right"></span></a> <ul class="nav-dropdown" style="display:none;"><li class="dropdown-item"><!----> <a href="/react/" class="nav-link">Intro</a></li><li class="dropdown-item"><!----> <a href="/react/button/" class="nav-link">Button</a></li><li class="dropdown-item"><!----> <a href="/react/img/" class="nav-link">Img</a></li><li class="dropdown-item"><!----> <a href="/react/dialog/" class="nav-link">Dialog</a></li><li class="dropdown-item"><!----> <a href="/react/toast/" class="nav-link">Toast</a></li><li class="dropdown-item"><!----> <a href="/react/select/" class="nav-link">Select</a></li><li class="dropdown-item"><!----> <a href="/react/avatar/" class="nav-link">Avatar</a></li></ul></div></div><div class="nav-item"><div class="dropdown-wrapper"><a class="dropdown-title"><span class="title">JS</span> <span class="arrow right"></span></a> <ul class="nav-dropdown" style="display:none;"><li class="dropdown-item"><!----> <a href="/js/" class="nav-link">Intro</a></li><li class="dropdown-item"><!----> <a href="/js/dialog/" class="nav-link">Dialog</a></li></ul></div></div><div class="nav-item"><div class="dropdown-wrapper"><a class="dropdown-title"><span class="title">Vue</span> <span class="arrow right"></span></a> <ul class="nav-dropdown" style="display:none;"><li class="dropdown-item"><!----> <a href="/vue/" class="nav-link">Intro</a></li><li class="dropdown-item"><!----> <a href="/vue/button/" class="nav-link">Button</a></li><li class="dropdown-item"><!----> <a href="/vue/dialog/" class="nav-link">Dialog</a></li><li class="dropdown-item"><!----> <a href="/vue/axios-form/" class="nav-link">Axios-form</a></li></ul></div></div><div class="nav-item"><div class="dropdown-wrapper"><a class="dropdown-title"><span class="title">React-native</span> <span class="arrow right"></span></a> <ul class="nav-dropdown" style="display:none;"><li class="dropdown-item"><!----> <a href="/react-native/" class="nav-link">Intro</a></li><li class="dropdown-item"><!----> <a href="/react-native/button/" class="nav-link">Button</a></li><li class="dropdown-item"><!----> <a href="/react-native/acss/" class="nav-link">Acss</a></li><li class="dropdown-item"><!----> <a href="/react-native/grid/" class="nav-link">Grid</a></li></ul></div></div><div class="nav-item"><div class="dropdown-wrapper"><a class="dropdown-title"><span class="title">Language</span> <span class="arrow right"></span></a> <ul class="nav-dropdown" style="display:none;"><li class="dropdown-item"><!----> <a href="/" class="nav-link router-link-exact-active router-link-active">简体中文</a></li><li class="dropdown-item"><!----> <a href="/en/" class="nav-link">English</a></li></ul></div></div> <a href="https://github.com/nu-system" target="_blank" rel="noopener noreferrer" class="repo-link">
GitHub
<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></nav></div></header> <div class="sidebar-mask"></div> <div class="sidebar"><nav class="nav-links"><div class="nav-item"><a href="/intro/" class="nav-link">简介</a></div><div class="nav-item"><div class="dropdown-wrapper"><a class="dropdown-title"><span class="title">HTML</span> <span class="arrow right"></span></a> <ul class="nav-dropdown" style="display:none;"><li class="dropdown-item"><!----> <a href="/html/validator/" class="nav-link">Validator</a></li></ul></div></div><div class="nav-item"><div class="dropdown-wrapper"><a class="dropdown-title"><span class="title">CSS</span> <span class="arrow right"></span></a> <ul class="nav-dropdown" style="display:none;"><li class="dropdown-item"><!----> <a href="/css/" class="nav-link">Intro</a></li><li class="dropdown-item"><!----> <a href="/css/acss/" class="nav-link">ACSS</a></li><li class="dropdown-item"><!----> <a href="/css/button/" class="nav-link">Button</a></li><li class="dropdown-item"><!----> <a href="/css/dialog/" class="nav-link">Dialog</a></li><li class="dropdown-item"><!----> <a href="/css/toast/" class="nav-link">Toast</a></li><li class="dropdown-item"><!----> <a href="/css/select/" class="nav-link">Select</a></li><li class="dropdown-item"><!----> <a href="/css/input/" class="nav-link">Input</a></li></ul></div></div><div class="nav-item"><div class="dropdown-wrapper"><a class="dropdown-title"><span class="title">React</span> <span class="arrow right"></span></a> <ul class="nav-dropdown" style="display:none;"><li class="dropdown-item"><!----> <a href="/react/" class="nav-link">Intro</a></li><li class="dropdown-item"><!----> <a href="/react/button/" class="nav-link">Button</a></li><li class="dropdown-item"><!----> <a href="/react/img/" class="nav-link">Img</a></li><li class="dropdown-item"><!----> <a href="/react/dialog/" class="nav-link">Dialog</a></li><li class="dropdown-item"><!----> <a href="/react/toast/" class="nav-link">Toast</a></li><li class="dropdown-item"><!----> <a href="/react/select/" class="nav-link">Select</a></li><li class="dropdown-item"><!----> <a href="/react/avatar/" class="nav-link">Avatar</a></li></ul></div></div><div class="nav-item"><div class="dropdown-wrapper"><a class="dropdown-title"><span class="title">JS</span> <span class="arrow right"></span></a> <ul class="nav-dropdown" style="display:none;"><li class="dropdown-item"><!----> <a href="/js/" class="nav-link">Intro</a></li><li class="dropdown-item"><!----> <a href="/js/dialog/" class="nav-link">Dialog</a></li></ul></div></div><div class="nav-item"><div class="dropdown-wrapper"><a class="dropdown-title"><span class="title">Vue</span> <span class="arrow right"></span></a> <ul class="nav-dropdown" style="display:none;"><li class="dropdown-item"><!----> <a href="/vue/" class="nav-link">Intro</a></li><li class="dropdown-item"><!----> <a href="/vue/button/" class="nav-link">Button</a></li><li class="dropdown-item"><!----> <a href="/vue/dialog/" class="nav-link">Dialog</a></li><li class="dropdown-item"><!----> <a href="/vue/axios-form/" class="nav-link">Axios-form</a></li></ul></div></div><div class="nav-item"><div class="dropdown-wrapper"><a class="dropdown-title"><span class="title">React-native</span> <span class="arrow right"></span></a> <ul class="nav-dropdown" style="display:none;"><li class="dropdown-item"><!----> <a href="/react-native/" class="nav-link">Intro</a></li><li class="dropdown-item"><!----> <a href="/react-native/button/" class="nav-link">Button</a></li><li class="dropdown-item"><!----> <a href="/react-native/acss/" class="nav-link">Acss</a></li><li class="dropdown-item"><!----> <a href="/react-native/grid/" class="nav-link">Grid</a></li></ul></div></div><div class="nav-item"><div class="dropdown-wrapper"><a class="dropdown-title"><span class="title">Language</span> <span class="arrow right"></span></a> <ul class="nav-dropdown" style="display:none;"><li class="dropdown-item"><!----> <a href="/" class="nav-link router-link-exact-active router-link-active">简体中文</a></li><li class="dropdown-item"><!----> <a href="/en/" class="nav-link">English</a></li></ul></div></div> <a href="https://github.com/nu-system" target="_blank" rel="noopener noreferrer" class="repo-link">
GitHub
<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></nav> <!----> </div> <div class="home"><div class="hero"><!----> <h1>NU-system</h1> <p class="description">
💪 一个无 UI 依赖的母版组件库系统
</p> <p class="action"><a href="/css/" class="nav-link action-button">Get Start →</a></p></div> <div class="features"><div class="feature"><h2>🔧 Custom</h2> <p>NU-system 不是一个拿来即用的组件库，我们主张基于业务场景二次封装</p></div><div class="feature"><h2>❤️ UI Just</h2> <p>定义 Design Token 和实现逻辑状态接口定义的样式</p></div><div class="feature"><h2>🌊 Logic Only</h2> <p>定义逻辑状态接口，并不实现该状态下对应的样式</p></div></div> <div class="content custom"><h3 id="为什么？"><a href="#为什么？" aria-hidden="true" class="header-anchor">#</a> 为什么？</h3> <p>你是在否在修改类似 <a href="https://element.eleme.io/" target="_blank" rel="noopener noreferrer">Element-ui<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a> 、 <a href="https://ant.design/index-cn" target="_blank" rel="noopener noreferrer">ant.design<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a> 等 To business 的 UI 库的样式而感觉到心累？</p> <p>你是否只是想简单的有一个轻量、简单、且高度自定义化 To client 的 UI 组件？</p> <p>NU-system 是我们提供给你的另一个选择，它推崇 UI 和 Logic 分离，彼此之间由<strong>状态接口</strong>关联，也可以完全独立使用。</p> <p>期待你的加入！</p> <h2 id="❤️-ui-just"><a href="#❤️-ui-just" aria-hidden="true" class="header-anchor">#</a> ❤️ UI Just</h2> <p>NU-system 本身并没有对 UI 语言做限制，只是目前 CSS 比较容易实现这套理念，所以暂时提供 CSS 的方式。</p> <ul><li><a href="/css/">css-component</a> ;</li></ul> <h2 id="🌊-logic-only"><a href="#🌊-logic-only" aria-hidden="true" class="header-anchor">#</a> 🌊 Logic Only</h2> <p>NU-system 本身并没有对逻辑语言做限制，所以可以使用任意 JS 语言创建 Logic Only 部分。</p> <ul><li><a href="/vue/">vue-component</a> ;</li> <li><a href="/react/">react-component</a>;</li> <li><a href="/react-native/">react-native-component</a>;</li> <li><a href="/js/">js-component</a>;</li> <li>jquery-component 可能会考虑用原生 JS 的方式替代;</li></ul></div> <div class="footer">
MIT Licensed | Copyright © 2020-present YFE-TEAM
</div></div> <!----></div></div>
<script src="/assets/js/app.81668514.js" defer></script><script src="/assets/js/9.77a8261c.js" defer></script>
</body>
</html>