gnui 1.2.0 → 1.2.12

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
  1. package/@types/gnui.d.ts +9 -2
  2. package/README.md +0 -0
  3. package/assets/NotoSansKR-Black.otf +0 -0
  4. package/assets/NotoSansKR-Black.woff +0 -0
  5. package/assets/NotoSansKR-Black.woff2 +0 -0
  6. package/assets/NotoSansKR-Bold.otf +0 -0
  7. package/assets/NotoSansKR-Bold.woff +0 -0
  8. package/assets/NotoSansKR-Bold.woff2 +0 -0
  9. package/assets/NotoSansKR-DemiLight.otf +0 -0
  10. package/assets/NotoSansKR-DemiLight.woff +0 -0
  11. package/assets/NotoSansKR-DemiLight.woff2 +0 -0
  12. package/assets/NotoSansKR-Light.otf +0 -0
  13. package/assets/NotoSansKR-Light.woff +0 -0
  14. package/assets/NotoSansKR-Light.woff2 +0 -0
  15. package/assets/NotoSansKR-Medium.otf +0 -0
  16. package/assets/NotoSansKR-Medium.woff +0 -0
  17. package/assets/NotoSansKR-Medium.woff2 +0 -0
  18. package/assets/NotoSansKR-Regular.otf +0 -0
  19. package/assets/NotoSansKR-Regular.woff +0 -0
  20. package/assets/NotoSansKR-Regular.woff2 +0 -0
  21. package/assets/NotoSansKR-Thin.otf +0 -0
  22. package/assets/NotoSansKR-Thin.woff +0 -0
  23. package/assets/NotoSansKR-Thin.woff2 +0 -0
  24. package/assets/OFL.txt +0 -0
  25. package/assets/images/flags.png +0 -0
  26. package/package.json +20 -13
  27. package/dist/js/gnui.esm.js +0 -24295
  28. package/dist/js/gnui.js +0 -24303
  29. package/dist/js/gnui.min.js +0 -23
  30. package/dist/styles/default.css +0 -1
  31. package/dist/styles/gpi.css +0 -1
  32. package/dist/styles/green24.css +0 -1
  33. package/dist/styles/insights.css +0 -1
  34. package/dist/styles/nac.css +0 -1
  35. package/dist/styles/ztnac.css +0 -1
  36. package/styleguide/assets/components.js +0 -1732
  37. package/styleguide/assets/guide.js +0 -47
  38. package/styleguide/assets/image.png +0 -0
  39. package/styleguide/assets/okadia.css +0 -122
  40. package/styleguide/assets/theme.css +0 -564
  41. package/styleguide/category/COLOR/index.html +0 -156
  42. package/styleguide/category/COMPONENT/Alert(js)/index.html +0 -418
  43. package/styleguide/category/COMPONENT/Bignumber/index.html +0 -269
  44. package/styleguide/category/COMPONENT/Breadcrumb/index.html +0 -324
  45. package/styleguide/category/COMPONENT/Calendar(js)/index.html +0 -236
  46. package/styleguide/category/COMPONENT/Card/index.html +0 -184
  47. package/styleguide/category/COMPONENT/Chart(js)/index.html +0 -555
  48. package/styleguide/category/COMPONENT/Datagrid(js)/index.html +0 -693
  49. package/styleguide/category/COMPONENT/Datalist(js)/index.html +0 -471
  50. package/styleguide/category/COMPONENT/Growl(js)/index.html +0 -285
  51. package/styleguide/category/COMPONENT/JsonView(js)/index.html +0 -1127
  52. package/styleguide/category/COMPONENT/MenuButton(js)/index.html +0 -281
  53. package/styleguide/category/COMPONENT/Message(js)/index.html +0 -515
  54. package/styleguide/category/COMPONENT/Modal(js)/index.html +0 -444
  55. package/styleguide/category/COMPONENT/Pagination/index.html +0 -348
  56. package/styleguide/category/COMPONENT/Panel/index.html +0 -305
  57. package/styleguide/category/COMPONENT/Progressbar(js)/index.html +0 -313
  58. package/styleguide/category/COMPONENT/Tab(js)/index.html +0 -473
  59. package/styleguide/category/COMPONENT/Tagcloud(js)/index.html +0 -260
  60. package/styleguide/category/COMPONENT/Tooltip(js)/index.html +0 -400
  61. package/styleguide/category/COMPONENT/Tree(js)/index.html +0 -404
  62. package/styleguide/category/CONTROLS/Button(js)/index.html +0 -455
  63. package/styleguide/category/CONTROLS/Checkbox/index.html +0 -194
  64. package/styleguide/category/CONTROLS/Colorpicker(js)/index.html +0 -263
  65. package/styleguide/category/CONTROLS/Datepicker(js)/index.html +0 -292
  66. package/styleguide/category/CONTROLS/Dropdown(js)/index.html +0 -1062
  67. package/styleguide/category/CONTROLS/File/index.html +0 -312
  68. package/styleguide/category/CONTROLS/Form/Control/index.html +0 -227
  69. package/styleguide/category/CONTROLS/Form/Field/index.html +0 -254
  70. package/styleguide/category/CONTROLS/Form/Plain/index.html +0 -193
  71. package/styleguide/category/CONTROLS/Input/index.html +0 -330
  72. package/styleguide/category/CONTROLS/MultiText(js)/index.html +0 -273
  73. package/styleguide/category/CONTROLS/Picklist(js)/index.html +0 -723
  74. package/styleguide/category/CONTROLS/Radio/index.html +0 -197
  75. package/styleguide/category/CONTROLS/Select/index.html +0 -438
  76. package/styleguide/category/CONTROLS/SelectButton(js)/index.html +0 -291
  77. package/styleguide/category/CONTROLS/Slider/index.html +0 -189
  78. package/styleguide/category/CONTROLS/Switch(js)/index.html +0 -345
  79. package/styleguide/category/CONTROLS/SyntaxInput(js)/index.html +0 -480
  80. package/styleguide/category/CONTROLS/Textarea/index.html +0 -185
  81. package/styleguide/category/CONTROLS/Time(js)/index.html +0 -263
  82. package/styleguide/category/ELEMENTS/Box/index.html +0 -163
  83. package/styleguide/category/ELEMENTS/Icon/index.html +0 -305
  84. package/styleguide/category/ELEMENTS/Image/index.html +0 -209
  85. package/styleguide/category/ELEMENTS/List/index.html +0 -392
  86. package/styleguide/category/ELEMENTS/Table/index.html +0 -479
  87. package/styleguide/category/ELEMENTS/Tag/index.html +0 -251
  88. package/styleguide/category/ELEMENTS/Title/index.html +0 -182
  89. package/styleguide/category/LAYOUT/Container/index.html +0 -231
  90. package/styleguide/category/LAYOUT/Grid/index.html +0 -396
  91. package/styleguide/category/LAYOUT/Splitter(js)/index.html +0 -275
  92. package/styleguide/category/UTILITY/index.html +0 -365
  93. package/styleguide/category/Utils/index.html +0 -331
  94. package/styleguide/color.html +0 -169
  95. package/styleguide/index.html +0 -169
  96. package/styleguide/tag/javascript/index.html +0 -7197
  97. package/styleguide/tag/v.0.1.0/index.html +0 -11969
