npm - gnui - Versions diffs - 1.2.0 → 1.2.13 - Mend

gnui 1.2.0 → 1.2.13

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (97) hide show

package/@types/gnui.d.ts +9 -2
package/README.md +0 -0
package/assets/NotoSansKR-Black.otf +0 -0
package/assets/NotoSansKR-Black.woff +0 -0
package/assets/NotoSansKR-Black.woff2 +0 -0
package/assets/NotoSansKR-Bold.otf +0 -0
package/assets/NotoSansKR-Bold.woff +0 -0
package/assets/NotoSansKR-Bold.woff2 +0 -0
package/assets/NotoSansKR-DemiLight.otf +0 -0
package/assets/NotoSansKR-DemiLight.woff +0 -0
package/assets/NotoSansKR-DemiLight.woff2 +0 -0
package/assets/NotoSansKR-Light.otf +0 -0
package/assets/NotoSansKR-Light.woff +0 -0
package/assets/NotoSansKR-Light.woff2 +0 -0
package/assets/NotoSansKR-Medium.otf +0 -0
package/assets/NotoSansKR-Medium.woff +0 -0
package/assets/NotoSansKR-Medium.woff2 +0 -0
package/assets/NotoSansKR-Regular.otf +0 -0
package/assets/NotoSansKR-Regular.woff +0 -0
package/assets/NotoSansKR-Regular.woff2 +0 -0
package/assets/NotoSansKR-Thin.otf +0 -0
package/assets/NotoSansKR-Thin.woff +0 -0
package/assets/NotoSansKR-Thin.woff2 +0 -0
package/assets/OFL.txt +0 -0
package/assets/images/flags.png +0 -0
package/package.json +20 -13
package/dist/js/gnui.esm.js +0 -24295
package/dist/js/gnui.js +0 -24303
package/dist/js/gnui.min.js +0 -23
package/dist/styles/default.css +0 -1
package/dist/styles/gpi.css +0 -1
package/dist/styles/green24.css +0 -1
package/dist/styles/insights.css +0 -1
package/dist/styles/nac.css +0 -1
package/dist/styles/ztnac.css +0 -1
package/styleguide/assets/components.js +0 -1732
package/styleguide/assets/guide.js +0 -47
package/styleguide/assets/image.png +0 -0
package/styleguide/assets/okadia.css +0 -122
package/styleguide/assets/theme.css +0 -564
package/styleguide/category/COLOR/index.html +0 -156
package/styleguide/category/COMPONENT/Alert(js)/index.html +0 -418
package/styleguide/category/COMPONENT/Bignumber/index.html +0 -269
package/styleguide/category/COMPONENT/Breadcrumb/index.html +0 -324
package/styleguide/category/COMPONENT/Calendar(js)/index.html +0 -236
package/styleguide/category/COMPONENT/Card/index.html +0 -184
package/styleguide/category/COMPONENT/Chart(js)/index.html +0 -555
package/styleguide/category/COMPONENT/Datagrid(js)/index.html +0 -693
package/styleguide/category/COMPONENT/Datalist(js)/index.html +0 -471
package/styleguide/category/COMPONENT/Growl(js)/index.html +0 -285
package/styleguide/category/COMPONENT/JsonView(js)/index.html +0 -1127
package/styleguide/category/COMPONENT/MenuButton(js)/index.html +0 -281
package/styleguide/category/COMPONENT/Message(js)/index.html +0 -515
package/styleguide/category/COMPONENT/Modal(js)/index.html +0 -444
package/styleguide/category/COMPONENT/Pagination/index.html +0 -348
package/styleguide/category/COMPONENT/Panel/index.html +0 -305
package/styleguide/category/COMPONENT/Progressbar(js)/index.html +0 -313
package/styleguide/category/COMPONENT/Tab(js)/index.html +0 -473
package/styleguide/category/COMPONENT/Tagcloud(js)/index.html +0 -260
package/styleguide/category/COMPONENT/Tooltip(js)/index.html +0 -400
package/styleguide/category/COMPONENT/Tree(js)/index.html +0 -404
package/styleguide/category/CONTROLS/Button(js)/index.html +0 -455
package/styleguide/category/CONTROLS/Checkbox/index.html +0 -194
package/styleguide/category/CONTROLS/Colorpicker(js)/index.html +0 -263
package/styleguide/category/CONTROLS/Datepicker(js)/index.html +0 -292
package/styleguide/category/CONTROLS/Dropdown(js)/index.html +0 -1062
package/styleguide/category/CONTROLS/File/index.html +0 -312
package/styleguide/category/CONTROLS/Form/Control/index.html +0 -227
package/styleguide/category/CONTROLS/Form/Field/index.html +0 -254
package/styleguide/category/CONTROLS/Form/Plain/index.html +0 -193
package/styleguide/category/CONTROLS/Input/index.html +0 -330
package/styleguide/category/CONTROLS/MultiText(js)/index.html +0 -273
package/styleguide/category/CONTROLS/Picklist(js)/index.html +0 -723
package/styleguide/category/CONTROLS/Radio/index.html +0 -197
package/styleguide/category/CONTROLS/Select/index.html +0 -438
package/styleguide/category/CONTROLS/SelectButton(js)/index.html +0 -291
package/styleguide/category/CONTROLS/Slider/index.html +0 -189
package/styleguide/category/CONTROLS/Switch(js)/index.html +0 -345
package/styleguide/category/CONTROLS/SyntaxInput(js)/index.html +0 -480
package/styleguide/category/CONTROLS/Textarea/index.html +0 -185
package/styleguide/category/CONTROLS/Time(js)/index.html +0 -263
package/styleguide/category/ELEMENTS/Box/index.html +0 -163
package/styleguide/category/ELEMENTS/Icon/index.html +0 -305
package/styleguide/category/ELEMENTS/Image/index.html +0 -209
package/styleguide/category/ELEMENTS/List/index.html +0 -392
package/styleguide/category/ELEMENTS/Table/index.html +0 -479
package/styleguide/category/ELEMENTS/Tag/index.html +0 -251
package/styleguide/category/ELEMENTS/Title/index.html +0 -182
package/styleguide/category/LAYOUT/Container/index.html +0 -231
package/styleguide/category/LAYOUT/Grid/index.html +0 -396
package/styleguide/category/LAYOUT/Splitter(js)/index.html +0 -275
package/styleguide/category/UTILITY/index.html +0 -365
package/styleguide/category/Utils/index.html +0 -331
package/styleguide/color.html +0 -169
package/styleguide/index.html +0 -169
package/styleguide/tag/javascript/index.html +0 -7197
package/styleguide/tag/v.0.1.0/index.html +0 -11969

