gnui 1.1.8 → 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.
- package/@types/gnui.d.ts +202 -154
- package/README.md +9 -3
- 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/{LICENSE_OFL.txt → OFL.txt} +93 -92
- package/assets/images/flags.png +0 -0
- package/package.json +53 -37
- package/assets/NotoSansCJKkr-Black.otf +0 -0
- package/assets/NotoSansCJKkr-Bold.otf +0 -0
- package/assets/NotoSansCJKkr-DemiLight.otf +0 -0
- package/assets/NotoSansCJKkr-Light.otf +0 -0
- package/assets/NotoSansCJKkr-Medium.otf +0 -0
- package/assets/NotoSansCJKkr-Regular.otf +0 -0
- package/assets/NotoSansCJKkr-Thin.otf +0 -0
- package/assets/NotoSansMonoCJKkr-Bold.otf +0 -0
- package/assets/NotoSansMonoCJKkr-Regular.otf +0 -0
- package/assets/README +0 -11
- package/dist/js/gnui.esm.js +0 -22174
- package/dist/js/gnui.js +0 -22473
- package/dist/js/gnui.min.js +0 -1
- package/dist/styles/default.css +0 -3
- package/dist/styles/gpi.css +0 -3
- package/dist/styles/insights.css +0 -3
- package/dist/styles/nac.css +0 -3
- package/dist/styles/zt-nac.css +0 -3
- package/styleguide/assets/components.js +0 -1280
- package/styleguide/assets/guide.js +0 -45
- package/styleguide/assets/image.png +0 -0
- package/styleguide/assets/okadia.css +0 -124
- package/styleguide/assets/theme.css +0 -506
- package/styleguide/category/COLOR/index.html +0 -158
- package/styleguide/category/COMPONENT/Alert(js)/index.html +0 -421
- package/styleguide/category/COMPONENT/Bignumber/index.html +0 -273
- package/styleguide/category/COMPONENT/Breadcrumb/index.html +0 -328
- package/styleguide/category/COMPONENT/Calendar(js)/index.html +0 -239
- package/styleguide/category/COMPONENT/Card/index.html +0 -188
- package/styleguide/category/COMPONENT/Chart(js)/index.html +0 -558
- package/styleguide/category/COMPONENT/Datagrid(js)/index.html +0 -545
- package/styleguide/category/COMPONENT/Growl(js)/index.html +0 -288
- package/styleguide/category/COMPONENT/JsonView(js)/index.html +0 -829
- package/styleguide/category/COMPONENT/Message(js)/index.html +0 -391
- package/styleguide/category/COMPONENT/Modal(js)/index.html +0 -410
- package/styleguide/category/COMPONENT/Pagination/index.html +0 -352
- package/styleguide/category/COMPONENT/Panel/index.html +0 -309
- package/styleguide/category/COMPONENT/Progressbar(js)/index.html +0 -316
- package/styleguide/category/COMPONENT/Tab(js)/index.html +0 -444
- package/styleguide/category/COMPONENT/Tagcloud(js)/index.html +0 -261
- package/styleguide/category/COMPONENT/Time(js)/index.html +0 -244
- package/styleguide/category/COMPONENT/Tooltip(js)/index.html +0 -317
- package/styleguide/category/COMPONENT/Tree(js)/index.html +0 -401
- package/styleguide/category/CONTROLS/Button(js)/index.html +0 -440
- package/styleguide/category/CONTROLS/Checkbox/index.html +0 -198
- package/styleguide/category/CONTROLS/Colorpicker(js)/index.html +0 -209
- package/styleguide/category/CONTROLS/Datepicker(js)/index.html +0 -260
- package/styleguide/category/CONTROLS/Dropdown(js)/index.html +0 -1033
- package/styleguide/category/CONTROLS/File/index.html +0 -316
- package/styleguide/category/CONTROLS/Form/Control/index.html +0 -231
- package/styleguide/category/CONTROLS/Form/Field/index.html +0 -258
- package/styleguide/category/CONTROLS/Form/Plain/index.html +0 -197
- package/styleguide/category/CONTROLS/Input/index.html +0 -334
- package/styleguide/category/CONTROLS/MenuButton(js)/index.html +0 -257
- package/styleguide/category/CONTROLS/MultiText(js)/index.html +0 -260
- package/styleguide/category/CONTROLS/Picklist(js)/index.html +0 -699
- package/styleguide/category/CONTROLS/Radio/index.html +0 -201
- package/styleguide/category/CONTROLS/Select/index.html +0 -442
- package/styleguide/category/CONTROLS/SelectButton(js)/index.html +0 -236
- package/styleguide/category/CONTROLS/Slider/index.html +0 -193
- package/styleguide/category/CONTROLS/Switch(js)/index.html +0 -333
- package/styleguide/category/CONTROLS/SyntaxInput(js)/index.html +0 -483
- package/styleguide/category/CONTROLS/Textarea/index.html +0 -189
- package/styleguide/category/ELEMENTS/Box/index.html +0 -167
- package/styleguide/category/ELEMENTS/Icon/index.html +0 -265
- package/styleguide/category/ELEMENTS/Image/index.html +0 -213
- package/styleguide/category/ELEMENTS/List/index.html +0 -396
- package/styleguide/category/ELEMENTS/Table/index.html +0 -483
- package/styleguide/category/ELEMENTS/Tag/index.html +0 -255
- package/styleguide/category/ELEMENTS/Title/index.html +0 -186
- package/styleguide/category/LAYOUT/Container/index.html +0 -235
- package/styleguide/category/LAYOUT/Grid/index.html +0 -400
- package/styleguide/category/LAYOUT/Splitter(js)/index.html +0 -278
- package/styleguide/category/UTILITY/index.html +0 -367
- package/styleguide/category/Utils/index.html +0 -305
- package/styleguide/color.html +0 -168
- package/styleguide/index.html +0 -168
- package/styleguide/tag/javascript/index.html +0 -6224
- package/styleguide/tag/v.0.1.0/index.html +0 -10807
|
@@ -1,391 +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 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" />
|
|
10
|
-
<link href="https://fonts.googleapis.com/css?family=Squada+One&display=swap" rel="stylesheet">
|
|
11
|
-
<script src="../../../assets/components.js"></script>
|
|
12
|
-
<script src="../../../../dist/js/gnui.js"></script>
|
|
13
|
-
</head>
|
|
14
|
-
<body>
|
|
15
|
-
<div class="aigis-container">
|
|
16
|
-
<header class="aigis-header gn-gcolor is-primary">
|
|
17
|
-
<span><a href="../../../index.html" class="main-link" style="font-family: 'Squada One', cursive;">GNUI</a></span>
|
|
18
|
-
<span class="has-text-invert" style="font-size: 1.0em;padding-left: 10px;">Start your next web project with GNUI.</span>
|
|
19
|
-
<div class="gn-select is-medium">
|
|
20
|
-
<select id="ThemeSelector">
|
|
21
|
-
|
|
22
|
-
<option value="default">default</option>
|
|
23
|
-
|
|
24
|
-
<option value="nac">nac</option>
|
|
25
|
-
|
|
26
|
-
<option value="insights">insights</option>
|
|
27
|
-
|
|
28
|
-
<option value="gpi">gpi</option>
|
|
29
|
-
|
|
30
|
-
<option value="zt-nac">zt-nac</option>
|
|
31
|
-
|
|
32
|
-
</select>
|
|
33
|
-
</div>
|
|
34
|
-
<div>
|
|
35
|
-
<a class="gn-button is-primary util-link" href="../../../category/Utils/index.html">
|
|
36
|
-
<span class="gn-icon is-small">
|
|
37
|
-
<i class="fas fa-tools"></i>
|
|
38
|
-
</span>
|
|
39
|
-
Gn.util
|
|
40
|
-
</a>
|
|
41
|
-
</div>
|
|
42
|
-
</header>
|
|
43
|
-
<div class="aigis-sidemenu">
|
|
44
|
-
<nav class="gn-tree is-borderless is-large left-menu">
|
|
45
|
-
</nav>
|
|
46
|
-
</div>
|
|
47
|
-
|
|
48
|
-
<script>
|
|
49
|
-
window.Gn = window.gnui;
|
|
50
|
-
|
|
51
|
-
Gn.ready(function(){
|
|
52
|
-
var leftMenu = setTree('COLOR,COMPONENT/Alert(js),COMPONENT/Bignumber,COMPONENT/Breadcrumb,COMPONENT/Calendar(js),COMPONENT/Card,COMPONENT/Chart(js),COMPONENT/Datagrid(js),COMPONENT/Growl(js),COMPONENT/JsonView(js),COMPONENT/Message(js),COMPONENT/Modal(js),COMPONENT/Pagination,COMPONENT/Panel,COMPONENT/Progressbar(js),COMPONENT/Tab(js),COMPONENT/Tagcloud(js),COMPONENT/Time(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/MenuButton(js),CONTROLS/MultiText(js),CONTROLS/Picklist(js),CONTROLS/Radio,CONTROLS/Select,CONTROLS/SelectButton(js),CONTROLS/Slider,CONTROLS/Switch(js),CONTROLS/SyntaxInput(js),CONTROLS/Textarea,ELEMENTS/Box,ELEMENTS/Icon,ELEMENTS/Image,ELEMENTS/List,ELEMENTS/Table,ELEMENTS/Tag,ELEMENTS/Title,LAYOUT/Container,LAYOUT/Grid,LAYOUT/Splitter(js),UTILITY,Utils'.split(','));
|
|
53
|
-
var jsComps = ''.split(',');
|
|
54
|
-
delete leftMenu.Utils;
|
|
55
|
-
Gn.util.append('.left-menu', renderTree(leftMenu));
|
|
56
|
-
Gn.util.scrollIntoView(Gn.util.$('.tree-item.is-active'), 300);
|
|
57
|
-
|
|
58
|
-
function renderTree(menus){
|
|
59
|
-
var $depths = Gn.util.$('<ul></ul>');
|
|
60
|
-
Gn.util.each(menus, function (child, menu){
|
|
61
|
-
if(Gn.util.isString(child)){
|
|
62
|
-
Gn.util.append($depths, renderMenu(menu, '../../../category/'+child+'/index.html', location.href.indexOf(child+'/') > -1));
|
|
63
|
-
} else {
|
|
64
|
-
var $_depth = renderMenu(menu, '');
|
|
65
|
-
Gn.util.append($_depth, renderTree(child));
|
|
66
|
-
Gn.util.append($depths, $_depth);
|
|
67
|
-
}
|
|
68
|
-
});
|
|
69
|
-
return $depths;
|
|
70
|
-
}
|
|
71
|
-
|
|
72
|
-
function renderMenu(name, link, isActive){
|
|
73
|
-
var $_menu;
|
|
74
|
-
if (link === ''){
|
|
75
|
-
$_menu = Gn.util.$('<li>' + name + '</li>');
|
|
76
|
-
} else {
|
|
77
|
-
var menuClass = isActive ? ' is-active' :''
|
|
78
|
-
$_menu = Gn.util.$('<li><a href="' + link + '"><div class="tree-item'+menuClass+'">' + name.split('(js)').join('') + '</a></div></li>');
|
|
79
|
-
}
|
|
80
|
-
if(name.indexOf('(js)') > 0){
|
|
81
|
-
Gn.util.append(Gn.util.find('.tree-item', $_menu), Gn.util.$('<span class="gn-tag is-small is-info-light">JS</span>'));
|
|
82
|
-
}
|
|
83
|
-
return $_menu;
|
|
84
|
-
}
|
|
85
|
-
|
|
86
|
-
function setTree(categorys){
|
|
87
|
-
var menus = {};
|
|
88
|
-
|
|
89
|
-
categorys.forEach(function(category){
|
|
90
|
-
parseTree(menus, category.split('/'), category);
|
|
91
|
-
});
|
|
92
|
-
return menus;
|
|
93
|
-
}
|
|
94
|
-
|
|
95
|
-
function parseTree(parents, child, catgry){
|
|
96
|
-
var _depth = child.shift();
|
|
97
|
-
if (parents[_depth] === undefined) {
|
|
98
|
-
parents[_depth] = {}
|
|
99
|
-
}
|
|
100
|
-
if(child.length === 1){
|
|
101
|
-
parents[_depth][child] = catgry;
|
|
102
|
-
} else if (child.length > 1) {
|
|
103
|
-
parseTree(parents[_depth], child, catgry);
|
|
104
|
-
} else {
|
|
105
|
-
parents[_depth] = catgry;
|
|
106
|
-
}
|
|
107
|
-
}
|
|
108
|
-
});
|
|
109
|
-
</script>
|
|
110
|
-
|
|
111
|
-
<div class="aigis-contents">
|
|
112
|
-
<div class="aigis-contents__body">
|
|
113
|
-
|
|
114
|
-
|
|
115
|
-
<div>
|
|
116
|
-
<div class="aigis-module Message">
|
|
117
|
-
<h2 class="aigis-module__heading" id="Message">
|
|
118
|
-
Message
|
|
119
|
-
</h2>
|
|
120
|
-
<div class="aigis-module__filepath">
|
|
121
|
-
/scss/components/message.scss
|
|
122
|
-
</div>
|
|
123
|
-
<div class="aigis-tags">
|
|
124
|
-
|
|
125
|
-
|
|
126
|
-
<span class="gn-tag">v.0.1.0</span>
|
|
127
|
-
|
|
128
|
-
|
|
129
|
-
|
|
130
|
-
<a class="js-guide"><span class="gn-tag is-info">javascript</span></a>
|
|
131
|
-
|
|
132
|
-
|
|
133
|
-
</div>
|
|
134
|
-
|
|
135
|
-
<!-- <div id="ComponentTab">
|
|
136
|
-
<ul>
|
|
137
|
-
<li><a href="#styleguide">Style</a></li>
|
|
138
|
-
<li><a href="#scriptguide">Script <span class="gn-icon"><i class="fas fa-code"></i></span></a></li>
|
|
139
|
-
</ul>
|
|
140
|
-
</div> -->
|
|
141
|
-
|
|
142
|
-
<h3 id="-">기본 메세지 알림</h3>
|
|
143
|
-
<p>-Text with icon / Text only 선택 사용 할 수 있다.</p>
|
|
144
|
-
<div class="aigis-preview">
|
|
145
|
-
<div class="gn-message is-success has-arrange">
|
|
146
|
-
<span class="gn-icon is-normal">
|
|
147
|
-
<i class="fas fa-check"></i>
|
|
148
|
-
</span>
|
|
149
|
-
<p>Success! Your message has been sent successfully. </p>
|
|
150
|
-
</div>
|
|
151
|
-
<div class="gn-message is-warning has-arrange">
|
|
152
|
-
<span class="gn-icon is-normal">
|
|
153
|
-
<i class="fas fa-exclamation-circle"></i>
|
|
154
|
-
</span>
|
|
155
|
-
<p>Warning! There was a problem with your network connection.</p>
|
|
156
|
-
<span class="gn-icon is-close is-dark">
|
|
157
|
-
<i class="fas fa-times"></i>
|
|
158
|
-
</span>
|
|
159
|
-
</div>
|
|
160
|
-
<div class="gn-message is-danger has-arrange">
|
|
161
|
-
<span class="gn-icon is-normal">
|
|
162
|
-
<i class="fas fa-exclamation-triangle"></i>
|
|
163
|
-
</span>
|
|
164
|
-
<p>Error! A problem has been occurred while submitting your data.</p>
|
|
165
|
-
</div>
|
|
166
|
-
<div class="gn-message is-info has-arrange">
|
|
167
|
-
<span class="gn-icon is-normal">
|
|
168
|
-
<i class="fas fa-info-circle"></i>
|
|
169
|
-
</span>
|
|
170
|
-
<p>Info! Please read the comments carefully.</p>
|
|
171
|
-
<span class="gn-icon is-close is-dark">
|
|
172
|
-
<i class="fas fa-times"></i>
|
|
173
|
-
</span>
|
|
174
|
-
</div></div>
|
|
175
|
-
|
|
176
|
-
<pre><code class="language-html"><span class="token tag" ><span class="token tag" ><span class="token punctuation" ><</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-message is-success has-arrange<span class="token punctuation" >"</span></span><span class="token punctuation" >></span></span>
|
|
177
|
-
<span class="token tag" ><span class="token tag" ><span class="token punctuation" ><</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<span class="token punctuation" >"</span></span><span class="token punctuation" >></span></span>
|
|
178
|
-
<span class="token tag" ><span class="token tag" ><span class="token punctuation" ><</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-check<span class="token punctuation" >"</span></span><span class="token punctuation" >></span></span><span class="token tag" ><span class="token tag" ><span class="token punctuation" ></</span>i</span><span class="token punctuation" >></span></span>
|
|
179
|
-
<span class="token tag" ><span class="token tag" ><span class="token punctuation" ></</span>span</span><span class="token punctuation" >></span></span>
|
|
180
|
-
<span class="token tag" ><span class="token tag" ><span class="token punctuation" ><</span>p</span><span class="token punctuation" >></span></span>Success! Your message has been sent successfully. <span class="token tag" ><span class="token tag" ><span class="token punctuation" ></</span>p</span><span class="token punctuation" >></span></span>
|
|
181
|
-
<span class="token tag" ><span class="token tag" ><span class="token punctuation" ></</span>div</span><span class="token punctuation" >></span></span>
|
|
182
|
-
<span class="token tag" ><span class="token tag" ><span class="token punctuation" ><</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-message is-warning has-arrange<span class="token punctuation" >"</span></span><span class="token punctuation" >></span></span>
|
|
183
|
-
<span class="token tag" ><span class="token tag" ><span class="token punctuation" ><</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<span class="token punctuation" >"</span></span><span class="token punctuation" >></span></span>
|
|
184
|
-
<span class="token tag" ><span class="token tag" ><span class="token punctuation" ><</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-exclamation-circle<span class="token punctuation" >"</span></span><span class="token punctuation" >></span></span><span class="token tag" ><span class="token tag" ><span class="token punctuation" ></</span>i</span><span class="token punctuation" >></span></span>
|
|
185
|
-
<span class="token tag" ><span class="token tag" ><span class="token punctuation" ></</span>span</span><span class="token punctuation" >></span></span>
|
|
186
|
-
<span class="token tag" ><span class="token tag" ><span class="token punctuation" ><</span>p</span><span class="token punctuation" >></span></span>Warning! There was a problem with your network connection.<span class="token tag" ><span class="token tag" ><span class="token punctuation" ></</span>p</span><span class="token punctuation" >></span></span>
|
|
187
|
-
<span class="token tag" ><span class="token tag" ><span class="token punctuation" ><</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-close is-dark<span class="token punctuation" >"</span></span><span class="token punctuation" >></span></span>
|
|
188
|
-
<span class="token tag" ><span class="token tag" ><span class="token punctuation" ><</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-times<span class="token punctuation" >"</span></span><span class="token punctuation" >></span></span><span class="token tag" ><span class="token tag" ><span class="token punctuation" ></</span>i</span><span class="token punctuation" >></span></span>
|
|
189
|
-
<span class="token tag" ><span class="token tag" ><span class="token punctuation" ></</span>span</span><span class="token punctuation" >></span></span>
|
|
190
|
-
<span class="token tag" ><span class="token tag" ><span class="token punctuation" ></</span>div</span><span class="token punctuation" >></span></span>
|
|
191
|
-
<span class="token tag" ><span class="token tag" ><span class="token punctuation" ><</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-message is-danger has-arrange<span class="token punctuation" >"</span></span><span class="token punctuation" >></span></span>
|
|
192
|
-
<span class="token tag" ><span class="token tag" ><span class="token punctuation" ><</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<span class="token punctuation" >"</span></span><span class="token punctuation" >></span></span>
|
|
193
|
-
<span class="token tag" ><span class="token tag" ><span class="token punctuation" ><</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-exclamation-triangle<span class="token punctuation" >"</span></span><span class="token punctuation" >></span></span><span class="token tag" ><span class="token tag" ><span class="token punctuation" ></</span>i</span><span class="token punctuation" >></span></span>
|
|
194
|
-
<span class="token tag" ><span class="token tag" ><span class="token punctuation" ></</span>span</span><span class="token punctuation" >></span></span>
|
|
195
|
-
<span class="token tag" ><span class="token tag" ><span class="token punctuation" ><</span>p</span><span class="token punctuation" >></span></span>Error! A problem has been occurred while submitting your data.<span class="token tag" ><span class="token tag" ><span class="token punctuation" ></</span>p</span><span class="token punctuation" >></span></span>
|
|
196
|
-
<span class="token tag" ><span class="token tag" ><span class="token punctuation" ></</span>div</span><span class="token punctuation" >></span></span>
|
|
197
|
-
<span class="token tag" ><span class="token tag" ><span class="token punctuation" ><</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-message is-info has-arrange<span class="token punctuation" >"</span></span><span class="token punctuation" >></span></span>
|
|
198
|
-
<span class="token tag" ><span class="token tag" ><span class="token punctuation" ><</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<span class="token punctuation" >"</span></span><span class="token punctuation" >></span></span>
|
|
199
|
-
<span class="token tag" ><span class="token tag" ><span class="token punctuation" ><</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-info-circle<span class="token punctuation" >"</span></span><span class="token punctuation" >></span></span><span class="token tag" ><span class="token tag" ><span class="token punctuation" ></</span>i</span><span class="token punctuation" >></span></span>
|
|
200
|
-
<span class="token tag" ><span class="token tag" ><span class="token punctuation" ></</span>span</span><span class="token punctuation" >></span></span>
|
|
201
|
-
<span class="token tag" ><span class="token tag" ><span class="token punctuation" ><</span>p</span><span class="token punctuation" >></span></span>Info! Please read the comments carefully.<span class="token tag" ><span class="token tag" ><span class="token punctuation" ></</span>p</span><span class="token punctuation" >></span></span>
|
|
202
|
-
<span class="token tag" ><span class="token tag" ><span class="token punctuation" ><</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-close is-dark<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" ><</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-times<span class="token punctuation" >"</span></span><span class="token punctuation" >></span></span><span class="token tag" ><span class="token tag" ><span class="token punctuation" ></</span>i</span><span class="token punctuation" >></span></span>
|
|
204
|
-
<span class="token tag" ><span class="token tag" ><span class="token punctuation" ></</span>span</span><span class="token punctuation" >></span></span>
|
|
205
|
-
<span class="token tag" ><span class="token tag" ><span class="token punctuation" ></</span>div</span><span class="token punctuation" >></span></span>
|
|
206
|
-
</code></pre>
|
|
207
|
-
<h3 id="-">일반 메세지</h3>
|
|
208
|
-
<div class="aigis-preview">
|
|
209
|
-
<div class="gn-message"> Eu velit aliqua eiusmod eiusmod occaecat ullamco fugiat sunt occaecat excepteur. Sit fugiat fugiat velit reprehenderit occaecat ad proident enim deserunt occaecat amet. Proident eu ut cupidatat ut ullamco dolor consectetur tempor ea minim exercitation enim. Sit reprehenderit veniam cillum adipisicing. </div>
|
|
210
|
-
<p class="gn-message"> Velit laboris elit cillum quis velit. Ipsum veniam aute est ea aliquip aute eu mollit. Tempor tempor incididunt occaecat ullamco velit esse. Ex Lorem cupidatat non quis irure velit ut fugiat consequat. Velit deserunt irure proident irure id non mollit irure et esse magna. Sint incididunt consequat reprehenderit veniam ea mollit eu laborum ipsum sit magna voluptate. </p></div>
|
|
211
|
-
|
|
212
|
-
<pre><code class="language-html"><span class="token tag" ><span class="token tag" ><span class="token punctuation" ><</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-message<span class="token punctuation" >"</span></span><span class="token punctuation" >></span></span>
|
|
213
|
-
Eu velit aliqua eiusmod eiusmod occaecat ullamco fugiat sunt occaecat excepteur. Sit fugiat fugiat velit reprehenderit occaecat ad proident enim deserunt occaecat amet. Proident eu ut cupidatat ut ullamco dolor consectetur tempor ea minim exercitation enim. Sit reprehenderit veniam cillum adipisicing.
|
|
214
|
-
<span class="token tag" ><span class="token tag" ><span class="token punctuation" ></</span>div</span><span class="token punctuation" >></span></span>
|
|
215
|
-
<span class="token tag" ><span class="token tag" ><span class="token punctuation" ><</span>p</span> <span class="token attr-name" >class</span><span class="token attr-value" ><span class="token punctuation" >=</span><span class="token punctuation" >"</span>gn-message<span class="token punctuation" >"</span></span><span class="token punctuation" >></span></span>
|
|
216
|
-
Velit laboris elit cillum quis velit. Ipsum veniam aute est ea aliquip aute eu mollit. Tempor tempor incididunt occaecat ullamco velit esse. Ex Lorem cupidatat non quis irure velit ut fugiat consequat. Velit deserunt irure proident irure id non mollit irure et esse magna. Sint incididunt consequat reprehenderit veniam ea mollit eu laborum ipsum sit magna voluptate.
|
|
217
|
-
<span class="token tag" ><span class="token tag" ><span class="token punctuation" ></</span>p</span><span class="token punctuation" >></span></span>
|
|
218
|
-
</code></pre>
|
|
219
|
-
<h3 id="-">색상</h3>
|
|
220
|
-
<div class="aigis-preview">
|
|
221
|
-
<div class="gn-message is-success"> Success </div>
|
|
222
|
-
<div class="gn-message is-warning"> Warning </div>
|
|
223
|
-
<div class="gn-message is-danger"> Danger </div>
|
|
224
|
-
<div class="gn-message is-info"> Info </div>
|
|
225
|
-
<div class="gn-message is-cancel"> Cancel </div>
|
|
226
|
-
<div class="gn-message is-dark"> Dark </div>
|
|
227
|
-
<div class="gn-message is-link"> Link </div>
|
|
228
|
-
<div class="gn-message is-secondary"> Secondary </div>
|
|
229
|
-
<div class="gn-message is-mono"> Mono </div></div>
|
|
230
|
-
|
|
231
|
-
<pre><code class="language-html"><span class="token tag" ><span class="token tag" ><span class="token punctuation" ><</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-message is-success<span class="token punctuation" >"</span></span><span class="token punctuation" >></span></span>
|
|
232
|
-
Success
|
|
233
|
-
<span class="token tag" ><span class="token tag" ><span class="token punctuation" ></</span>div</span><span class="token punctuation" >></span></span>
|
|
234
|
-
<span class="token tag" ><span class="token tag" ><span class="token punctuation" ><</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-message is-warning<span class="token punctuation" >"</span></span><span class="token punctuation" >></span></span>
|
|
235
|
-
Warning
|
|
236
|
-
<span class="token tag" ><span class="token tag" ><span class="token punctuation" ></</span>div</span><span class="token punctuation" >></span></span>
|
|
237
|
-
<span class="token tag" ><span class="token tag" ><span class="token punctuation" ><</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-message is-danger<span class="token punctuation" >"</span></span><span class="token punctuation" >></span></span>
|
|
238
|
-
Danger
|
|
239
|
-
<span class="token tag" ><span class="token tag" ><span class="token punctuation" ></</span>div</span><span class="token punctuation" >></span></span>
|
|
240
|
-
<span class="token tag" ><span class="token tag" ><span class="token punctuation" ><</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-message is-info<span class="token punctuation" >"</span></span><span class="token punctuation" >></span></span>
|
|
241
|
-
Info
|
|
242
|
-
<span class="token tag" ><span class="token tag" ><span class="token punctuation" ></</span>div</span><span class="token punctuation" >></span></span>
|
|
243
|
-
<span class="token tag" ><span class="token tag" ><span class="token punctuation" ><</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-message is-cancel<span class="token punctuation" >"</span></span><span class="token punctuation" >></span></span>
|
|
244
|
-
Cancel
|
|
245
|
-
<span class="token tag" ><span class="token tag" ><span class="token punctuation" ></</span>div</span><span class="token punctuation" >></span></span>
|
|
246
|
-
<span class="token tag" ><span class="token tag" ><span class="token punctuation" ><</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-message is-dark<span class="token punctuation" >"</span></span><span class="token punctuation" >></span></span>
|
|
247
|
-
Dark
|
|
248
|
-
<span class="token tag" ><span class="token tag" ><span class="token punctuation" ></</span>div</span><span class="token punctuation" >></span></span>
|
|
249
|
-
<span class="token tag" ><span class="token tag" ><span class="token punctuation" ><</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-message is-link<span class="token punctuation" >"</span></span><span class="token punctuation" >></span></span>
|
|
250
|
-
Link
|
|
251
|
-
<span class="token tag" ><span class="token tag" ><span class="token punctuation" ></</span>div</span><span class="token punctuation" >></span></span>
|
|
252
|
-
<span class="token tag" ><span class="token tag" ><span class="token punctuation" ><</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-message is-secondary<span class="token punctuation" >"</span></span><span class="token punctuation" >></span></span>
|
|
253
|
-
Secondary
|
|
254
|
-
<span class="token tag" ><span class="token tag" ><span class="token punctuation" ></</span>div</span><span class="token punctuation" >></span></span>
|
|
255
|
-
<span class="token tag" ><span class="token tag" ><span class="token punctuation" ><</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-message is-mono<span class="token punctuation" >"</span></span><span class="token punctuation" >></span></span>
|
|
256
|
-
Mono
|
|
257
|
-
<span class="token tag" ><span class="token tag" ><span class="token punctuation" ></</span>div</span><span class="token punctuation" >></span></span>
|
|
258
|
-
</code></pre>
|
|
259
|
-
<h3 id="-">크기</h3>
|
|
260
|
-
<div class="aigis-preview">
|
|
261
|
-
<div class="gn-message is-small"> Eu velit aliqua eiusmod eiusmod occaecat ullamco fugiat sunt occaecat excepteur. Sit fugiat fugiat velit reprehenderit occaecat ad proident enim deserunt occaecat amet. Proident eu ut cupidatat ut ullamco dolor consectetur tempor ea minim exercitation enim. Sit reprehenderit veniam cillum adipisicing. </div>
|
|
262
|
-
<div class="gn-message is-normal"> Eu velit aliqua eiusmod eiusmod occaecat ullamco fugiat sunt occaecat excepteur. Sit fugiat fugiat velit reprehenderit occaecat ad proident enim deserunt occaecat amet. Proident eu ut cupidatat ut ullamco dolor consectetur tempor ea minim exercitation enim. Sit reprehenderit veniam cillum adipisicing. </div>
|
|
263
|
-
<div class="gn-message is-medium"> Eu velit aliqua eiusmod eiusmod occaecat ullamco fugiat sunt occaecat excepteur. Sit fugiat fugiat velit reprehenderit occaecat ad proident enim deserunt occaecat amet. Proident eu ut cupidatat ut ullamco dolor consectetur tempor ea minim exercitation enim. Sit reprehenderit veniam cillum adipisicing. </div>
|
|
264
|
-
<div class="gn-message is-large"> Eu velit aliqua eiusmod eiusmod occaecat ullamco fugiat sunt occaecat excepteur. Sit fugiat fugiat velit reprehenderit occaecat ad proident enim deserunt occaecat amet. Proident eu ut cupidatat ut ullamco dolor consectetur tempor ea minim exercitation enim. Sit reprehenderit veniam cillum adipisicing. </div></div>
|
|
265
|
-
|
|
266
|
-
<pre><code class="language-html">
|
|
267
|
-
<span class="token tag" ><span class="token tag" ><span class="token punctuation" ><</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-message is-small<span class="token punctuation" >"</span></span><span class="token punctuation" >></span></span>
|
|
268
|
-
Eu velit aliqua eiusmod eiusmod occaecat ullamco fugiat sunt occaecat excepteur. Sit fugiat fugiat velit reprehenderit occaecat ad proident enim deserunt occaecat amet. Proident eu ut cupidatat ut ullamco dolor consectetur tempor ea minim exercitation enim. Sit reprehenderit veniam cillum adipisicing.
|
|
269
|
-
<span class="token tag" ><span class="token tag" ><span class="token punctuation" ></</span>div</span><span class="token punctuation" >></span></span>
|
|
270
|
-
<span class="token tag" ><span class="token tag" ><span class="token punctuation" ><</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-message is-normal<span class="token punctuation" >"</span></span><span class="token punctuation" >></span></span>
|
|
271
|
-
Eu velit aliqua eiusmod eiusmod occaecat ullamco fugiat sunt occaecat excepteur. Sit fugiat fugiat velit reprehenderit occaecat ad proident enim deserunt occaecat amet. Proident eu ut cupidatat ut ullamco dolor consectetur tempor ea minim exercitation enim. Sit reprehenderit veniam cillum adipisicing.
|
|
272
|
-
<span class="token tag" ><span class="token tag" ><span class="token punctuation" ></</span>div</span><span class="token punctuation" >></span></span>
|
|
273
|
-
<span class="token tag" ><span class="token tag" ><span class="token punctuation" ><</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-message is-medium<span class="token punctuation" >"</span></span><span class="token punctuation" >></span></span>
|
|
274
|
-
Eu velit aliqua eiusmod eiusmod occaecat ullamco fugiat sunt occaecat excepteur. Sit fugiat fugiat velit reprehenderit occaecat ad proident enim deserunt occaecat amet. Proident eu ut cupidatat ut ullamco dolor consectetur tempor ea minim exercitation enim. Sit reprehenderit veniam cillum adipisicing.
|
|
275
|
-
<span class="token tag" ><span class="token tag" ><span class="token punctuation" ></</span>div</span><span class="token punctuation" >></span></span>
|
|
276
|
-
<span class="token tag" ><span class="token tag" ><span class="token punctuation" ><</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-message is-large<span class="token punctuation" >"</span></span><span class="token punctuation" >></span></span>
|
|
277
|
-
Eu velit aliqua eiusmod eiusmod occaecat ullamco fugiat sunt occaecat excepteur. Sit fugiat fugiat velit reprehenderit occaecat ad proident enim deserunt occaecat amet. Proident eu ut cupidatat ut ullamco dolor consectetur tempor ea minim exercitation enim. Sit reprehenderit veniam cillum adipisicing.
|
|
278
|
-
<span class="token tag" ><span class="token tag" ><span class="token punctuation" ></</span>div</span><span class="token punctuation" >></span></span>
|
|
279
|
-
</code></pre>
|
|
280
|
-
<h3 id="-">생성 옵션</h3>
|
|
281
|
-
<div class="aigis-preview">
|
|
282
|
-
|
|
283
|
-
<div class="gn-container page-message"></div>
|
|
284
|
-
<button class="gn-button new-message">Message 예제보기</button>
|
|
285
|
-
</div>
|
|
286
|
-
|
|
287
|
-
<pre><code class="language-ejs"> <span class="token tag" ><span class="token tag" ><span class="token punctuation" ><</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-container page-message<span class="token punctuation" >"</span></span><span class="token punctuation" >></span></span><span class="token tag" ><span class="token tag" ><span class="token punctuation" ></</span>div</span><span class="token punctuation" >></span></span>
|
|
288
|
-
<span class="token tag" ><span class="token tag" ><span class="token punctuation" ><</span>button</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 new-message<span class="token punctuation" >"</span></span><span class="token punctuation" >></span></span>Message 예제보기<span class="token tag" ><span class="token tag" ><span class="token punctuation" ></</span>button</span><span class="token punctuation" >></span></span>
|
|
289
|
-
</code></pre>
|
|
290
|
-
<pre><code> Gn<span class="token punctuation" >.</span><span class="token function" >create</span><span class="token punctuation" >(</span><span class="token string" >'message'</span><span class="token punctuation" >,</span> {
|
|
291
|
-
target<span class="token punctuation" >:</span> <span class="token string" >'.page-message'</span><span class="token punctuation" >,</span>
|
|
292
|
-
textSets <span class="token punctuation" >:</span> {message<span class="token punctuation" >:</span> <span class="token string" >'메세지가 생성됩니다!'</span>}
|
|
293
|
-
}<span class="token punctuation" >)</span><span class="token comment" spellcheck="true">;</span>
|
|
294
|
-
</code></pre><table class="gn-table is-full is-border">
|
|
295
|
-
<thead>
|
|
296
|
-
<th colspan="2">name</th>
|
|
297
|
-
<th>type</th>
|
|
298
|
-
<th>default</th>
|
|
299
|
-
<th>description</th>
|
|
300
|
-
</thead>
|
|
301
|
-
<tbody>
|
|
302
|
-
<tr>
|
|
303
|
-
<td colspan="2">target</td>
|
|
304
|
-
<td>string</td>
|
|
305
|
-
<td></td>
|
|
306
|
-
<td>메시지를 표시할 대상의 선택자(selector)</td>
|
|
307
|
-
</tr>
|
|
308
|
-
<tr>
|
|
309
|
-
<td>textSets</td>
|
|
310
|
-
<td>message</td>
|
|
311
|
-
<td>string</td>
|
|
312
|
-
<td></td>
|
|
313
|
-
<td>메시지에 표기할 문구</td>
|
|
314
|
-
</tr>
|
|
315
|
-
<tr>
|
|
316
|
-
<td colspan="2">color</td>
|
|
317
|
-
<td>string</td>
|
|
318
|
-
<td></td>
|
|
319
|
-
<td>'success','warning','danger','info','cancel','dark','link','trans','secondary','mono'</td>
|
|
320
|
-
</tr>
|
|
321
|
-
<tr>
|
|
322
|
-
<td colspan="2">size</td>
|
|
323
|
-
<td>string</td>
|
|
324
|
-
<td></td>
|
|
325
|
-
<td>'small','normal','medium','large'</td>
|
|
326
|
-
</tr>
|
|
327
|
-
<tr>
|
|
328
|
-
<td colspan="2">icon</td>
|
|
329
|
-
<td>string</td>
|
|
330
|
-
<td></td>
|
|
331
|
-
<td><a href="https://fontawesome.com/cheatsheet?from=io" target="_blank">font awesome <span class="gn-icon is-small"><i class="fas fa-external-link-alt"></i></span></a> solid icon name</td>
|
|
332
|
-
</tr>
|
|
333
|
-
<tr>
|
|
334
|
-
<td colspan="2">animation</td>
|
|
335
|
-
<td>string</td>
|
|
336
|
-
<td>slideup</td>
|
|
337
|
-
<td>'slideup','fadeout'</td>
|
|
338
|
-
</tr>
|
|
339
|
-
<tr>
|
|
340
|
-
<td colspan="2">duration</td>
|
|
341
|
-
<td>number</td>
|
|
342
|
-
<td>300</td>
|
|
343
|
-
<td>메시지 닫기 이벤트 애니메이션 시간</td>
|
|
344
|
-
</tr>
|
|
345
|
-
<tr>
|
|
346
|
-
<td colspan="2">hasClose</td>
|
|
347
|
-
<td>boolean</td>
|
|
348
|
-
<td>true</td>
|
|
349
|
-
<td>닫기버튼 출력 여부</td>
|
|
350
|
-
</tr>
|
|
351
|
-
<tr>
|
|
352
|
-
<td colspan="2">onClose</td>
|
|
353
|
-
<td>function</td>
|
|
354
|
-
<td></td>
|
|
355
|
-
<td>닫기버튼 클릭 시 수행될 이벤트</td>
|
|
356
|
-
</tr>
|
|
357
|
-
</tbody>
|
|
358
|
-
</table>
|
|
359
|
-
|
|
360
|
-
|
|
361
|
-
<h3 id="-">메소드</h3>
|
|
362
|
-
<table class="gn-table is-full is-border">
|
|
363
|
-
<thead>
|
|
364
|
-
<th>name</th>
|
|
365
|
-
<th>return</th>
|
|
366
|
-
<th>description</th>
|
|
367
|
-
</thead>
|
|
368
|
-
<tbody>
|
|
369
|
-
<tr>
|
|
370
|
-
<td>close()</td>
|
|
371
|
-
<td>void</td>
|
|
372
|
-
<td>메세지를 닫는다.</td>
|
|
373
|
-
</tr>
|
|
374
|
-
</tbody>
|
|
375
|
-
</table>
|
|
376
|
-
|
|
377
|
-
</div>
|
|
378
|
-
</div>
|
|
379
|
-
|
|
380
|
-
|
|
381
|
-
|
|
382
|
-
<footer class="aigis-footer">Last update at 2023/04/04 17:59</footer>
|
|
383
|
-
</div>
|
|
384
|
-
</div>
|
|
385
|
-
</div>
|
|
386
|
-
<script src="../../../assets/guide.js"></script>
|
|
387
|
-
</body>
|
|
388
|
-
</html>
|
|
389
|
-
|
|
390
|
-
|
|
391
|
-
|