package/styleguide/category/CONTROLS/Input/index.html DELETED
@@ -1,330 +0,0 @@
1
- <!DOCTYPE html>
2
- <html>
3
- <head>
4
- <meta charset="utf-8" />
5
- <meta name="viewport" content="width=device-width" />
6
- <link href="../../../../dist/styles/default.css" rel="stylesheet" id="ThemeFile" />
7
- <link href="../../../assets/okadia.css" rel="stylesheet" />
8
- <link href="../../../assets/theme.css" rel="stylesheet" />
9
- <link
10
- rel="stylesheet"
11
- href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.1/css/all.min.css"
12
- integrity="sha512-+4zCK9k+qNFUR5X+cKL9EIR+ZOhtIloNl9GIKS57V1MyNsYpYcUrUeQc9vNfzsWfV28IaLL3i96P9sdNyeRssA=="
13
- crossorigin="anonymous"
14
- />
15
- <link href="https://fonts.googleapis.com/css?family=Squada+One&display=swap" rel="stylesheet" />
16
- <script src="../../../assets/components.js"></script>
17
- <script src="../../../../dist/js/gnui.js"></script>
18
- </head>
19
- <body>
20
- <div class="aigis-container">
21
- <header class="aigis-header gn-gcolor is-primary">
22
- <span><a href="../../../index.html" class="main-link" style="font-family: 'Squada One', cursive">GNUI</a></span>
23
- <span class="has-text-invert" style="font-size: 1em; padding-left: 10px">Start your next web project with GNUI.</span>
24
- <div class="gn-select is-medium">
25
- <select id="ThemeSelector">
26
-
27
- <option value="default">default</option>
28
-
29
- <option value="nac">nac</option>
30
-
31
- <option value="insights">insights</option>
32
-
33
- <option value="gpi">gpi</option>
34
-
35
- <option value="ztnac">ztnac</option>
36
-
37
- <option value="green24">green24</option>
38
-
39
- </select>
40
- </div>
41
- <div>
42
- <a class="gn-button is-primary util-link" href="../../../category/Utils/index.html">
43
- <span class="gn-icon is-small">
44
- <i class="fas fa-tools"></i>
45
- </span>
46
- Gn.util
47
- </a>
48
- </div>
49
- </header>
50
- <div class="aigis-sidemenu">
51
- <nav class="gn-tree is-borderless is-large left-menu"></nav>
52
- </div>
53
-
54
- <script>
55
- window.Gn = window.gnui;
56
-
57
- Gn.ready(function () {
58
- 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(','));
59
- var jsComps = ''.split(',');
60
- delete leftMenu.Utils;
61
- Gn.util.append('.left-menu', renderTree(leftMenu));
62
- Gn.util.scrollIntoView(Gn.util.$('.tree-item.is-active'), 300);
63
-
64
- function renderTree(menus) {
65
- var $depths = Gn.util.$('<ul></ul>');
66
- Gn.util.each(menus, function (child, menu) {
67
- if (Gn.util.isString(child)) {
68
- Gn.util.append($depths, renderMenu(menu, '../../../category/' + child + '/index.html', location.href.indexOf(child + '/') > -1));
69
- } else {
70
- var $_depth = renderMenu(menu, '');
71
- Gn.util.append($_depth, renderTree(child));
72
- Gn.util.append($depths, $_depth);
73
- }
74
- });
75
- return $depths;
76
- }
77
-
78
- function renderMenu(name, link, isActive) {
79
- var $_menu;
80
- if (link === '') {
81
- $_menu = Gn.util.$('<li>' + name + '</li>');
82
- } else {
83
- var menuClass = isActive ? ' is-active' : '';
84
- $_menu = Gn.util.$('<li><a href="' + link + '"><div class="tree-item' + menuClass + '">' + name.split('(js)').join('') + '</a></div></li>');
85
- }
86
- if (name.indexOf('(js)') > 0) {
87
- Gn.util.append(Gn.util.find('.tree-item', $_menu), Gn.util.$('<span class="gn-tag is-small is-info-light">JS</span>'));
88
- }
89
- return $_menu;
90
- }
91
-
92
- function setTree(categorys) {
93
- var menus = {};
94
-
95
- categorys.forEach(function (category) {
96
- parseTree(menus, category.split('/'), category);
97
- });
98
- return menus;
99
- }
100
-
101
- function parseTree(parents, child, catgry) {
102
- var _depth = child.shift();
103
- if (parents[_depth] === undefined) {
104
- parents[_depth] = {};
105
- }
106
- if (child.length === 1) {
107
- parents[_depth][child] = catgry;
108
- } else if (child.length > 1) {
109
- parseTree(parents[_depth], child, catgry);
110
- } else {
111
- parents[_depth] = catgry;
112
- }
113
- }
114
- });
115
- </script>
116
-
117
- <div class="aigis-contents">
118
- <div class="aigis-contents__body">
119
-
120
- <div>
121
-
122
- <div class="aigis-module Input">
123
- <h2 class="aigis-module__heading" id="Input">Input</h2>
124
- <div class="aigis-module__filepath">/scss/controls/input.scss</div>
125
- <div class="aigis-tags">
126
-
127
- <span class="gn-tag">v.0.1.0</span>
128
-
129
- </div>
130
- <h3 id="-">기본 사용</h3>
131
- <ul>
132
- <li>사용 태그 : <code>input[text]</code>, <code>input[password]</code>, <code>input[search]</code>, <code>input[email]</code>, <code>input[tel]</code></li>
133
- </ul>
134
- <div class="aigis-preview">
135
- <input type="text" class="gn-input" placeholder="text input">
136
- <input type="password" class="gn-input" placeholder="password input">
137
- <input type="search" class="gn-input" placeholder="search input">
138
- <input type="tel" class="gn-input" placeholder="tel input"></div>
139
-
140
- <pre><code class="language-html"> <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>text input<span class="token punctuation" >"</span></span><span class="token punctuation" >></span></span>
141
- <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>password<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>password input<span class="token punctuation" >"</span></span><span class="token punctuation" >></span></span>
142
- <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>search<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>search input<span class="token punctuation" >"</span></span><span class="token punctuation" >></span></span>
143
- <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>tel<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>tel input<span class="token punctuation" >"</span></span><span class="token punctuation" >></span></span>
144
- </code></pre>
145
- <h3 id="-">색상</h3>
146
- <div class="aigis-preview">
147
- <input type="text" class="gn-input" placeholder="primary text : border 1px">
148
- <input type="text" class="gn-input is-border-width2" placeholder="primary text : border 2px">
149
- <input type="text" class="gn-input is-border-width3" placeholder="primary text : border 3px"></div>
150
-
151
- <pre><code class="language-html"><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>primary text : border 1px<span class="token punctuation" >"</span></span><span class="token punctuation" >></span></span>
152
- <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 is-border-width2<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>primary text : border 2px<span class="token punctuation" >"</span></span><span class="token punctuation" >></span></span>
153
- <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 is-border-width3<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>primary text : border 3px<span class="token punctuation" >"</span></span><span class="token punctuation" >></span></span>
154
- </code></pre>
155
- <h3 id="-">확장</h3>
156
- <ul>
157
- <li>레이블을 추가할 경우, <strong>레이블을 먼저 선언</strong>해준다.</li>
158
- </ul>
159
- <div class="aigis-preview">
160
- <div class="gn-control has-arrange">
161
- <div class="gn-plain">
162
- <span class="gn-icon">
163
- <i class="fas fa-weight-hanging"></i>
164
- </span>
165
- </div>
166
- <input type="text" class="gn-input" placeholder="input weight">
167
- <div class="gn-plain"> Kg </div>
168
- </div>
169
- <div class="gn-control has-arrange is-medium">
170
- <div class="gn-select">
171
- <select>
172
- <option>&#65510;</option>
173
- <option>&dollar;</option>
174
- <option>&pound;</option>
175
- <option>&euro;</option>
176
- </select>
177
- </div>
178
- <input type="text" class="gn-input" placeholder="cost">
179
- <a class="gn-plain" role="button">
180
- <span class="gn-icon is-small">
181
- <i class="fas fa-calculator"></i>
182
- </span>
183
- </a>
184
- </div>
185
- <div class="gn-control has-arrange is-medium">
186
- <input type="text" class="gn-input is-medium is-full" placeholder="keyword">
187
- <a class="gn-plain2 is-primary" role="button">
188
- <span class="gn-icon">
189
- <i class="fas fa-search"></i>
190
- </span>
191
- </a>
192
- </div>
193
- <div class="gn-control has-arrange is-medium">
194
- <input type="text" class="gn-input is-medium is-full is-border-width3" placeholder="keyword">
195
- <a class="gn-plain2 is-primary" role="button">
196
- <span class="gn-icon">
197
- <i class="fas fa-search"></i>
198
- </span>
199
- </a>
200
- </div></div>
201
-
202
- <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-arrange<span class="token punctuation" >"</span></span><span class="token punctuation" >></span></span>
203
- <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-plain<span class="token punctuation" >"</span></span><span class="token punctuation" >></span></span>
204
- <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>
205
- <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-weight-hanging<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>
206
- <span class="token tag" ><span class="token tag" ><span class="token punctuation" >&lt;/</span>span</span><span class="token punctuation" >></span></span>
207
- <span class="token tag" ><span class="token tag" ><span class="token punctuation" >&lt;/</span>div</span><span class="token punctuation" >></span></span>
208
- <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 weight<span class="token punctuation" >"</span></span><span class="token punctuation" >></span></span>
209
- <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-plain<span class="token punctuation" >"</span></span><span class="token punctuation" >></span></span>
210
- Kg
211
- <span class="token tag" ><span class="token tag" ><span class="token punctuation" >&lt;/</span>div</span><span class="token punctuation" >></span></span>
212
- <span class="token tag" ><span class="token tag" ><span class="token punctuation" >&lt;/</span>div</span><span class="token punctuation" >></span></span>
213
- <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 is-medium<span class="token punctuation" >"</span></span><span class="token punctuation" >></span></span>
214
- <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-select<span class="token punctuation" >"</span></span><span class="token punctuation" >></span></span>
215
- <span class="token tag" ><span class="token tag" ><span class="token punctuation" >&lt;</span>select</span><span class="token punctuation" >></span></span>
216
- <span class="token tag" ><span class="token tag" ><span class="token punctuation" >&lt;</span>option</span><span class="token punctuation" >></span></span><span class="token entity" title="&#65510;">&amp;#65510;</span><span class="token tag" ><span class="token tag" ><span class="token punctuation" >&lt;/</span>option</span><span class="token punctuation" >></span></span>
217
- <span class="token tag" ><span class="token tag" ><span class="token punctuation" >&lt;</span>option</span><span class="token punctuation" >></span></span><span class="token entity" title="&dollar;">&amp;dollar;</span><span class="token tag" ><span class="token tag" ><span class="token punctuation" >&lt;/</span>option</span><span class="token punctuation" >></span></span>
218
- <span class="token tag" ><span class="token tag" ><span class="token punctuation" >&lt;</span>option</span><span class="token punctuation" >></span></span><span class="token entity" title="&pound;">&amp;pound;</span><span class="token tag" ><span class="token tag" ><span class="token punctuation" >&lt;/</span>option</span><span class="token punctuation" >></span></span>
219
- <span class="token tag" ><span class="token tag" ><span class="token punctuation" >&lt;</span>option</span><span class="token punctuation" >></span></span><span class="token entity" title="&euro;">&amp;euro;</span><span class="token tag" ><span class="token tag" ><span class="token punctuation" >&lt;/</span>option</span><span class="token punctuation" >></span></span>
220
- <span class="token tag" ><span class="token tag" ><span class="token punctuation" >&lt;/</span>select</span><span class="token punctuation" >></span></span>
221
- <span class="token tag" ><span class="token tag" ><span class="token punctuation" >&lt;/</span>div</span><span class="token punctuation" >></span></span>
222
- <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>cost<span class="token punctuation" >"</span></span><span class="token punctuation" >></span></span>
223
- <span class="token tag" ><span class="token tag" ><span class="token punctuation" >&lt;</span>a</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 attr-name" >role</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 punctuation" >></span></span>
224
- <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>
225
- <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-calculator<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>
226
- <span class="token tag" ><span class="token tag" ><span class="token punctuation" >&lt;/</span>span</span><span class="token punctuation" >></span></span>
227
- <span class="token tag" ><span class="token tag" ><span class="token punctuation" >&lt;/</span>a</span><span class="token punctuation" >></span></span>
228
- <span class="token tag" ><span class="token tag" ><span class="token punctuation" >&lt;/</span>div</span><span class="token punctuation" >></span></span>
229
- <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 is-medium<span class="token punctuation" >"</span></span><span class="token punctuation" >></span></span>
230
- <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 is-medium is-full<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>keyword<span class="token punctuation" >"</span></span><span class="token punctuation" >></span></span>
231
- <span class="token tag" ><span class="token tag" ><span class="token punctuation" >&lt;</span>a</span> <span class="token attr-name" >class</span><span class="token attr-value" ><span class="token punctuation" >=</span><span class="token punctuation" >"</span>gn-plain2 is-primary<span class="token punctuation" >"</span></span> <span class="token attr-name" >role</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 punctuation" >></span></span>
232
- <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>
233
- <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>
234
- <span class="token tag" ><span class="token tag" ><span class="token punctuation" >&lt;/</span>span</span><span class="token punctuation" >></span></span>
235
- <span class="token tag" ><span class="token tag" ><span class="token punctuation" >&lt;/</span>a</span><span class="token punctuation" >></span></span>
236
- <span class="token tag" ><span class="token tag" ><span class="token punctuation" >&lt;/</span>div</span><span class="token punctuation" >></span></span>
237
- <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 is-medium<span class="token punctuation" >"</span></span><span class="token punctuation" >></span></span>
238
- <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 is-medium is-full is-border-width3<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>keyword<span class="token punctuation" >"</span></span><span class="token punctuation" >></span></span>
239
- <span class="token tag" ><span class="token tag" ><span class="token punctuation" >&lt;</span>a</span> <span class="token attr-name" >class</span><span class="token attr-value" ><span class="token punctuation" >=</span><span class="token punctuation" >"</span>gn-plain2 is-primary<span class="token punctuation" >"</span></span> <span class="token attr-name" >role</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 punctuation" >></span></span>
240
- <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>
241
- <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>
242
- <span class="token tag" ><span class="token tag" ><span class="token punctuation" >&lt;/</span>span</span><span class="token punctuation" >></span></span>
243
- <span class="token tag" ><span class="token tag" ><span class="token punctuation" >&lt;/</span>a</span><span class="token punctuation" >></span></span>
244
- <span class="token tag" ><span class="token tag" ><span class="token punctuation" >&lt;/</span>div</span><span class="token punctuation" >></span></span>
245
- </code></pre>
246
- <ul>
247
- <li>아이콘이 포함된 경우, <strong>아이콘을 먼저 선언</strong>해준다.</li>
248
- </ul>
249
- <div class="aigis-preview">
250
- <div class="gn-control has-icon-left has-icon-right">
251
- <span class="gn-icon is-left">
252
- <i class="fas fa-wifi"></i>
253
- </span>
254
- <span class="gn-icon is-right">
255
- <i class="fas fa-search"></i>
256
- </span>
257
- <input type="text" class="gn-input" placeholder="input text">
258
- </div>
259
- <div class="gn-control has-icon-right">
260
- <span class="gn-icon is-right">
261
- <i class="fas fa-calendar"></i>
262
- </span>
263
- <input type="text" class="gn-input" placeholder="pick a date">
264
- </div></div>
265
-
266
- <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>
267
- <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>
268
- <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>
269
- <span class="token tag" ><span class="token tag" ><span class="token punctuation" >&lt;/</span>span</span><span class="token punctuation" >></span></span>
270
- <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>
271
- <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>
272
- <span class="token tag" ><span class="token tag" ><span class="token punctuation" >&lt;/</span>span</span><span class="token punctuation" >></span></span>
273
- <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>
274
- <span class="token tag" ><span class="token tag" ><span class="token punctuation" >&lt;/</span>div</span><span class="token punctuation" >></span></span>
275
- <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>
276
- <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>
277
- <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-calendar<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>
278
- <span class="token tag" ><span class="token tag" ><span class="token punctuation" >&lt;/</span>span</span><span class="token punctuation" >></span></span>
279
- <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>pick a date<span class="token punctuation" >"</span></span><span class="token punctuation" >></span></span>
280
- <span class="token tag" ><span class="token tag" ><span class="token punctuation" >&lt;/</span>div</span><span class="token punctuation" >></span></span>
281
- </code></pre>
282
- <h3 id="-">크기</h3>
283
- <div class="aigis-preview">
284
- <input type="text" class="gn-input is-normal" placeholder="normal text">
285
- <input type="text" class="gn-input is-medium" placeholder="medium text">
286
- <input type="text" class="gn-input is-large" placeholder="large text">
287
- <input type="text" class="gn-input is-full" placeholder="full text"></div>
288
-
289
- <pre><code class="language-html"> <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 is-normal<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>normal text<span class="token punctuation" >"</span></span><span class="token punctuation" >></span></span>
290
- <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 is-medium<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>medium text<span class="token punctuation" >"</span></span><span class="token punctuation" >></span></span>
291
- <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 is-large<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>large text<span class="token punctuation" >"</span></span><span class="token punctuation" >></span></span>
292
- <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 is-full<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>full text<span class="token punctuation" >"</span></span><span class="token punctuation" >></span></span>
293
- </code></pre>
294
- <h3 id="-">상태</h3>
295
- <div class="aigis-preview">
296
- <p><input type="text" class="gn-input" readonly placeholder="readonly text"></p>
297
- <p><input type="text" class="gn-input" disabled placeholder="disabled text"></p>
298
- <p><input type="text" class="gn-input is-focus" placeholder="focus text"></p>
299
- <p><input type="text" class="gn-input is-hover" placeholder="hover text"></p>
300
- <p><input type="text" class="gn-input is-invalid" placeholder="invalid text"></p>
301
- <p>
302
- <div class="gn-control is-full is-large is-loading">
303
- <input type="text" class="gn-input is-full is-large" placeholder="loading text">
304
- </div>
305
- </p></div>
306
-
307
- <pre><code class="language-html"> <span class="token tag" ><span class="token tag" ><span class="token punctuation" >&lt;</span>p</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" >readonly</span> <span class="token attr-name" >placeholder</span><span class="token attr-value" ><span class="token punctuation" >=</span><span class="token punctuation" >"</span>readonly 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>p</span><span class="token punctuation" >></span></span>
308
- <span class="token tag" ><span class="token tag" ><span class="token punctuation" >&lt;</span>p</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" >disabled</span> <span class="token attr-name" >placeholder</span><span class="token attr-value" ><span class="token punctuation" >=</span><span class="token punctuation" >"</span>disabled 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>p</span><span class="token punctuation" >></span></span>
309
- <span class="token tag" ><span class="token tag" ><span class="token punctuation" >&lt;</span>p</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 is-focus<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>focus 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>p</span><span class="token punctuation" >></span></span>
310
- <span class="token tag" ><span class="token tag" ><span class="token punctuation" >&lt;</span>p</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 is-hover<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>hover 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>p</span><span class="token punctuation" >></span></span>
311
- <span class="token tag" ><span class="token tag" ><span class="token punctuation" >&lt;</span>p</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 is-invalid<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>invalid 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>p</span><span class="token punctuation" >></span></span>
312
- <span class="token tag" ><span class="token tag" ><span class="token punctuation" >&lt;</span>p</span><span class="token punctuation" >></span></span>
313
- <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-full is-large is-loading<span class="token punctuation" >"</span></span><span class="token punctuation" >></span></span>
314
- <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 is-full is-large<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>loading text<span class="token punctuation" >"</span></span><span class="token punctuation" >></span></span>
315
- <span class="token tag" ><span class="token tag" ><span class="token punctuation" >&lt;/</span>div</span><span class="token punctuation" >></span></span>
316
- <span class="token tag" ><span class="token tag" ><span class="token punctuation" >&lt;/</span>p</span><span class="token punctuation" >></span></span>
317
- </code></pre>
318
-
319
- </div>
320
-
321
- </div>
322
-
323
-
324
- <footer class="aigis-footer">Last update at 2024/04/15 13:52</footer>
325
- </div>
326
- </div>
327
- </div>
328
- <script src="../../../assets/guide.js"></script>
329
- </body>
330
- </html>