package/styleguide/category/CONTROLS/File/index.html DELETED Viewed

@@ -1,312 +0,0 @@
-<!DOCTYPE html>
-<html>
-  <head>
-    <meta charset="utf-8" />
-    <meta name="viewport" content="width=device-width" />
-    <link href="../../../../dist/styles/default.css" rel="stylesheet" id="ThemeFile" />
-    <link href="../../../assets/okadia.css" rel="stylesheet" />
-    <link href="../../../assets/theme.css" rel="stylesheet" />
-    <link
-      rel="stylesheet"
-      href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.1/css/all.min.css"
-      integrity="sha512-+4zCK9k+qNFUR5X+cKL9EIR+ZOhtIloNl9GIKS57V1MyNsYpYcUrUeQc9vNfzsWfV28IaLL3i96P9sdNyeRssA=="
-      crossorigin="anonymous"
-    />
-    <link href="https://fonts.googleapis.com/css?family=Squada+One&display=swap" rel="stylesheet" />
-    <script src="../../../assets/components.js"></script>
-    <script src="../../../../dist/js/gnui.js"></script>
-  </head>
-  <body>
-    <div class="aigis-container">
-      <header class="aigis-header gn-gcolor is-primary">
-        <span><a href="../../../index.html" class="main-link" style="font-family: 'Squada One', cursive">GNUI</a></span>
-        <span class="has-text-invert" style="font-size: 1em; padding-left: 10px">Start your next web project with GNUI.</span>
-        <div class="gn-select is-medium">
-          <select id="ThemeSelector">
-            <option value="default">default</option>
-            <option value="nac">nac</option>
-            <option value="insights">insights</option>
-            <option value="gpi">gpi</option>
-            <option value="ztnac">ztnac</option>
-            <option value="green24">green24</option>
-          </select>
-        </div>
-        <div>
-          <a class="gn-button is-primary util-link" href="../../../category/Utils/index.html">
-            <span class="gn-icon is-small">
-              <i class="fas fa-tools"></i>
-            </span>
-            Gn.util
-          </a>
-        </div>
-      </header>
-      <div class="aigis-sidemenu">
-  <nav class="gn-tree is-borderless is-large left-menu"></nav>
-</div>
-<script>
-  window.Gn = window.gnui;
-  Gn.ready(function () {
-    var leftMenu = setTree('COLOR,COMPONENT/Alert(js),COMPONENT/Bignumber,COMPONENT/Breadcrumb,COMPONENT/Calendar(js),COMPONENT/Card,COMPONENT/Chart(js),COMPONENT/Datagrid(js),COMPONENT/Datalist(js),COMPONENT/Growl(js),COMPONENT/JsonView(js),COMPONENT/MenuButton(js),COMPONENT/Message(js),COMPONENT/Modal(js),COMPONENT/Pagination,COMPONENT/Panel,COMPONENT/Progressbar(js),COMPONENT/Tab(js),COMPONENT/Tagcloud(js),COMPONENT/Tooltip(js),COMPONENT/Tree(js),CONTROLS/Button(js),CONTROLS/Checkbox,CONTROLS/Colorpicker(js),CONTROLS/Datepicker(js),CONTROLS/Dropdown(js),CONTROLS/File,CONTROLS/Form/Control,CONTROLS/Form/Field,CONTROLS/Form/Plain,CONTROLS/Input,CONTROLS/MultiText(js),CONTROLS/Picklist(js),CONTROLS/Radio,CONTROLS/Select,CONTROLS/SelectButton(js),CONTROLS/Slider,CONTROLS/Switch(js),CONTROLS/SyntaxInput(js),CONTROLS/Textarea,CONTROLS/Time(js),ELEMENTS/Box,ELEMENTS/Icon,ELEMENTS/Image,ELEMENTS/List,ELEMENTS/Table,ELEMENTS/Tag,ELEMENTS/Title,LAYOUT/Container,LAYOUT/Grid,LAYOUT/Splitter(js),UTILITY,Utils'.split(','));
-    var jsComps = ''.split(',');
-    delete leftMenu.Utils;
-    Gn.util.append('.left-menu', renderTree(leftMenu));
-    Gn.util.scrollIntoView(Gn.util.$('.tree-item.is-active'), 300);
-    function renderTree(menus) {
-      var $depths = Gn.util.$('<ul></ul>');
-      Gn.util.each(menus, function (child, menu) {
-        if (Gn.util.isString(child)) {
-          Gn.util.append($depths, renderMenu(menu, '../../../category/' + child + '/index.html', location.href.indexOf(child + '/') > -1));
-        } else {
-          var $_depth = renderMenu(menu, '');
-          Gn.util.append($_depth, renderTree(child));
-          Gn.util.append($depths, $_depth);
-        }
-      });
-      return $depths;
-    }
-    function renderMenu(name, link, isActive) {
-      var $_menu;
-      if (link === '') {
-        $_menu = Gn.util.$('<li>' + name + '</li>');
-      } else {
-        var menuClass = isActive ? ' is-active' : '';
-        $_menu = Gn.util.$('<li><a href="' + link + '"><div class="tree-item' + menuClass + '">' + name.split('(js)').join('') + '</a></div></li>');
-      }
-      if (name.indexOf('(js)') > 0) {
-        Gn.util.append(Gn.util.find('.tree-item', $_menu), Gn.util.$('<span class="gn-tag is-small is-info-light">JS</span>'));
-      }
-      return $_menu;
-    }
-    function setTree(categorys) {
-      var menus = {};
-      categorys.forEach(function (category) {
-        parseTree(menus, category.split('/'), category);
-      });
-      return menus;
-    }
-    function parseTree(parents, child, catgry) {
-      var _depth = child.shift();
-      if (parents[_depth] === undefined) {
-        parents[_depth] = {};
-      }
-      if (child.length === 1) {
-        parents[_depth][child] = catgry;
-      } else if (child.length > 1) {
-        parseTree(parents[_depth], child, catgry);
-      } else {
-        parents[_depth] = catgry;
-      }
-    }
-  });
-</script>
-      <div class="aigis-contents">
-        <div class="aigis-contents__body">
-<div>
-  <div class="aigis-module File">
-    <h2 class="aigis-module__heading" id="File">File</h2>
-    <div class="aigis-module__filepath">/scss/controls/file.scss</div>
-    <div class="aigis-tags">
-      <span class="gn-tag">v.0.1.0</span>
-    </div>
-     <h3 id="-">기본 사용</h3>
-<ul>
-<li>사용 태그 :  <code>label &gt; input[file]</code></li>
-</ul>
-<div class="aigis-preview">
-  <!-- 기본  -->
-<label class="gn-file is-normal">
-    <input type="file"> Select file </label>
-<!-- 크기  -->
-<label class="gn-file is-medium">
-    <input type="file"> Select file </label>
-<label class="gn-file is-large">
-    <input type="file"> Select file </label></div>
-<pre><code class="language-html"><span class="token comment" spellcheck="true">&lt;!-- 기본  --></span>
-<span class="token tag" ><span class="token tag" ><span class="token punctuation" >&lt;</span>label</span> <span class="token attr-name" >class</span><span class="token attr-value" ><span class="token punctuation" >=</span><span class="token punctuation" >"</span>gn-file is-normal<span class="token punctuation" >"</span></span><span class="token punctuation" >></span></span>
-  <span class="token tag" ><span class="token tag" ><span class="token punctuation" >&lt;</span>input</span> <span class="token attr-name" >type</span><span class="token attr-value" ><span class="token punctuation" >=</span><span class="token punctuation" >"</span>file<span class="token punctuation" >"</span></span><span class="token punctuation" >></span></span>
-  Select file
-<span class="token tag" ><span class="token tag" ><span class="token punctuation" >&lt;/</span>label</span><span class="token punctuation" >></span></span>
-<span class="token comment" spellcheck="true">&lt;!-- 크기  --></span>
-<span class="token tag" ><span class="token tag" ><span class="token punctuation" >&lt;</span>label</span> <span class="token attr-name" >class</span><span class="token attr-value" ><span class="token punctuation" >=</span><span class="token punctuation" >"</span>gn-file is-medium<span class="token punctuation" >"</span></span><span class="token punctuation" >></span></span>
-  <span class="token tag" ><span class="token tag" ><span class="token punctuation" >&lt;</span>input</span> <span class="token attr-name" >type</span><span class="token attr-value" ><span class="token punctuation" >=</span><span class="token punctuation" >"</span>file<span class="token punctuation" >"</span></span><span class="token punctuation" >></span></span>
-  Select file
-<span class="token tag" ><span class="token tag" ><span class="token punctuation" >&lt;/</span>label</span><span class="token punctuation" >></span></span>
-<span class="token tag" ><span class="token tag" ><span class="token punctuation" >&lt;</span>label</span> <span class="token attr-name" >class</span><span class="token attr-value" ><span class="token punctuation" >=</span><span class="token punctuation" >"</span>gn-file is-large<span class="token punctuation" >"</span></span><span class="token punctuation" >></span></span>
-  <span class="token tag" ><span class="token tag" ><span class="token punctuation" >&lt;</span>input</span> <span class="token attr-name" >type</span><span class="token attr-value" ><span class="token punctuation" >=</span><span class="token punctuation" >"</span>file<span class="token punctuation" >"</span></span><span class="token punctuation" >></span></span>
-  Select file
-<span class="token tag" ><span class="token tag" ><span class="token punctuation" >&lt;/</span>label</span><span class="token punctuation" >></span></span>
-</code></pre>
-<h3 id="-">확장</h3>
-<ul>
-<li>icon 추가, label 추가</li>
-<li>레이블을 추가할 경우, <strong>레이블을 먼저 선언</strong>해준다.</li>
-</ul>
-<div class="aigis-preview">
-  <!-- 아이콘만 사용할 경우 -->
-<label class="gn-file">
-    <input type="file">
-    <span class="gn-icon is-small">
-        <i class="fas fa-upload"></i>
-    </span>
-</label>
-<!-- 텍스트와 동일한 색깔의 아이콘 사용할 경우 -->
-<label class="gn-file is-info is-outline">
-    <input type="file"> Select File <span class="gn-icon is-small">
-        <i class="fas fa-angle-right"></i>
-    </span>
-</label>
-<!-- 텍스트와 다른 색깔의 아이콘 사용할 경우 -->
-<div class="gn-control has-icon-right">
-    <span class="gn-icon is-small is-black is-right">
-        <i class="fas fa-angle-right"></i>
-    </span>
-    <label class="gn-file is-info">
-        <input type="file"> Select File </label>
-</div>
-<!-- 아이콘과 텍스트 함께 사용할 경우 -->
-<div class="gn-control has-icon-right">
-    <span class="gn-icon is-normal is-white is-right">
-        <i class="far fa-file-image"></i>
-    </span>
-    <label class="gn-file is-info">
-        <input type="file"> Select File </label>
-</div>
-<!-- 레이블을 함께 사용할 경우 -->
-<div class="gn-control has-arrange">
-    <label class="gn-file is-info">
-        <input type="file"> Select File </label>
-    <span class="gn-plain">gnui-guide.png</span>
-</div></div>
-<pre><code class="language-html"><span class="token comment" spellcheck="true">&lt;!-- 아이콘만 사용할 경우 --></span>
-<span class="token tag" ><span class="token tag" ><span class="token punctuation" >&lt;</span>label</span> <span class="token attr-name" >class</span><span class="token attr-value" ><span class="token punctuation" >=</span><span class="token punctuation" >"</span>gn-file<span class="token punctuation" >"</span></span><span class="token punctuation" >></span></span>
-  <span class="token tag" ><span class="token tag" ><span class="token punctuation" >&lt;</span>input</span> <span class="token attr-name" >type</span><span class="token attr-value" ><span class="token punctuation" >=</span><span class="token punctuation" >"</span>file<span class="token punctuation" >"</span></span><span class="token punctuation" >></span></span>
-  <span class="token tag" ><span class="token tag" ><span class="token punctuation" >&lt;</span>span</span> <span class="token attr-name" >class</span><span class="token attr-value" ><span class="token punctuation" >=</span><span class="token punctuation" >"</span>gn-icon is-small<span class="token punctuation" >"</span></span><span class="token punctuation" >></span></span>
-    <span class="token tag" ><span class="token tag" ><span class="token punctuation" >&lt;</span>i</span> <span class="token attr-name" >class</span><span class="token attr-value" ><span class="token punctuation" >=</span><span class="token punctuation" >"</span>fas fa-upload<span class="token punctuation" >"</span></span><span class="token punctuation" >></span></span><span class="token tag" ><span class="token tag" ><span class="token punctuation" >&lt;/</span>i</span><span class="token punctuation" >></span></span>
-  <span class="token tag" ><span class="token tag" ><span class="token punctuation" >&lt;/</span>span</span><span class="token punctuation" >></span></span>
-<span class="token tag" ><span class="token tag" ><span class="token punctuation" >&lt;/</span>label</span><span class="token punctuation" >></span></span>
-<span class="token comment" spellcheck="true">&lt;!-- 텍스트와 동일한 색깔의 아이콘 사용할 경우 --></span>
-<span class="token tag" ><span class="token tag" ><span class="token punctuation" >&lt;</span>label</span> <span class="token attr-name" >class</span><span class="token attr-value" ><span class="token punctuation" >=</span><span class="token punctuation" >"</span>gn-file is-info is-outline<span class="token punctuation" >"</span></span><span class="token punctuation" >></span></span>
-  <span class="token tag" ><span class="token tag" ><span class="token punctuation" >&lt;</span>input</span> <span class="token attr-name" >type</span><span class="token attr-value" ><span class="token punctuation" >=</span><span class="token punctuation" >"</span>file<span class="token punctuation" >"</span></span><span class="token punctuation" >></span></span>
-  Select File
-  <span class="token tag" ><span class="token tag" ><span class="token punctuation" >&lt;</span>span</span> <span class="token attr-name" >class</span><span class="token attr-value" ><span class="token punctuation" >=</span><span class="token punctuation" >"</span>gn-icon is-small<span class="token punctuation" >"</span></span><span class="token punctuation" >></span></span>
-    <span class="token tag" ><span class="token tag" ><span class="token punctuation" >&lt;</span>i</span> <span class="token attr-name" >class</span><span class="token attr-value" ><span class="token punctuation" >=</span><span class="token punctuation" >"</span>fas fa-angle-right<span class="token punctuation" >"</span></span><span class="token punctuation" >></span></span><span class="token tag" ><span class="token tag" ><span class="token punctuation" >&lt;/</span>i</span><span class="token punctuation" >></span></span>
-  <span class="token tag" ><span class="token tag" ><span class="token punctuation" >&lt;/</span>span</span><span class="token punctuation" >></span></span>
-<span class="token tag" ><span class="token tag" ><span class="token punctuation" >&lt;/</span>label</span><span class="token punctuation" >></span></span>
-<span class="token comment" spellcheck="true">&lt;!-- 텍스트와 다른 색깔의 아이콘 사용할 경우 --></span>
-<span class="token tag" ><span class="token tag" ><span class="token punctuation" >&lt;</span>div</span> <span class="token attr-name" >class</span><span class="token attr-value" ><span class="token punctuation" >=</span><span class="token punctuation" >"</span>gn-control has-icon-right<span class="token punctuation" >"</span></span><span class="token punctuation" >></span></span>
-  <span class="token tag" ><span class="token tag" ><span class="token punctuation" >&lt;</span>span</span> <span class="token attr-name" >class</span><span class="token attr-value" ><span class="token punctuation" >=</span><span class="token punctuation" >"</span>gn-icon is-small is-black is-right<span class="token punctuation" >"</span></span><span class="token punctuation" >></span></span>
-    <span class="token tag" ><span class="token tag" ><span class="token punctuation" >&lt;</span>i</span> <span class="token attr-name" >class</span><span class="token attr-value" ><span class="token punctuation" >=</span><span class="token punctuation" >"</span>fas fa-angle-right<span class="token punctuation" >"</span></span><span class="token punctuation" >></span></span><span class="token tag" ><span class="token tag" ><span class="token punctuation" >&lt;/</span>i</span><span class="token punctuation" >></span></span>
-  <span class="token tag" ><span class="token tag" ><span class="token punctuation" >&lt;/</span>span</span><span class="token punctuation" >></span></span>
-  <span class="token tag" ><span class="token tag" ><span class="token punctuation" >&lt;</span>label</span> <span class="token attr-name" >class</span><span class="token attr-value" ><span class="token punctuation" >=</span><span class="token punctuation" >"</span>gn-file is-info<span class="token punctuation" >"</span></span><span class="token punctuation" >></span></span>
-    <span class="token tag" ><span class="token tag" ><span class="token punctuation" >&lt;</span>input</span> <span class="token attr-name" >type</span><span class="token attr-value" ><span class="token punctuation" >=</span><span class="token punctuation" >"</span>file<span class="token punctuation" >"</span></span><span class="token punctuation" >></span></span>
-    Select File
-  <span class="token tag" ><span class="token tag" ><span class="token punctuation" >&lt;/</span>label</span><span class="token punctuation" >></span></span>
-<span class="token tag" ><span class="token tag" ><span class="token punctuation" >&lt;/</span>div</span><span class="token punctuation" >></span></span>
-<span class="token comment" spellcheck="true">&lt;!-- 아이콘과 텍스트 함께 사용할 경우 --></span>
-<span class="token tag" ><span class="token tag" ><span class="token punctuation" >&lt;</span>div</span> <span class="token attr-name" >class</span><span class="token attr-value" ><span class="token punctuation" >=</span><span class="token punctuation" >"</span>gn-control has-icon-right<span class="token punctuation" >"</span></span><span class="token punctuation" >></span></span>
-  <span class="token tag" ><span class="token tag" ><span class="token punctuation" >&lt;</span>span</span> <span class="token attr-name" >class</span><span class="token attr-value" ><span class="token punctuation" >=</span><span class="token punctuation" >"</span>gn-icon is-normal is-white is-right<span class="token punctuation" >"</span></span><span class="token punctuation" >></span></span>
-    <span class="token tag" ><span class="token tag" ><span class="token punctuation" >&lt;</span>i</span> <span class="token attr-name" >class</span><span class="token attr-value" ><span class="token punctuation" >=</span><span class="token punctuation" >"</span>far fa-file-image<span class="token punctuation" >"</span></span><span class="token punctuation" >></span></span><span class="token tag" ><span class="token tag" ><span class="token punctuation" >&lt;/</span>i</span><span class="token punctuation" >></span></span>
-  <span class="token tag" ><span class="token tag" ><span class="token punctuation" >&lt;/</span>span</span><span class="token punctuation" >></span></span>
-  <span class="token tag" ><span class="token tag" ><span class="token punctuation" >&lt;</span>label</span> <span class="token attr-name" >class</span><span class="token attr-value" ><span class="token punctuation" >=</span><span class="token punctuation" >"</span>gn-file is-info<span class="token punctuation" >"</span></span><span class="token punctuation" >></span></span>
-    <span class="token tag" ><span class="token tag" ><span class="token punctuation" >&lt;</span>input</span> <span class="token attr-name" >type</span><span class="token attr-value" ><span class="token punctuation" >=</span><span class="token punctuation" >"</span>file<span class="token punctuation" >"</span></span><span class="token punctuation" >></span></span>
-    Select File
-  <span class="token tag" ><span class="token tag" ><span class="token punctuation" >&lt;/</span>label</span><span class="token punctuation" >></span></span>
-<span class="token tag" ><span class="token tag" ><span class="token punctuation" >&lt;/</span>div</span><span class="token punctuation" >></span></span>
-<span class="token comment" spellcheck="true">&lt;!-- 레이블을 함께 사용할 경우 --></span>
-<span class="token tag" ><span class="token tag" ><span class="token punctuation" >&lt;</span>div</span> <span class="token attr-name" >class</span><span class="token attr-value" ><span class="token punctuation" >=</span><span class="token punctuation" >"</span>gn-control has-arrange<span class="token punctuation" >"</span></span><span class="token punctuation" >></span></span>
-  <span class="token tag" ><span class="token tag" ><span class="token punctuation" >&lt;</span>label</span> <span class="token attr-name" >class</span><span class="token attr-value" ><span class="token punctuation" >=</span><span class="token punctuation" >"</span>gn-file is-info<span class="token punctuation" >"</span></span><span class="token punctuation" >></span></span>
-    <span class="token tag" ><span class="token tag" ><span class="token punctuation" >&lt;</span>input</span> <span class="token attr-name" >type</span><span class="token attr-value" ><span class="token punctuation" >=</span><span class="token punctuation" >"</span>file<span class="token punctuation" >"</span></span><span class="token punctuation" >></span></span>
-    Select File
-  <span class="token tag" ><span class="token tag" ><span class="token punctuation" >&lt;/</span>label</span><span class="token punctuation" >></span></span>
-  <span class="token tag" ><span class="token tag" ><span class="token punctuation" >&lt;</span>span</span> <span class="token attr-name" >class</span><span class="token attr-value" ><span class="token punctuation" >=</span><span class="token punctuation" >"</span>gn-plain<span class="token punctuation" >"</span></span><span class="token punctuation" >></span></span>gnui-guide.png<span class="token tag" ><span class="token tag" ><span class="token punctuation" >&lt;/</span>span</span><span class="token punctuation" >></span></span>
-<span class="token tag" ><span class="token tag" ><span class="token punctuation" >&lt;/</span>div</span><span class="token punctuation" >></span></span>
-</code></pre>
-<h3 id="-">색상</h3>
-<div class="aigis-preview">
-  <label class="gn-file is-success">
-    <input type="file"> Select file </label>
-<label class="gn-file is-warning">
-    <input type="file"> Select file </label>
-<label class="gn-file is-danger">
-    <input type="file"> Select file </label>
-<label class="gn-file is-info">
-    <input type="file"> Select file </label></div>
-<pre><code class="language-html"><span class="token tag" ><span class="token tag" ><span class="token punctuation" >&lt;</span>label</span> <span class="token attr-name" >class</span><span class="token attr-value" ><span class="token punctuation" >=</span><span class="token punctuation" >"</span>gn-file is-success<span class="token punctuation" >"</span></span><span class="token punctuation" >></span></span>
-  <span class="token tag" ><span class="token tag" ><span class="token punctuation" >&lt;</span>input</span> <span class="token attr-name" >type</span><span class="token attr-value" ><span class="token punctuation" >=</span><span class="token punctuation" >"</span>file<span class="token punctuation" >"</span></span><span class="token punctuation" >></span></span>
-  Select file
-<span class="token tag" ><span class="token tag" ><span class="token punctuation" >&lt;/</span>label</span><span class="token punctuation" >></span></span>
-<span class="token tag" ><span class="token tag" ><span class="token punctuation" >&lt;</span>label</span> <span class="token attr-name" >class</span><span class="token attr-value" ><span class="token punctuation" >=</span><span class="token punctuation" >"</span>gn-file is-warning<span class="token punctuation" >"</span></span><span class="token punctuation" >></span></span>
-  <span class="token tag" ><span class="token tag" ><span class="token punctuation" >&lt;</span>input</span> <span class="token attr-name" >type</span><span class="token attr-value" ><span class="token punctuation" >=</span><span class="token punctuation" >"</span>file<span class="token punctuation" >"</span></span><span class="token punctuation" >></span></span>
-  Select file
-<span class="token tag" ><span class="token tag" ><span class="token punctuation" >&lt;/</span>label</span><span class="token punctuation" >></span></span>
-<span class="token tag" ><span class="token tag" ><span class="token punctuation" >&lt;</span>label</span> <span class="token attr-name" >class</span><span class="token attr-value" ><span class="token punctuation" >=</span><span class="token punctuation" >"</span>gn-file is-danger<span class="token punctuation" >"</span></span><span class="token punctuation" >></span></span>
-  <span class="token tag" ><span class="token tag" ><span class="token punctuation" >&lt;</span>input</span> <span class="token attr-name" >type</span><span class="token attr-value" ><span class="token punctuation" >=</span><span class="token punctuation" >"</span>file<span class="token punctuation" >"</span></span><span class="token punctuation" >></span></span>
-  Select file
-<span class="token tag" ><span class="token tag" ><span class="token punctuation" >&lt;/</span>label</span><span class="token punctuation" >></span></span>
-<span class="token tag" ><span class="token tag" ><span class="token punctuation" >&lt;</span>label</span> <span class="token attr-name" >class</span><span class="token attr-value" ><span class="token punctuation" >=</span><span class="token punctuation" >"</span>gn-file is-info<span class="token punctuation" >"</span></span><span class="token punctuation" >></span></span>
-  <span class="token tag" ><span class="token tag" ><span class="token punctuation" >&lt;</span>input</span> <span class="token attr-name" >type</span><span class="token attr-value" ><span class="token punctuation" >=</span><span class="token punctuation" >"</span>file<span class="token punctuation" >"</span></span><span class="token punctuation" >></span></span>
-  Select file
-<span class="token tag" ><span class="token tag" ><span class="token punctuation" >&lt;/</span>label</span><span class="token punctuation" >></span></span>
-</code></pre>
-<h3 id="-">상태</h3>
-<div class="aigis-preview">
-  <label class="gn-file is-hover">
-    <input type="file"> Is hover </label>
-<label class="gn-file is-disabled">
-    <input type="file" disabled> Disabled </label>
-<label class="gn-file is-invalid">
-    <input type="file"> Invalid </label></div>
-<pre><code class="language-html"><span class="token tag" ><span class="token tag" ><span class="token punctuation" >&lt;</span>label</span> <span class="token attr-name" >class</span><span class="token attr-value" ><span class="token punctuation" >=</span><span class="token punctuation" >"</span>gn-file is-hover<span class="token punctuation" >"</span></span><span class="token punctuation" >></span></span>
-  <span class="token tag" ><span class="token tag" ><span class="token punctuation" >&lt;</span>input</span> <span class="token attr-name" >type</span><span class="token attr-value" ><span class="token punctuation" >=</span><span class="token punctuation" >"</span>file<span class="token punctuation" >"</span></span><span class="token punctuation" >></span></span>
-  Is hover
-<span class="token tag" ><span class="token tag" ><span class="token punctuation" >&lt;/</span>label</span><span class="token punctuation" >></span></span>
-<span class="token tag" ><span class="token tag" ><span class="token punctuation" >&lt;</span>label</span> <span class="token attr-name" >class</span><span class="token attr-value" ><span class="token punctuation" >=</span><span class="token punctuation" >"</span>gn-file is-disabled<span class="token punctuation" >"</span></span><span class="token punctuation" >></span></span>
-  <span class="token tag" ><span class="token tag" ><span class="token punctuation" >&lt;</span>input</span> <span class="token attr-name" >type</span><span class="token attr-value" ><span class="token punctuation" >=</span><span class="token punctuation" >"</span>file<span class="token punctuation" >"</span></span> <span class="token attr-name" >disabled</span><span class="token punctuation" >></span></span>
-  Disabled
-<span class="token tag" ><span class="token tag" ><span class="token punctuation" >&lt;/</span>label</span><span class="token punctuation" >></span></span>
-<span class="token tag" ><span class="token tag" ><span class="token punctuation" >&lt;</span>label</span> <span class="token attr-name" >class</span><span class="token attr-value" ><span class="token punctuation" >=</span><span class="token punctuation" >"</span>gn-file is-invalid<span class="token punctuation" >"</span></span><span class="token punctuation" >></span></span>
-  <span class="token tag" ><span class="token tag" ><span class="token punctuation" >&lt;</span>input</span> <span class="token attr-name" >type</span><span class="token attr-value" ><span class="token punctuation" >=</span><span class="token punctuation" >"</span>file<span class="token punctuation" >"</span></span><span class="token punctuation" >></span></span>
-  Invalid
-<span class="token tag" ><span class="token tag" ><span class="token punctuation" >&lt;/</span>label</span><span class="token punctuation" >></span></span>
-</code></pre>
-  </div>
-</div>
-          <footer class="aigis-footer">Last update at 2024/04/15 13:52</footer>
-        </div>
-      </div>
-    </div>
-    <script src="../../../assets/guide.js"></script>
-  </body>
-</html>

package/styleguide/category/CONTROLS/Form/Control/index.html DELETED Viewed

@@ -1,227 +0,0 @@
-<!DOCTYPE html>
-<html>
-  <head>
-    <meta charset="utf-8" />
-    <meta name="viewport" content="width=device-width" />
-    <link href="../../../../../dist/styles/default.css" rel="stylesheet" id="ThemeFile" />
-    <link href="../../../../assets/okadia.css" rel="stylesheet" />
-    <link href="../../../../assets/theme.css" rel="stylesheet" />
-    <link
-      rel="stylesheet"
-      href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.1/css/all.min.css"
-      integrity="sha512-+4zCK9k+qNFUR5X+cKL9EIR+ZOhtIloNl9GIKS57V1MyNsYpYcUrUeQc9vNfzsWfV28IaLL3i96P9sdNyeRssA=="
-      crossorigin="anonymous"
-    />
-    <link href="https://fonts.googleapis.com/css?family=Squada+One&display=swap" rel="stylesheet" />
-    <script src="../../../../assets/components.js"></script>
-    <script src="../../../../../dist/js/gnui.js"></script>
-  </head>
-  <body>
-    <div class="aigis-container">
-      <header class="aigis-header gn-gcolor is-primary">
-        <span><a href="../../../../index.html" class="main-link" style="font-family: 'Squada One', cursive">GNUI</a></span>
-        <span class="has-text-invert" style="font-size: 1em; padding-left: 10px">Start your next web project with GNUI.</span>
-        <div class="gn-select is-medium">
-          <select id="ThemeSelector">
-            <option value="default">default</option>
-            <option value="nac">nac</option>
-            <option value="insights">insights</option>
-            <option value="gpi">gpi</option>
-            <option value="ztnac">ztnac</option>
-            <option value="green24">green24</option>
-          </select>
-        </div>
-        <div>
-          <a class="gn-button is-primary util-link" href="../../../../category/Utils/index.html">
-            <span class="gn-icon is-small">
-              <i class="fas fa-tools"></i>
-            </span>
-            Gn.util
-          </a>
-        </div>
-      </header>
-      <div class="aigis-sidemenu">
-  <nav class="gn-tree is-borderless is-large left-menu"></nav>
-</div>
-<script>
-  window.Gn = window.gnui;
-  Gn.ready(function () {
-    var leftMenu = setTree('COLOR,COMPONENT/Alert(js),COMPONENT/Bignumber,COMPONENT/Breadcrumb,COMPONENT/Calendar(js),COMPONENT/Card,COMPONENT/Chart(js),COMPONENT/Datagrid(js),COMPONENT/Datalist(js),COMPONENT/Growl(js),COMPONENT/JsonView(js),COMPONENT/MenuButton(js),COMPONENT/Message(js),COMPONENT/Modal(js),COMPONENT/Pagination,COMPONENT/Panel,COMPONENT/Progressbar(js),COMPONENT/Tab(js),COMPONENT/Tagcloud(js),COMPONENT/Tooltip(js),COMPONENT/Tree(js),CONTROLS/Button(js),CONTROLS/Checkbox,CONTROLS/Colorpicker(js),CONTROLS/Datepicker(js),CONTROLS/Dropdown(js),CONTROLS/File,CONTROLS/Form/Control,CONTROLS/Form/Field,CONTROLS/Form/Plain,CONTROLS/Input,CONTROLS/MultiText(js),CONTROLS/Picklist(js),CONTROLS/Radio,CONTROLS/Select,CONTROLS/SelectButton(js),CONTROLS/Slider,CONTROLS/Switch(js),CONTROLS/SyntaxInput(js),CONTROLS/Textarea,CONTROLS/Time(js),ELEMENTS/Box,ELEMENTS/Icon,ELEMENTS/Image,ELEMENTS/List,ELEMENTS/Table,ELEMENTS/Tag,ELEMENTS/Title,LAYOUT/Container,LAYOUT/Grid,LAYOUT/Splitter(js),UTILITY,Utils'.split(','));
-    var jsComps = ''.split(',');
-    delete leftMenu.Utils;
-    Gn.util.append('.left-menu', renderTree(leftMenu));
-    Gn.util.scrollIntoView(Gn.util.$('.tree-item.is-active'), 300);
-    function renderTree(menus) {
-      var $depths = Gn.util.$('<ul></ul>');
-      Gn.util.each(menus, function (child, menu) {
-        if (Gn.util.isString(child)) {
-          Gn.util.append($depths, renderMenu(menu, '../../../../category/' + child + '/index.html', location.href.indexOf(child + '/') > -1));
-        } else {
-          var $_depth = renderMenu(menu, '');
-          Gn.util.append($_depth, renderTree(child));
-          Gn.util.append($depths, $_depth);
-        }
-      });
-      return $depths;
-    }
-    function renderMenu(name, link, isActive) {
-      var $_menu;
-      if (link === '') {
-        $_menu = Gn.util.$('<li>' + name + '</li>');
-      } else {
-        var menuClass = isActive ? ' is-active' : '';
-        $_menu = Gn.util.$('<li><a href="' + link + '"><div class="tree-item' + menuClass + '">' + name.split('(js)').join('') + '</a></div></li>');
-      }
-      if (name.indexOf('(js)') > 0) {
-        Gn.util.append(Gn.util.find('.tree-item', $_menu), Gn.util.$('<span class="gn-tag is-small is-info-light">JS</span>'));
-      }
-      return $_menu;
-    }
-    function setTree(categorys) {
-      var menus = {};
-      categorys.forEach(function (category) {
-        parseTree(menus, category.split('/'), category);
-      });
-      return menus;
-    }
-    function parseTree(parents, child, catgry) {
-      var _depth = child.shift();
-      if (parents[_depth] === undefined) {
-        parents[_depth] = {};
-      }
-      if (child.length === 1) {
-        parents[_depth][child] = catgry;
-      } else if (child.length > 1) {
-        parseTree(parents[_depth], child, catgry);
-      } else {
-        parents[_depth] = catgry;
-      }
-    }
-  });
-</script>
-      <div class="aigis-contents">
-        <div class="aigis-contents__body">
-<div>
-  <div class="aigis-module Control">
-    <h2 class="aigis-module__heading" id="Control">Control</h2>
-    <div class="aigis-module__filepath">/scss/controls/form.scss</div>
-    <div class="aigis-tags">
-      <span class="gn-tag">v.0.1.0</span>
-    </div>
-     <h2 id="-gn-control">.gn-control</h2>
-<ul>
-<li>CONTROLS 객체를 wrap 할때 사용</li>
-</ul>
-<h3 id="-">크기</h3>
-<ul>
-<li>하위 컨트롤의 크기를 지정하는데 사용</li>
-<li>is-small, is-normal, is-medium, is-large, is-full</li>
-</ul>
-<h3 id="-">상태</h3>
-<ul>
-<li>하위 컨트롤의 상태를 지정하는데 사용</li>
-<li>is-loading</li>
-</ul>
-<h3 id="-">아이콘 추가</h3>
-<ul>
-<li>하위 컨트롤에 아이콘을 추가할 경우 사용(.has-icon-left, .has-icon-right)</li>
-<li>아이콘(.gn-icon)을 포함하며, 해당 아이콘에 정렬 클래스 (.is-left, .is-right)를 추가한다.</li>
-</ul>
-<div class="aigis-preview">
-  <div class="gn-control has-icon-left has-icon-right">
-    <span class="gn-icon is-left">
-        <i class="fas fa-wifi"></i>
-    </span>
-    <span class="gn-icon is-right">
-        <i class="fas fa-search"></i>
-    </span>
-    <input type="text" class="gn-input" placeholder="input text">
-</div></div>
-<pre><code class="language-html">  <span class="token tag" ><span class="token tag" ><span class="token punctuation" >&lt;</span>div</span> <span class="token attr-name" >class</span><span class="token attr-value" ><span class="token punctuation" >=</span><span class="token punctuation" >"</span>gn-control has-icon-left has-icon-right<span class="token punctuation" >"</span></span><span class="token punctuation" >></span></span>
-    <span class="token tag" ><span class="token tag" ><span class="token punctuation" >&lt;</span>span</span> <span class="token attr-name" >class</span><span class="token attr-value" ><span class="token punctuation" >=</span><span class="token punctuation" >"</span>gn-icon is-left<span class="token punctuation" >"</span></span><span class="token punctuation" >></span></span>
-      <span class="token tag" ><span class="token tag" ><span class="token punctuation" >&lt;</span>i</span> <span class="token attr-name" >class</span><span class="token attr-value" ><span class="token punctuation" >=</span><span class="token punctuation" >"</span>fas fa-wifi<span class="token punctuation" >"</span></span><span class="token punctuation" >></span></span><span class="token tag" ><span class="token tag" ><span class="token punctuation" >&lt;/</span>i</span><span class="token punctuation" >></span></span>
-    <span class="token tag" ><span class="token tag" ><span class="token punctuation" >&lt;/</span>span</span><span class="token punctuation" >></span></span>
-    <span class="token tag" ><span class="token tag" ><span class="token punctuation" >&lt;</span>span</span> <span class="token attr-name" >class</span><span class="token attr-value" ><span class="token punctuation" >=</span><span class="token punctuation" >"</span>gn-icon is-right<span class="token punctuation" >"</span></span><span class="token punctuation" >></span></span>
-      <span class="token tag" ><span class="token tag" ><span class="token punctuation" >&lt;</span>i</span> <span class="token attr-name" >class</span><span class="token attr-value" ><span class="token punctuation" >=</span><span class="token punctuation" >"</span>fas fa-search<span class="token punctuation" >"</span></span><span class="token punctuation" >></span></span><span class="token tag" ><span class="token tag" ><span class="token punctuation" >&lt;/</span>i</span><span class="token punctuation" >></span></span>
-    <span class="token tag" ><span class="token tag" ><span class="token punctuation" >&lt;/</span>span</span><span class="token punctuation" >></span></span>
-    <span class="token tag" ><span class="token tag" ><span class="token punctuation" >&lt;</span>input</span> <span class="token attr-name" >type</span><span class="token attr-value" ><span class="token punctuation" >=</span><span class="token punctuation" >"</span>text<span class="token punctuation" >"</span></span> <span class="token attr-name" >class</span><span class="token attr-value" ><span class="token punctuation" >=</span><span class="token punctuation" >"</span>gn-input<span class="token punctuation" >"</span></span> <span class="token attr-name" >placeholder</span><span class="token attr-value" ><span class="token punctuation" >=</span><span class="token punctuation" >"</span>input text<span class="token punctuation" >"</span></span><span class="token punctuation" >></span></span>
-  <span class="token tag" ><span class="token tag" ><span class="token punctuation" >&lt;/</span>div</span><span class="token punctuation" >></span></span>
-</code></pre>
-<h3 id="-">여러개의 컨트롤 사용</h3>
-<ul>
-<li>하위에 여러개의 컨트롤을 사용할 때 .has-arrange 클래스를 추가하여 사용</li>
-</ul>
-<h3 id="-">정렬</h3>
-<ul>
-<li>왼쪽(is-left, 기본값), 가운데(is-center), 오른쪽(is-right)</li>
-</ul>
-<div class="aigis-preview">
-  <div class="gn-control is-large has-arrange is-center">
-    <button type="button" class="gn-button">
-        <span class="gn-icon">
-            <i class="fas fa-align-left"></i>
-        </span> Left </button>
-    <button type="button" class="gn-button">
-        <span class="gn-icon">
-            <i class="fas fa-align-center"></i>
-        </span> Center </button>
-    <button type="button" class="gn-button">
-        <span class="gn-icon">
-            <i class="fas fa-align-right"></i>
-        </span> Right </button>
-</div></div>
-<pre><code class="language-html"><span class="token tag" ><span class="token tag" ><span class="token punctuation" >&lt;</span>div</span> <span class="token attr-name" >class</span><span class="token attr-value" ><span class="token punctuation" >=</span><span class="token punctuation" >"</span>gn-control is-large has-arrange is-center<span class="token punctuation" >"</span></span><span class="token punctuation" >></span></span>
-  <span class="token tag" ><span class="token tag" ><span class="token punctuation" >&lt;</span>button</span> <span class="token attr-name" >type</span><span class="token attr-value" ><span class="token punctuation" >=</span><span class="token punctuation" >"</span>button<span class="token punctuation" >"</span></span> <span class="token attr-name" >class</span><span class="token attr-value" ><span class="token punctuation" >=</span><span class="token punctuation" >"</span>gn-button<span class="token punctuation" >"</span></span><span class="token punctuation" >></span></span>
-    <span class="token tag" ><span class="token tag" ><span class="token punctuation" >&lt;</span>span</span> <span class="token attr-name" >class</span><span class="token attr-value" ><span class="token punctuation" >=</span><span class="token punctuation" >"</span>gn-icon<span class="token punctuation" >"</span></span><span class="token punctuation" >></span></span>
-      <span class="token tag" ><span class="token tag" ><span class="token punctuation" >&lt;</span>i</span> <span class="token attr-name" >class</span><span class="token attr-value" ><span class="token punctuation" >=</span><span class="token punctuation" >"</span>fas fa-align-left<span class="token punctuation" >"</span></span><span class="token punctuation" >></span></span><span class="token tag" ><span class="token tag" ><span class="token punctuation" >&lt;/</span>i</span><span class="token punctuation" >></span></span>
-    <span class="token tag" ><span class="token tag" ><span class="token punctuation" >&lt;/</span>span</span><span class="token punctuation" >></span></span>
-    Left
-  <span class="token tag" ><span class="token tag" ><span class="token punctuation" >&lt;/</span>button</span><span class="token punctuation" >></span></span>
-  <span class="token tag" ><span class="token tag" ><span class="token punctuation" >&lt;</span>button</span> <span class="token attr-name" >type</span><span class="token attr-value" ><span class="token punctuation" >=</span><span class="token punctuation" >"</span>button<span class="token punctuation" >"</span></span> <span class="token attr-name" >class</span><span class="token attr-value" ><span class="token punctuation" >=</span><span class="token punctuation" >"</span>gn-button<span class="token punctuation" >"</span></span><span class="token punctuation" >></span></span>
-    <span class="token tag" ><span class="token tag" ><span class="token punctuation" >&lt;</span>span</span> <span class="token attr-name" >class</span><span class="token attr-value" ><span class="token punctuation" >=</span><span class="token punctuation" >"</span>gn-icon<span class="token punctuation" >"</span></span><span class="token punctuation" >></span></span>
-      <span class="token tag" ><span class="token tag" ><span class="token punctuation" >&lt;</span>i</span> <span class="token attr-name" >class</span><span class="token attr-value" ><span class="token punctuation" >=</span><span class="token punctuation" >"</span>fas fa-align-center<span class="token punctuation" >"</span></span><span class="token punctuation" >></span></span><span class="token tag" ><span class="token tag" ><span class="token punctuation" >&lt;/</span>i</span><span class="token punctuation" >></span></span>
-    <span class="token tag" ><span class="token tag" ><span class="token punctuation" >&lt;/</span>span</span><span class="token punctuation" >></span></span>
-    Center
-  <span class="token tag" ><span class="token tag" ><span class="token punctuation" >&lt;/</span>button</span><span class="token punctuation" >></span></span>
-  <span class="token tag" ><span class="token tag" ><span class="token punctuation" >&lt;</span>button</span> <span class="token attr-name" >type</span><span class="token attr-value" ><span class="token punctuation" >=</span><span class="token punctuation" >"</span>button<span class="token punctuation" >"</span></span> <span class="token attr-name" >class</span><span class="token attr-value" ><span class="token punctuation" >=</span><span class="token punctuation" >"</span>gn-button<span class="token punctuation" >"</span></span><span class="token punctuation" >></span></span>
-    <span class="token tag" ><span class="token tag" ><span class="token punctuation" >&lt;</span>span</span> <span class="token attr-name" >class</span><span class="token attr-value" ><span class="token punctuation" >=</span><span class="token punctuation" >"</span>gn-icon<span class="token punctuation" >"</span></span><span class="token punctuation" >></span></span>
-      <span class="token tag" ><span class="token tag" ><span class="token punctuation" >&lt;</span>i</span> <span class="token attr-name" >class</span><span class="token attr-value" ><span class="token punctuation" >=</span><span class="token punctuation" >"</span>fas fa-align-right<span class="token punctuation" >"</span></span><span class="token punctuation" >></span></span><span class="token tag" ><span class="token tag" ><span class="token punctuation" >&lt;/</span>i</span><span class="token punctuation" >></span></span>
-    <span class="token tag" ><span class="token tag" ><span class="token punctuation" >&lt;/</span>span</span><span class="token punctuation" >></span></span>
-    Right
-  <span class="token tag" ><span class="token tag" ><span class="token punctuation" >&lt;/</span>button</span><span class="token punctuation" >></span></span>
-<span class="token tag" ><span class="token tag" ><span class="token punctuation" >&lt;/</span>div</span><span class="token punctuation" >></span></span>
-</code></pre>
-  </div>
-</div>
-          <footer class="aigis-footer">Last update at 2024/04/15 13:52</footer>
-        </div>
-      </div>
-    </div>
-    <script src="../../../../assets/guide.js"></script>
-  </body>
-</html>