comand-component-library 3.3.80 → 3.3.82
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/dist/comand-component-library.js +659 -652
- package/dist/comand-component-library.umd.cjs +4 -4
- package/dist/style.css +1 -1
- package/package.json +1 -1
- package/src/App.vue +1310 -1297
- package/src/components/CmdBox.vue +21 -28
- package/src/components/CmdSocialNetworks.vue +43 -42
- package/src/components/CmdThumbnailScroller.vue +2 -2
package/src/App.vue
CHANGED
|
@@ -1,431 +1,437 @@
|
|
|
1
1
|
<!--suppress HtmlUnknownTarget, NpmUsedModulesInstalled, JSUnresolvedVariable -->
|
|
2
2
|
<template>
|
|
3
3
|
<div :id="templateId">
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
4
|
+
<div id="page-wrapper"><!-- begin #page-wrapper -->
|
|
5
|
+
<a id="anchor-back-to-top"></a>
|
|
6
|
+
<!-- begin site-header --------------------------------------------------------------------------------------------------------------------------------------------------->
|
|
7
|
+
<CmdSiteHeader :sticky="true">
|
|
8
|
+
<template v-slot:top-header>
|
|
9
|
+
<!-- begin list-of-links --------------------------------------------------------------------------------------------------------------------------------------------------->
|
|
10
|
+
<CmdListOfLinks
|
|
11
11
|
:links="listOfLinksData"
|
|
12
12
|
orientation="horizontal"
|
|
13
13
|
align="right"
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
14
|
+
/>
|
|
15
|
+
<!-- end list-of-links --------------------------------------------------------------------------------------------------------------------------------------------------->
|
|
16
|
+
</template>
|
|
17
|
+
<template v-slot:logo>
|
|
18
|
+
<!-- begin company-logo --------------------------------------------------------------------------------------------------------------------------------------------------->
|
|
19
|
+
<CmdCompanyLogo
|
|
20
20
|
:link="companyLogoData.link"
|
|
21
21
|
altText="CoManD Logo"
|
|
22
22
|
:pathDefaultLogo="companyLogoData.pathDefaultLogo"
|
|
23
23
|
:pathDarkmodeLogo="companyLogoData.pathDarkmodeLogo"
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
<
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
<
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
<
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
<
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
24
|
+
/>
|
|
25
|
+
<!-- end company-logo --------------------------------------------------------------------------------------------------------------------------------------------------->
|
|
26
|
+
</template>
|
|
27
|
+
</CmdSiteHeader>
|
|
28
|
+
<!-- end site-header --------------------------------------------------------------------------------------------------------------------------------------------------->
|
|
29
|
+
<main>
|
|
30
|
+
<label for="select-template">
|
|
31
|
+
<span class="hidden">Select template</span>
|
|
32
|
+
<select id="select-template" v-model="selectedTemplate">
|
|
33
|
+
<option value="blank">Blank</option>
|
|
34
|
+
<option value="business">Business</option>
|
|
35
|
+
<option value="casual">Casual</option>
|
|
36
|
+
<option value="dating">Dating</option>
|
|
37
|
+
<option value="influencer">Influencer</option>
|
|
38
|
+
</select>
|
|
39
|
+
</label>
|
|
40
|
+
|
|
41
|
+
<dl>
|
|
42
|
+
<dt>Frontend-Framework Version:</dt>
|
|
43
|
+
<dd>{{ packageJson.dependencies['comand-frontend-framework'] }}</dd>
|
|
44
|
+
<dt>Component Library Version:</dt>
|
|
45
|
+
<dd>{{ packageJson.version }}</dd>
|
|
46
|
+
</dl>
|
|
47
|
+
<!-- begin width-limitation-wrapper (with table of contents) --------------------------------------------------------------------------------------------------------------------------------------------------->
|
|
48
|
+
<CmdWidthLimitationWrapper :cmdHeadline="{headlineText: 'Table of contents', headlineLevel: 2}">
|
|
49
|
+
<div class="flex-container">
|
|
50
|
+
<ul>
|
|
51
|
+
<li><a href="#section-advanced-form-elements">Advanced Form Elements</a></li>
|
|
52
|
+
<li><a href="#section-bank-account-data">Bank Account Data</a></li>
|
|
53
|
+
<li><a href="#section-boxes">Boxes</a></li>
|
|
54
|
+
<li><a href="#section-breadcrumbs">Breadcrumbs</a></li>
|
|
55
|
+
<li><a href="#section-cookie-disclaimer">Cookie-Disclaimer</a></li>
|
|
56
|
+
<li><a href="#section-headlines">Headlines</a></li>
|
|
57
|
+
<li><a href="#section-fancybox">Fancybox</a></li>
|
|
58
|
+
</ul>
|
|
59
|
+
<ul>
|
|
60
|
+
<li><a href="#section-google-maps">Google-Maps™</a></li>
|
|
61
|
+
<li><a href="#section-icons">Icons</a></li>
|
|
62
|
+
<li><a href="#section-image">Image</a></li>
|
|
63
|
+
<li><a href="#section-image-gallery">Image Gallery</a></li>
|
|
64
|
+
<li><a href="#section-image-zoom">Image-Zoom</a></li>
|
|
65
|
+
<li><a href="#section-list-of-links">List Of Links</a></li>
|
|
66
|
+
<li><a href="#section-login-form">Login Form</a></li>
|
|
67
|
+
</ul>
|
|
68
|
+
<ul>
|
|
69
|
+
<li><a href="#section-main-navigation">Main-Navigation</a></li>
|
|
70
|
+
<li><a href="#section-multistep-form-progress-bar">Multistepform-Progressbar</a></li>
|
|
71
|
+
<li><a href="#section-pager">Pager</a></li>
|
|
72
|
+
<li><a href="#section-social-networks">Social Networks</a></li>
|
|
73
|
+
<li><a href="#section-site-header">Site Header</a></li>
|
|
74
|
+
<li><a href="#section-site-search">Site Search</a></li>
|
|
75
|
+
<li><a href="#section-slideshow">Slideshow</a></li>
|
|
76
|
+
</ul>
|
|
77
|
+
<ul>
|
|
78
|
+
<li><a href="#section-system-message">System-Message</a></li>
|
|
79
|
+
<li><a href="#section-tables">Tables</a></li>
|
|
80
|
+
<li><a href="#section-tabs">Tabs</a></li>
|
|
81
|
+
<li><a href="#section-thumbnail-scroller">Thumbnail-Scroller</a></li>
|
|
82
|
+
<li><a href="#section-toggle-darkmode">ToggleDarkMode</a></li>
|
|
83
|
+
<li><a href="#section-tooltip">Tooltip</a></li>
|
|
84
|
+
<li><a href="#section-upload-form">Upload-Form</a></li>
|
|
85
|
+
</ul>
|
|
86
|
+
</div>
|
|
87
|
+
</CmdWidthLimitationWrapper>
|
|
88
|
+
<!-- end width-limitation-wrapper (with table of contents) --------------------------------------------------------------------------------------------------------------------------------------------------->
|
|
87
89
|
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
90
|
+
<!-- begin address-data ------------------------------------------------------------------------------------------------------------------------------------------------------->
|
|
91
|
+
<a id="section-advanced-form-elements"></a>
|
|
92
|
+
<CmdWidthLimitationWrapper>
|
|
93
|
+
<h2 class="headline-demopage">Address Data</h2>
|
|
94
|
+
<div class="flex-container">
|
|
95
|
+
<CmdAddressData
|
|
94
96
|
:addressData="addressData"
|
|
95
97
|
:linkGoogleMaps="false"
|
|
96
98
|
:cmdHeadline="{headlineText: 'With label texts and icons', headlineLevel: 3}"
|
|
97
|
-
|
|
98
|
-
|
|
99
|
+
/>
|
|
100
|
+
<CmdAddressData
|
|
99
101
|
:addressData="addressData"
|
|
100
102
|
:linkGoogleMaps="false"
|
|
101
103
|
:show-label-texts="false"
|
|
102
104
|
:cmdHeadline="{headlineText: 'With label icons only', headlineLevel: 3}"
|
|
103
|
-
|
|
104
|
-
|
|
105
|
+
/>
|
|
106
|
+
<CmdAddressData
|
|
105
107
|
:addressData="addressData"
|
|
106
108
|
:linkGoogleMaps="false"
|
|
107
109
|
:show-label-icons="false"
|
|
108
110
|
:cmdHeadline="{headlineText: 'With label texts', headlineLevel: 3}"
|
|
109
|
-
|
|
110
|
-
|
|
111
|
+
/>
|
|
112
|
+
<CmdAddressData
|
|
111
113
|
:addressData="addressData"
|
|
112
114
|
:linkGoogleMaps="false"
|
|
113
115
|
:showLabels="false"
|
|
114
116
|
:cmdHeadline="{headlineText: 'Without labels', headlineLevel: 3}"
|
|
115
|
-
|
|
116
|
-
|
|
117
|
+
/>
|
|
118
|
+
<CmdAddressData
|
|
117
119
|
:addressData="addressData"
|
|
118
120
|
:linkGoogleMaps="true"
|
|
119
121
|
:showIconsOnly="true"
|
|
120
122
|
:cmdHeadline="{headlineText: 'Linked icons only', headlineLevel: 3}"
|
|
121
|
-
|
|
122
|
-
|
|
123
|
-
|
|
124
|
-
|
|
125
|
-
|
|
126
|
-
<!-- begin advanced form elements --------------------------------------------------------------------------------------------------------------------------------------------------->
|
|
127
|
-
<a id="section-advanced-form-elements"></a>
|
|
128
|
-
<CmdWidthLimitationWrapper>
|
|
129
|
-
<a id="anchor-advanced-form-elements"></a>
|
|
130
|
-
<h2 class="headline-demopage">Advanced Form Elements</h2>
|
|
131
|
-
<h3>Form elements status:</h3>
|
|
132
|
-
<div class="flex-container">
|
|
133
|
-
<ul class="list-status">
|
|
134
|
-
<li><a href="#" @click.prevent="setStatus('', false)"
|
|
135
|
-
:class="{'active' : validationStatus === '' && disabledStatus === false}"
|
|
136
|
-
id="status-default">Default</a></li>
|
|
137
|
-
<li class="error">
|
|
138
|
-
<a href="#" @click.prevent="setStatus('error', false)"
|
|
139
|
-
:class="{'active' : validationStatus === 'error'}" id="status-error">Error</a></li>
|
|
140
|
-
<li><a href="#" @click.prevent="setStatus('warning', false)"
|
|
141
|
-
:class="{'active' : validationStatus === 'warning'}" id="status-warning">Warning</a></li>
|
|
142
|
-
<li><a href="#" @click.prevent="setStatus('success', false)"
|
|
143
|
-
:class="{'active' : validationStatus === 'success'}" id="status-success">Success</a></li>
|
|
144
|
-
<li><a href="#" @click.prevent="setStatus('info', false)"
|
|
145
|
-
:class="{'active' : validationStatus === 'info'}" id="status-info">Info</a></li>
|
|
146
|
-
<li><a href="#" @click.prevent="setStatus('', true)"
|
|
147
|
-
:class="{'active' : disabledStatus === true}" id="status-disabled">Disabled</a></li>
|
|
148
|
-
</ul>
|
|
149
|
-
</div>
|
|
123
|
+
/>
|
|
124
|
+
</div>
|
|
125
|
+
</CmdWidthLimitationWrapper>
|
|
126
|
+
<!-- end address-data ------------------------------------------------------------------------------------------------------------------------------------------------------->
|
|
150
127
|
|
|
151
|
-
<!-- begin
|
|
152
|
-
<
|
|
153
|
-
|
|
128
|
+
<!-- begin advanced form elements --------------------------------------------------------------------------------------------------------------------------------------------------->
|
|
129
|
+
<a id="section-advanced-form-elements"></a>
|
|
130
|
+
<CmdWidthLimitationWrapper>
|
|
131
|
+
<a id="anchor-advanced-form-elements"></a>
|
|
132
|
+
<h2 class="headline-demopage">Advanced Form Elements</h2>
|
|
133
|
+
<h3>Form elements status:</h3>
|
|
134
|
+
<div class="flex-container">
|
|
135
|
+
<ul class="list-status">
|
|
136
|
+
<li><a href="#" @click.prevent="setStatus('', false)"
|
|
137
|
+
:class="{'active' : validationStatus === '' && disabledStatus === false}"
|
|
138
|
+
id="status-default">Default</a></li>
|
|
139
|
+
<li class="error">
|
|
140
|
+
<a href="#" @click.prevent="setStatus('error', false)"
|
|
141
|
+
:class="{'active' : validationStatus === 'error'}" id="status-error">Error</a></li>
|
|
142
|
+
<li><a href="#" @click.prevent="setStatus('warning', false)"
|
|
143
|
+
:class="{'active' : validationStatus === 'warning'}" id="status-warning">Warning</a>
|
|
144
|
+
</li>
|
|
145
|
+
<li><a href="#" @click.prevent="setStatus('success', false)"
|
|
146
|
+
:class="{'active' : validationStatus === 'success'}" id="status-success">Success</a>
|
|
147
|
+
</li>
|
|
148
|
+
<li><a href="#" @click.prevent="setStatus('info', false)"
|
|
149
|
+
:class="{'active' : validationStatus === 'info'}" id="status-info">Info</a></li>
|
|
150
|
+
<li><a href="#" @click.prevent="setStatus('', true)"
|
|
151
|
+
:class="{'active' : disabledStatus === true}" id="status-disabled">Disabled</a></li>
|
|
152
|
+
</ul>
|
|
153
|
+
</div>
|
|
154
154
|
|
|
155
|
-
|
|
156
|
-
<
|
|
157
|
-
|
|
158
|
-
|
|
159
|
-
|
|
160
|
-
|
|
155
|
+
<!-- begin cmd-form-filters -->
|
|
156
|
+
<CmdFormFilters v-model="fakeSelectFilters" :selectedOptionsName="getOptionName"/>
|
|
157
|
+
<!-- end cmd-form-filters -->
|
|
158
|
+
|
|
159
|
+
<CmdForm :use-fieldset="false" id="advanced-form-elements" novalidate="novalidate">
|
|
160
|
+
<fieldset class="grid-container-create-columns">
|
|
161
|
+
<legend>Legend</legend>
|
|
162
|
+
<h2>Form Element-Component</h2>
|
|
163
|
+
<div class="flex-container">
|
|
164
|
+
<CmdFormElement labelText="Input (type text):"
|
|
165
|
+
element="input"
|
|
166
|
+
type="text"
|
|
167
|
+
:status="validationStatus"
|
|
168
|
+
:disabled="disabledStatus"
|
|
169
|
+
placeholder="Type in text"
|
|
170
|
+
tooltipText="This is a tooltip"
|
|
171
|
+
v-bind="{useCustomTooltip: false}"
|
|
172
|
+
/>
|
|
173
|
+
<CmdFormElement labelText="Input for selectbox:"
|
|
174
|
+
element="select"
|
|
175
|
+
required="required"
|
|
176
|
+
:status="validationStatus"
|
|
177
|
+
:disabled="disabledStatus"
|
|
178
|
+
v-model="selectedOption"
|
|
179
|
+
:selectOptions="selectOptionsData"
|
|
180
|
+
/>
|
|
181
|
+
<CmdFormElement labelText="Input for datalist:"
|
|
182
|
+
element="input"
|
|
183
|
+
type="text"
|
|
184
|
+
:status="validationStatus"
|
|
185
|
+
:disabled="disabledStatus"
|
|
186
|
+
placeholder="Type in option"
|
|
187
|
+
:datalist="datalist"
|
|
188
|
+
tooltipText="This is a tooltip"
|
|
189
|
+
/>
|
|
190
|
+
</div>
|
|
191
|
+
<CmdFormElement labelText="Input (type search (without search-button)):"
|
|
161
192
|
element="input"
|
|
162
|
-
type="
|
|
193
|
+
type="search"
|
|
163
194
|
:status="validationStatus"
|
|
164
195
|
:disabled="disabledStatus"
|
|
165
|
-
|
|
196
|
+
:showSearchButton="false"
|
|
197
|
+
placeholder="Search"
|
|
166
198
|
tooltipText="This is a tooltip"
|
|
167
199
|
v-bind="{useCustomTooltip: false}"
|
|
168
200
|
/>
|
|
169
|
-
<CmdFormElement labelText="Input
|
|
170
|
-
element="select"
|
|
171
|
-
required="required"
|
|
172
|
-
:status="validationStatus"
|
|
173
|
-
:disabled="disabledStatus"
|
|
174
|
-
v-model="selectedOption"
|
|
175
|
-
:selectOptions="selectOptionsData"
|
|
176
|
-
/>
|
|
177
|
-
<CmdFormElement labelText="Input for datalist:"
|
|
201
|
+
<CmdFormElement labelText="Input (type search (with search-button)):"
|
|
178
202
|
element="input"
|
|
179
|
-
type="
|
|
203
|
+
type="search"
|
|
180
204
|
:status="validationStatus"
|
|
181
205
|
:disabled="disabledStatus"
|
|
182
|
-
placeholder="
|
|
183
|
-
:datalist="datalist"
|
|
206
|
+
placeholder="Search"
|
|
184
207
|
tooltipText="This is a tooltip"
|
|
208
|
+
v-bind="{useCustomTooltip: false}"
|
|
185
209
|
/>
|
|
186
|
-
|
|
187
|
-
|
|
188
|
-
|
|
189
|
-
|
|
190
|
-
|
|
191
|
-
|
|
192
|
-
|
|
193
|
-
|
|
194
|
-
|
|
195
|
-
|
|
196
|
-
|
|
197
|
-
|
|
198
|
-
|
|
199
|
-
|
|
200
|
-
|
|
201
|
-
|
|
202
|
-
|
|
203
|
-
|
|
204
|
-
|
|
205
|
-
|
|
206
|
-
|
|
207
|
-
|
|
208
|
-
|
|
209
|
-
|
|
210
|
-
|
|
211
|
-
|
|
212
|
-
|
|
213
|
-
|
|
214
|
-
|
|
215
|
-
|
|
216
|
-
|
|
217
|
-
|
|
218
|
-
|
|
219
|
-
|
|
220
|
-
|
|
210
|
+
<h2>Inputfields in Columns</h2>
|
|
211
|
+
<div class="flex-container">
|
|
212
|
+
<CmdFormElement element="input"
|
|
213
|
+
type="text"
|
|
214
|
+
minlength="5"
|
|
215
|
+
id="inputfield1"
|
|
216
|
+
placeholder="This is placeholder text"
|
|
217
|
+
v-model="inputField1"
|
|
218
|
+
tooltipText="This is a tooltip!"
|
|
219
|
+
:status="validationStatus"
|
|
220
|
+
:disabled="disabledStatus">
|
|
221
|
+
<template v-slot:labeltext>
|
|
222
|
+
<span v-html="'Label with <a href=\'#\'>Link</a> given by slot'"></span>
|
|
223
|
+
</template>
|
|
224
|
+
</CmdFormElement>
|
|
225
|
+
<CmdFormElement element="input"
|
|
226
|
+
labelText="Label for inputfield (required, with tooltip):"
|
|
227
|
+
type="text"
|
|
228
|
+
required="required"
|
|
229
|
+
minlength="5"
|
|
230
|
+
id="inputfield-required"
|
|
231
|
+
placeholder="This is placeholder text"
|
|
232
|
+
v-model="inputFieldRequired"
|
|
233
|
+
tooltipText="This is a tooltip!"
|
|
234
|
+
:status="validationStatus"
|
|
235
|
+
:disabled="disabledStatus"
|
|
236
|
+
/>
|
|
237
|
+
<CmdFormElement element="input"
|
|
238
|
+
labelText="Label for inputfield (with pattern):"
|
|
239
|
+
type="text"
|
|
240
|
+
id="inputfield-pattern"
|
|
241
|
+
placeholder="This is placeholder text"
|
|
242
|
+
pattern="/\d/"
|
|
243
|
+
v-model="inputFieldPattern"
|
|
244
|
+
tooltipText="This is a tooltip!"
|
|
245
|
+
:status="validationStatus"
|
|
246
|
+
:disabled="disabledStatus"
|
|
247
|
+
/>
|
|
248
|
+
</div>
|
|
249
|
+
<!-- begin inputfield in two columns -->
|
|
250
|
+
<div class="flex-container">
|
|
251
|
+
<CmdFormElement labelText="Label for inputfield (with icon):"
|
|
252
|
+
element="input"
|
|
253
|
+
type="text"
|
|
254
|
+
id="inputfield-username"
|
|
255
|
+
fieldIconClass="icon-user-profile"
|
|
256
|
+
placeholder="Type in username"
|
|
257
|
+
tooltipText="This is a tooltip!"
|
|
258
|
+
maxlength="100"
|
|
259
|
+
v-model="inputUsername"
|
|
260
|
+
:status="validationStatus"
|
|
261
|
+
:disabled="disabledStatus"
|
|
262
|
+
/>
|
|
263
|
+
<CmdFormElement element="input"
|
|
264
|
+
labelText="Label for password-field:"
|
|
265
|
+
type="password"
|
|
266
|
+
minlength="8"
|
|
267
|
+
maxlength="255"
|
|
268
|
+
id="inputfield-password"
|
|
269
|
+
fieldIconClass="icon-security-settings"
|
|
270
|
+
placeholder="Type in password"
|
|
271
|
+
tooltipText="This is a tooltip!"
|
|
272
|
+
:customRequirements="customRequirements"
|
|
273
|
+
v-model="inputPassword"
|
|
274
|
+
:status="validationStatus"
|
|
275
|
+
:disabled="disabledStatus"
|
|
276
|
+
/>
|
|
277
|
+
</div>
|
|
278
|
+
<!-- end inputfield in two columns -->
|
|
279
|
+
|
|
221
280
|
<CmdFormElement element="input"
|
|
222
|
-
labelText="Label for inputfield (
|
|
223
|
-
|
|
281
|
+
labelText="Label (inline) for inputfield (number):"
|
|
282
|
+
:displayLabelInline="true"
|
|
283
|
+
type="number"
|
|
284
|
+
id="inputfield-number"
|
|
224
285
|
required="required"
|
|
225
|
-
|
|
226
|
-
|
|
227
|
-
|
|
228
|
-
|
|
229
|
-
tooltipText="This is a tooltip!"
|
|
286
|
+
min="0"
|
|
287
|
+
max="9"
|
|
288
|
+
v-model="inputNumber"
|
|
289
|
+
:customRequirements="[customRequirements[2]]"
|
|
230
290
|
:status="validationStatus"
|
|
231
291
|
:disabled="disabledStatus"
|
|
232
292
|
/>
|
|
233
293
|
<CmdFormElement element="input"
|
|
234
|
-
labelText="Label for inputfield (
|
|
235
|
-
|
|
236
|
-
|
|
237
|
-
|
|
238
|
-
|
|
239
|
-
v-model="inputFieldPattern"
|
|
240
|
-
tooltipText="This is a tooltip!"
|
|
294
|
+
labelText="Label (inline) for inputfield (date):"
|
|
295
|
+
:displayLabelInline="true"
|
|
296
|
+
type="date"
|
|
297
|
+
id="inputfield-date"
|
|
298
|
+
v-model="inputDate"
|
|
241
299
|
:status="validationStatus"
|
|
242
300
|
:disabled="disabledStatus"
|
|
243
301
|
/>
|
|
244
|
-
|
|
245
|
-
|
|
246
|
-
|
|
247
|
-
|
|
248
|
-
|
|
249
|
-
|
|
250
|
-
|
|
251
|
-
|
|
252
|
-
placeholder="Type in username"
|
|
253
|
-
tooltipText="This is a tooltip!"
|
|
254
|
-
maxlength="100"
|
|
255
|
-
v-model="inputUsername"
|
|
302
|
+
<CmdFormElement element="input"
|
|
303
|
+
labelText="Label (inline) for inputfield (search) without search-button:"
|
|
304
|
+
:displayLabelInline="true"
|
|
305
|
+
type="search"
|
|
306
|
+
id="inputfield-search-without-searchbutton"
|
|
307
|
+
placeholder="Keyword(s)"
|
|
308
|
+
v-model="inputSearch"
|
|
309
|
+
:showSearchButton="false"
|
|
256
310
|
:status="validationStatus"
|
|
257
311
|
:disabled="disabledStatus"
|
|
258
312
|
/>
|
|
259
313
|
<CmdFormElement element="input"
|
|
260
|
-
labelText="Label for
|
|
261
|
-
|
|
262
|
-
|
|
263
|
-
|
|
264
|
-
|
|
265
|
-
|
|
266
|
-
placeholder="Type in password"
|
|
267
|
-
tooltipText="This is a tooltip!"
|
|
268
|
-
:customRequirements="customRequirements"
|
|
269
|
-
v-model="inputPassword"
|
|
314
|
+
labelText="Label (inline) for inputfield (search):"
|
|
315
|
+
:displayLabelInline="true"
|
|
316
|
+
type="search"
|
|
317
|
+
id="inputfield-search-with-searchbutton"
|
|
318
|
+
placeholder="Keyword(s)"
|
|
319
|
+
v-model="inputSearch"
|
|
270
320
|
:status="validationStatus"
|
|
271
321
|
:disabled="disabledStatus"
|
|
272
322
|
/>
|
|
273
|
-
|
|
274
|
-
|
|
275
|
-
|
|
276
|
-
|
|
277
|
-
|
|
278
|
-
|
|
279
|
-
|
|
280
|
-
|
|
281
|
-
|
|
282
|
-
min="0"
|
|
283
|
-
max="9"
|
|
284
|
-
v-model="inputNumber"
|
|
285
|
-
:customRequirements="[customRequirements[2]]"
|
|
286
|
-
:status="validationStatus"
|
|
287
|
-
:disabled="disabledStatus"
|
|
288
|
-
/>
|
|
289
|
-
<CmdFormElement element="input"
|
|
290
|
-
labelText="Label (inline) for inputfield (date):"
|
|
291
|
-
:displayLabelInline="true"
|
|
292
|
-
type="date"
|
|
293
|
-
id="inputfield-date"
|
|
294
|
-
v-model="inputDate"
|
|
295
|
-
:status="validationStatus"
|
|
296
|
-
:disabled="disabledStatus"
|
|
297
|
-
/>
|
|
298
|
-
<CmdFormElement element="input"
|
|
299
|
-
labelText="Label (inline) for inputfield (search) without search-button:"
|
|
300
|
-
:displayLabelInline="true"
|
|
301
|
-
type="search"
|
|
302
|
-
id="inputfield-search-without-searchbutton"
|
|
303
|
-
placeholder="Keyword(s)"
|
|
304
|
-
v-model="inputSearch"
|
|
305
|
-
:showSearchButton="false"
|
|
306
|
-
:status="validationStatus"
|
|
307
|
-
:disabled="disabledStatus"
|
|
308
|
-
/>
|
|
309
|
-
<CmdFormElement element="input"
|
|
310
|
-
labelText="Label (inline) for inputfield (search):"
|
|
311
|
-
:displayLabelInline="true"
|
|
312
|
-
type="search"
|
|
313
|
-
id="inputfield-search-with-searchbutton"
|
|
314
|
-
placeholder="Keyword(s)"
|
|
315
|
-
v-model="inputSearch"
|
|
316
|
-
:status="validationStatus"
|
|
317
|
-
:disabled="disabledStatus"
|
|
318
|
-
/>
|
|
319
|
-
<CmdFormElement element="textarea"
|
|
320
|
-
labelText="Label for textarea:"
|
|
321
|
-
id="textarea"
|
|
322
|
-
minlength="1"
|
|
323
|
-
maxlength="100"
|
|
324
|
-
placeholder="Type in your message"
|
|
325
|
-
v-model="textarea"
|
|
326
|
-
:status="validationStatus"
|
|
327
|
-
:disabled="disabledStatus"
|
|
328
|
-
/>
|
|
329
|
-
<hr/>
|
|
330
|
-
<h2>Fake Selects</h2>
|
|
331
|
-
<div class="flex-container">
|
|
332
|
-
<!-- type === default: normal selectbox (with optional icons) -->
|
|
333
|
-
<CmdFakeSelect labelText="Default selectbox:"
|
|
334
|
-
:status="validationStatus"
|
|
335
|
-
:disabled="disabledStatus"
|
|
336
|
-
:selectData="fakeSelectOptionsData"
|
|
337
|
-
v-model="fakeSelectDefault"
|
|
338
|
-
:required="true"
|
|
339
|
-
defaultOptionName="Select an option:"
|
|
340
|
-
title="Title for FakeSelect"
|
|
341
|
-
/>
|
|
342
|
-
<CmdFakeSelect labelText="Default selectbox with icons:"
|
|
343
|
-
:status="validationStatus"
|
|
344
|
-
:disabled="disabledStatus"
|
|
345
|
-
:selectData="fakeSelectOptionsWithIconsData"
|
|
346
|
-
v-model="fakeSelectDefaultWithIcons"
|
|
347
|
-
defaultOptionName="Select an option:"
|
|
348
|
-
/>
|
|
349
|
-
<!-- type === checkboxOptions: selectbox with checkboxes for each option -->
|
|
350
|
-
<CmdFakeSelect labelText="Selectbox with checkboxes:"
|
|
351
|
-
:status="validationStatus"
|
|
352
|
-
:disabled="disabledStatus"
|
|
353
|
-
:selectData="fakeSelectOptionsData"
|
|
354
|
-
v-model="fakeSelectCheckbox"
|
|
355
|
-
defaultOptionName="Options:"
|
|
356
|
-
:required="true"
|
|
357
|
-
id="selectbox-with-checkboxes"
|
|
358
|
-
type="checkboxOptions"
|
|
359
|
-
:useCustomTooltip="true"
|
|
360
|
-
/>
|
|
361
|
-
<CmdFakeSelect labelText="Selectbox with filters:"
|
|
362
|
-
:status="validationStatus"
|
|
363
|
-
:disabled="disabledStatus"
|
|
364
|
-
:selectData="fakeSelectFilterOptionsData"
|
|
365
|
-
v-model="fakeSelectFilters"
|
|
366
|
-
defaultOptionName="Filters:"
|
|
367
|
-
id="selectbox-with-filters"
|
|
368
|
-
type="checkboxOptions"
|
|
369
|
-
:useCustomTooltip="true"
|
|
370
|
-
/>
|
|
371
|
-
<CmdFakeSelect labelText="Selectbox with slot-content:"
|
|
372
|
-
:status="validationStatus"
|
|
373
|
-
:disabled="disabledStatus"
|
|
374
|
-
type="content"
|
|
375
|
-
defaultOptionName="HTML-Content:">
|
|
376
|
-
<ul class="custom-fake-select-content">
|
|
377
|
-
<li>
|
|
378
|
-
<div>
|
|
379
|
-
<h3>Headline</h3>
|
|
380
|
-
<p>Some content inside a paragraph</p>
|
|
381
|
-
</div>
|
|
382
|
-
<img src="media/images/thumbnail-scroller/thumbnail/logo-cmd-blue-landscape.jpg"
|
|
383
|
-
alt="image"/>
|
|
384
|
-
</li>
|
|
385
|
-
</ul>
|
|
386
|
-
</CmdFakeSelect>
|
|
387
|
-
<CmdFakeSelect labelText="Selectbox with country flags:"
|
|
388
|
-
:status="validationStatus"
|
|
389
|
-
:disabled="disabledStatus"
|
|
390
|
-
:selectData="fakeSelectCountriesData"
|
|
391
|
-
v-model="selectedCountry"
|
|
392
|
-
defaultOptionName="Select country:"
|
|
393
|
-
type="country"
|
|
394
|
-
/>
|
|
395
|
-
<CmdFakeSelect labelText="Selectbox with colors:"
|
|
396
|
-
:status="validationStatus"
|
|
397
|
-
:disabled="disabledStatus"
|
|
398
|
-
:selectData="fakeSelectColorsData"
|
|
399
|
-
v-model="selectedColor"
|
|
400
|
-
required="required"
|
|
401
|
-
type="color"
|
|
323
|
+
<CmdFormElement element="textarea"
|
|
324
|
+
labelText="Label for textarea:"
|
|
325
|
+
id="textarea"
|
|
326
|
+
minlength="1"
|
|
327
|
+
maxlength="100"
|
|
328
|
+
placeholder="Type in your message"
|
|
329
|
+
v-model="textarea"
|
|
330
|
+
:status="validationStatus"
|
|
331
|
+
:disabled="disabledStatus"
|
|
402
332
|
/>
|
|
403
|
-
|
|
333
|
+
<hr/>
|
|
334
|
+
<h2>Fake Selects</h2>
|
|
335
|
+
<div class="flex-container">
|
|
336
|
+
<!-- type === default: normal selectbox (with optional icons) -->
|
|
337
|
+
<CmdFakeSelect labelText="Default selectbox:"
|
|
338
|
+
:status="validationStatus"
|
|
339
|
+
:disabled="disabledStatus"
|
|
340
|
+
:selectData="fakeSelectOptionsData"
|
|
341
|
+
v-model="fakeSelectDefault"
|
|
342
|
+
:required="true"
|
|
343
|
+
defaultOptionName="Select an option:"
|
|
344
|
+
title="Title for FakeSelect"
|
|
345
|
+
/>
|
|
346
|
+
<CmdFakeSelect labelText="Default selectbox with icons:"
|
|
347
|
+
:status="validationStatus"
|
|
348
|
+
:disabled="disabledStatus"
|
|
349
|
+
:selectData="fakeSelectOptionsWithIconsData"
|
|
350
|
+
v-model="fakeSelectDefaultWithIcons"
|
|
351
|
+
defaultOptionName="Select an option:"
|
|
352
|
+
/>
|
|
353
|
+
<!-- type === checkboxOptions: selectbox with checkboxes for each option -->
|
|
354
|
+
<CmdFakeSelect labelText="Selectbox with checkboxes:"
|
|
355
|
+
:status="validationStatus"
|
|
356
|
+
:disabled="disabledStatus"
|
|
357
|
+
:selectData="fakeSelectOptionsData"
|
|
358
|
+
v-model="fakeSelectCheckbox"
|
|
359
|
+
defaultOptionName="Options:"
|
|
360
|
+
:required="true"
|
|
361
|
+
id="selectbox-with-checkboxes"
|
|
362
|
+
type="checkboxOptions"
|
|
363
|
+
:useCustomTooltip="true"
|
|
364
|
+
/>
|
|
365
|
+
<CmdFakeSelect labelText="Selectbox with filters:"
|
|
366
|
+
:status="validationStatus"
|
|
367
|
+
:disabled="disabledStatus"
|
|
368
|
+
:selectData="fakeSelectFilterOptionsData"
|
|
369
|
+
v-model="fakeSelectFilters"
|
|
370
|
+
defaultOptionName="Filters:"
|
|
371
|
+
id="selectbox-with-filters"
|
|
372
|
+
type="checkboxOptions"
|
|
373
|
+
:useCustomTooltip="true"
|
|
374
|
+
/>
|
|
375
|
+
<CmdFakeSelect labelText="Selectbox with slot-content:"
|
|
376
|
+
:status="validationStatus"
|
|
377
|
+
:disabled="disabledStatus"
|
|
378
|
+
type="content"
|
|
379
|
+
defaultOptionName="HTML-Content:">
|
|
380
|
+
<ul class="custom-fake-select-content">
|
|
381
|
+
<li>
|
|
382
|
+
<div>
|
|
383
|
+
<h3>Headline</h3>
|
|
384
|
+
<p>Some content inside a paragraph</p>
|
|
385
|
+
</div>
|
|
386
|
+
<img
|
|
387
|
+
src="media/images/thumbnail-scroller/thumbnail/logo-cmd-blue-landscape.jpg"
|
|
388
|
+
alt="image"/>
|
|
389
|
+
</li>
|
|
390
|
+
</ul>
|
|
391
|
+
</CmdFakeSelect>
|
|
392
|
+
<CmdFakeSelect labelText="Selectbox with country flags:"
|
|
393
|
+
:status="validationStatus"
|
|
394
|
+
:disabled="disabledStatus"
|
|
395
|
+
:selectData="fakeSelectCountriesData"
|
|
396
|
+
v-model="selectedCountry"
|
|
397
|
+
defaultOptionName="Select country:"
|
|
398
|
+
type="country"
|
|
399
|
+
/>
|
|
400
|
+
<CmdFakeSelect labelText="Selectbox with colors:"
|
|
401
|
+
:status="validationStatus"
|
|
402
|
+
:disabled="disabledStatus"
|
|
403
|
+
:selectData="fakeSelectColorsData"
|
|
404
|
+
v-model="selectedColor"
|
|
405
|
+
required="required"
|
|
406
|
+
type="color"
|
|
407
|
+
/>
|
|
408
|
+
</div>
|
|
404
409
|
|
|
405
|
-
|
|
410
|
+
<hr/>
|
|
406
411
|
|
|
407
|
-
|
|
408
|
-
|
|
409
|
-
|
|
410
|
-
|
|
412
|
+
<!-- begin progress bar -->
|
|
413
|
+
<h2>Progress Bar [native]</h2>
|
|
414
|
+
<CmdProgressBar labelText="Progress Bar (with optional output):" id="progress-bar2"
|
|
415
|
+
max="100"/>
|
|
416
|
+
<!-- end progress bar -->
|
|
411
417
|
|
|
412
|
-
|
|
413
|
-
|
|
414
|
-
|
|
415
|
-
|
|
416
|
-
|
|
418
|
+
<!-- begin slider -->
|
|
419
|
+
<h2>Slider [native]</h2>
|
|
420
|
+
<div class="label" :class="validationStatus">
|
|
421
|
+
<span class="label-text">Single-Slider (with in- and output):</span>
|
|
422
|
+
<span class="flex-container no-flex">
|
|
417
423
|
<label for="range-value">
|
|
418
424
|
<span class="label-text">
|
|
419
425
|
<span>Range Value</span>
|
|
420
426
|
</span>
|
|
421
427
|
<input
|
|
422
|
-
|
|
423
|
-
|
|
424
|
-
|
|
425
|
-
|
|
426
|
-
|
|
427
|
-
|
|
428
|
-
|
|
428
|
+
type="number"
|
|
429
|
+
:class="validationStatus"
|
|
430
|
+
v-model="rangeValue"
|
|
431
|
+
:disabled="disabledStatus"
|
|
432
|
+
min="0"
|
|
433
|
+
max="100"
|
|
434
|
+
id="range-value"
|
|
429
435
|
/>
|
|
430
436
|
</label>
|
|
431
437
|
<label for="range-slider">
|
|
@@ -433,25 +439,25 @@
|
|
|
433
439
|
<span>Range Value</span>
|
|
434
440
|
</span>
|
|
435
441
|
<input
|
|
436
|
-
|
|
437
|
-
|
|
438
|
-
|
|
439
|
-
|
|
440
|
-
|
|
441
|
-
|
|
442
|
-
|
|
442
|
+
type="range"
|
|
443
|
+
class="range-slider"
|
|
444
|
+
id="range-slider"
|
|
445
|
+
v-model="rangeValue"
|
|
446
|
+
:disabled="disabledStatus"
|
|
447
|
+
min="0"
|
|
448
|
+
max="100"
|
|
443
449
|
/>
|
|
444
450
|
</label>
|
|
445
451
|
</span>
|
|
446
|
-
|
|
447
|
-
|
|
452
|
+
</div>
|
|
453
|
+
<!-- end slider -->
|
|
448
454
|
|
|
449
|
-
|
|
455
|
+
<hr/>
|
|
450
456
|
|
|
451
|
-
|
|
452
|
-
|
|
453
|
-
|
|
454
|
-
|
|
457
|
+
<!-- begin toggle-switch-radio with switch-label (colored) -->
|
|
458
|
+
<h2>Toggle-Switches</h2>
|
|
459
|
+
<h3>Switches without switch-labels</h3>
|
|
460
|
+
<CmdFormElement
|
|
455
461
|
element="input"
|
|
456
462
|
type="checkbox"
|
|
457
463
|
id="toggle-switch-checkbox"
|
|
@@ -460,8 +466,8 @@
|
|
|
460
466
|
:toggleSwitch="true"
|
|
461
467
|
:status="validationStatus"
|
|
462
468
|
:disabled="disabledStatus"
|
|
463
|
-
|
|
464
|
-
|
|
469
|
+
/>
|
|
470
|
+
<CmdFormElement
|
|
465
471
|
element="input"
|
|
466
472
|
type="checkbox"
|
|
467
473
|
id="toggle-switch-checkbox-colored"
|
|
@@ -471,254 +477,254 @@
|
|
|
471
477
|
:colored="true"
|
|
472
478
|
:status="validationStatus"
|
|
473
479
|
:disabled="disabledStatus"
|
|
474
|
-
|
|
475
|
-
|
|
476
|
-
|
|
477
|
-
|
|
478
|
-
|
|
479
|
-
|
|
480
|
-
|
|
481
|
-
|
|
482
|
-
|
|
483
|
-
|
|
484
|
-
|
|
485
|
-
|
|
486
|
-
|
|
487
|
-
|
|
488
|
-
|
|
489
|
-
|
|
490
|
-
|
|
491
|
-
|
|
492
|
-
|
|
493
|
-
|
|
494
|
-
|
|
495
|
-
|
|
496
|
-
|
|
497
|
-
|
|
498
|
-
|
|
499
|
-
|
|
500
|
-
|
|
501
|
-
|
|
502
|
-
|
|
503
|
-
|
|
504
|
-
|
|
505
|
-
|
|
506
|
-
|
|
507
|
-
|
|
508
|
-
|
|
509
|
-
|
|
510
|
-
|
|
511
|
-
|
|
512
|
-
|
|
513
|
-
|
|
514
|
-
|
|
515
|
-
|
|
516
|
-
|
|
517
|
-
|
|
518
|
-
|
|
519
|
-
|
|
520
|
-
|
|
521
|
-
|
|
522
|
-
|
|
523
|
-
|
|
524
|
-
|
|
525
|
-
|
|
526
|
-
|
|
527
|
-
|
|
528
|
-
|
|
529
|
-
|
|
530
|
-
|
|
531
|
-
<!-- begin checkboxes and radiobuttons -->
|
|
532
|
-
<CmdFormElement element="input"
|
|
533
|
-
labelText="Label for (required) checkbox with boolean"
|
|
534
|
-
type="checkbox"
|
|
535
|
-
required="required"
|
|
536
|
-
id="checkbox-required-with-boolean"
|
|
537
|
-
v-model="checkboxRequiredValue"
|
|
538
|
-
:status="validationStatus"
|
|
539
|
-
:disabled="disabledStatus"
|
|
540
|
-
/>
|
|
541
|
-
<p>
|
|
542
|
-
checkbox (required) with boolean: {{ checkboxRequiredValue }}<br/>
|
|
543
|
-
checkbox with boolean: {{ checkboxValue }}<br/>
|
|
544
|
-
checkboxes with values: {{ checkboxValues }}
|
|
545
|
-
</p>
|
|
480
|
+
/>
|
|
481
|
+
<h3>Switches with switch-labels</h3>
|
|
482
|
+
<CmdFormElement element="input"
|
|
483
|
+
type="checkbox"
|
|
484
|
+
id="toggle-switch-checkbox-switch-label"
|
|
485
|
+
v-model="switchButtonCheckbox"
|
|
486
|
+
labelText="Labeltext for Toggle-Switch with Switch-Label"
|
|
487
|
+
inputValue="checkbox1"
|
|
488
|
+
onLabel="Label on"
|
|
489
|
+
offLabel="Label off"
|
|
490
|
+
:toggleSwitch="true"
|
|
491
|
+
:status="validationStatus"
|
|
492
|
+
:disabled="disabledStatus"
|
|
493
|
+
/>
|
|
494
|
+
<CmdFormElement element="input"
|
|
495
|
+
type="checkbox"
|
|
496
|
+
id="toggle-switch-checkbox-switch-label-colored"
|
|
497
|
+
v-model="switchButtonCheckbox"
|
|
498
|
+
inputValue="checkbox2"
|
|
499
|
+
labelText="Labeltext for Toggle-Switch (Checkbox, colored)"
|
|
500
|
+
onLabel="Label on"
|
|
501
|
+
offLabel="Label off"
|
|
502
|
+
:colored="true"
|
|
503
|
+
:toggleSwitch="true"
|
|
504
|
+
:status="validationStatus"
|
|
505
|
+
:disabled="disabledStatus"
|
|
506
|
+
/>
|
|
507
|
+
<CmdFormElement element="input"
|
|
508
|
+
type="radio"
|
|
509
|
+
name="radiogroup"
|
|
510
|
+
id="toggle-switch-radio1"
|
|
511
|
+
v-model="switchButtonRadio"
|
|
512
|
+
onLabel="Label on"
|
|
513
|
+
offLabel="Label off"
|
|
514
|
+
:colored="true"
|
|
515
|
+
:toggleSwitch="true"
|
|
516
|
+
:status="validationStatus"
|
|
517
|
+
:disabled="disabledStatus"
|
|
518
|
+
inputValue="radio1"
|
|
519
|
+
labelText="Labeltext for Toggle-Switch (Radio, colored) #1"
|
|
520
|
+
/>
|
|
521
|
+
<CmdFormElement element="input"
|
|
522
|
+
type="radio"
|
|
523
|
+
name="radiogroup"
|
|
524
|
+
id="toggle-switch-radio2"
|
|
525
|
+
v-model="switchButtonRadio"
|
|
526
|
+
onLabel="Label on"
|
|
527
|
+
offLabel="Label off"
|
|
528
|
+
:colored="true"
|
|
529
|
+
:toggleSwitch="true"
|
|
530
|
+
:status="validationStatus"
|
|
531
|
+
:disabled="disabledStatus"
|
|
532
|
+
inputValue="radio2"
|
|
533
|
+
labelText="Labeltext for Toggle-Switch (Radio, colored) #2"
|
|
534
|
+
/>
|
|
535
|
+
<!-- end toggle-switch-radio with switch-label (colored) -->
|
|
546
536
|
|
|
547
|
-
|
|
548
|
-
|
|
549
|
-
|
|
550
|
-
|
|
551
|
-
|
|
552
|
-
|
|
553
|
-
|
|
554
|
-
|
|
555
|
-
|
|
556
|
-
|
|
557
|
-
|
|
558
|
-
|
|
559
|
-
|
|
560
|
-
|
|
561
|
-
|
|
562
|
-
|
|
563
|
-
|
|
564
|
-
|
|
565
|
-
|
|
566
|
-
|
|
567
|
-
|
|
568
|
-
|
|
569
|
-
|
|
570
|
-
|
|
571
|
-
|
|
572
|
-
|
|
573
|
-
|
|
574
|
-
|
|
575
|
-
|
|
576
|
-
|
|
577
|
-
|
|
578
|
-
|
|
579
|
-
|
|
580
|
-
|
|
581
|
-
|
|
582
|
-
|
|
583
|
-
|
|
584
|
-
|
|
585
|
-
|
|
586
|
-
|
|
587
|
-
|
|
588
|
-
|
|
589
|
-
|
|
590
|
-
|
|
591
|
-
|
|
592
|
-
|
|
593
|
-
|
|
594
|
-
<
|
|
595
|
-
|
|
596
|
-
|
|
597
|
-
|
|
537
|
+
<!-- begin checkboxes and radiobuttons -->
|
|
538
|
+
<CmdFormElement element="input"
|
|
539
|
+
labelText="Label for (required) checkbox with boolean"
|
|
540
|
+
type="checkbox"
|
|
541
|
+
required="required"
|
|
542
|
+
id="checkbox-required-with-boolean"
|
|
543
|
+
v-model="checkboxRequiredValue"
|
|
544
|
+
:status="validationStatus"
|
|
545
|
+
:disabled="disabledStatus"
|
|
546
|
+
/>
|
|
547
|
+
<p>
|
|
548
|
+
checkbox (required) with boolean: {{ checkboxRequiredValue }}<br/>
|
|
549
|
+
checkbox with boolean: {{ checkboxValue }}<br/>
|
|
550
|
+
checkboxes with values: {{ checkboxValues }}
|
|
551
|
+
</p>
|
|
552
|
+
|
|
553
|
+
<h3>Toggle Dark-Mode</h3>
|
|
554
|
+
<a id="section-toggle-darkmode"></a>
|
|
555
|
+
<h4>Toggle Dark-Mode (with label, not styled)</h4>
|
|
556
|
+
<CmdToggleDarkMode :showLabel="true"/>
|
|
557
|
+
<h4>Toggle Dark-Mode (without label, styled)</h4>
|
|
558
|
+
<CmdToggleDarkMode :showLabel="false" :use-styled-layout="true"/>
|
|
559
|
+
<h4>Toggle Dark-Mode (styled as button)</h4>
|
|
560
|
+
<CmdToggleDarkMode :styledAsButton="true"/>
|
|
561
|
+
|
|
562
|
+
<h2>Checkboxes and Radiobuttons</h2>
|
|
563
|
+
<h3>Checkboxes [native]</h3>
|
|
564
|
+
<div class="label inline">
|
|
565
|
+
<span class="label-text">Label for native checkboxes:</span>
|
|
566
|
+
<div class="flex-container no-flex">
|
|
567
|
+
<CmdFormElement element="input"
|
|
568
|
+
labelText="Label for checkbox with boolean"
|
|
569
|
+
type="checkbox"
|
|
570
|
+
id="checkbox-with-boolean"
|
|
571
|
+
v-model="checkboxValue"
|
|
572
|
+
:status="validationStatus"
|
|
573
|
+
:disabled="disabledStatus"
|
|
574
|
+
/>
|
|
575
|
+
<CmdFormElement element="input"
|
|
576
|
+
labelText="Label for checkbox with value"
|
|
577
|
+
v-model="checkboxValues"
|
|
578
|
+
inputValue="checkboxValue1"
|
|
579
|
+
type="checkbox"
|
|
580
|
+
id="checkbox-with-value-1"
|
|
581
|
+
:status="validationStatus"
|
|
582
|
+
:disabled="disabledStatus"
|
|
583
|
+
/>
|
|
584
|
+
<CmdFormElement element="input"
|
|
585
|
+
labelText="Label for checkbox with value"
|
|
586
|
+
v-model="checkboxValues"
|
|
587
|
+
inputValue="checkboxValue2"
|
|
588
|
+
type="checkbox"
|
|
589
|
+
id="checkbox-with-value-2"
|
|
590
|
+
:status="validationStatus"
|
|
591
|
+
:disabled="disabledStatus"
|
|
592
|
+
/>
|
|
593
|
+
<CmdFormElement element="input"
|
|
594
|
+
v-model="checkboxValues"
|
|
595
|
+
inputValue="checkboxValue3"
|
|
596
|
+
type="checkbox"
|
|
597
|
+
id="checkbox-with-value-3"
|
|
598
|
+
:status="validationStatus"
|
|
599
|
+
:disabled="disabledStatus">
|
|
600
|
+
<template v-slot:labeltext>
|
|
601
|
+
Labeltext with <a href="#">link</a> given by slot
|
|
602
|
+
</template>
|
|
603
|
+
</CmdFormElement>
|
|
604
|
+
</div>
|
|
598
605
|
</div>
|
|
599
|
-
|
|
600
|
-
|
|
601
|
-
|
|
602
|
-
|
|
603
|
-
|
|
604
|
-
|
|
605
|
-
|
|
606
|
-
|
|
607
|
-
|
|
608
|
-
|
|
609
|
-
|
|
610
|
-
|
|
611
|
-
|
|
612
|
-
|
|
613
|
-
|
|
614
|
-
|
|
615
|
-
|
|
616
|
-
|
|
617
|
-
|
|
618
|
-
|
|
619
|
-
|
|
620
|
-
|
|
621
|
-
|
|
622
|
-
|
|
623
|
-
|
|
606
|
+
<h3>Checkboxes (replaced)</h3>
|
|
607
|
+
<div class="label inline">
|
|
608
|
+
<span class="label-text">Label for Replaced Input-Type-Checkbox:</span>
|
|
609
|
+
<div class="flex-container no-flex">
|
|
610
|
+
<CmdFormElement element="input"
|
|
611
|
+
labelText="Label for replaced checkbox"
|
|
612
|
+
type="checkbox"
|
|
613
|
+
:replaceInputType="true"
|
|
614
|
+
id="inputfield9"
|
|
615
|
+
v-model="replacedCheckboxValue"
|
|
616
|
+
inputValue="checkboxValue1"
|
|
617
|
+
:status="validationStatus"
|
|
618
|
+
:disabled="disabledStatus"
|
|
619
|
+
/>
|
|
620
|
+
<CmdFormElement element="input"
|
|
621
|
+
labelText="Label for replaced checkbox"
|
|
622
|
+
v-model="replacedCheckboxValue"
|
|
623
|
+
inputValue="checkboxValue2"
|
|
624
|
+
type="checkbox"
|
|
625
|
+
:replaceInputType="true"
|
|
626
|
+
id="inputfield10"
|
|
627
|
+
:status="validationStatus"
|
|
628
|
+
:disabled="disabledStatus"
|
|
629
|
+
/>
|
|
630
|
+
</div>
|
|
624
631
|
</div>
|
|
625
|
-
|
|
626
|
-
|
|
627
|
-
|
|
628
|
-
|
|
629
|
-
|
|
630
|
-
|
|
631
|
-
|
|
632
|
-
|
|
633
|
-
|
|
634
|
-
|
|
635
|
-
|
|
636
|
-
|
|
637
|
-
|
|
638
|
-
|
|
639
|
-
|
|
640
|
-
|
|
641
|
-
|
|
642
|
-
|
|
643
|
-
|
|
644
|
-
|
|
645
|
-
|
|
646
|
-
|
|
647
|
-
|
|
648
|
-
|
|
649
|
-
|
|
632
|
+
<h3>Radiobuttons [native]</h3>
|
|
633
|
+
<div class="label inline">
|
|
634
|
+
<span class="label-text">Label for native radiobuttons:</span>
|
|
635
|
+
<div class="flex-container no-flex">
|
|
636
|
+
<CmdFormElement element="input"
|
|
637
|
+
labelText="Label for native radiobutton"
|
|
638
|
+
type="radio"
|
|
639
|
+
id="inputfield11"
|
|
640
|
+
name="radiogroup"
|
|
641
|
+
inputValue="radiobuttonValue1"
|
|
642
|
+
v-model="radiobuttonValue"
|
|
643
|
+
:status="validationStatus"
|
|
644
|
+
:disabled="disabledStatus"
|
|
645
|
+
/>
|
|
646
|
+
<CmdFormElement element="input"
|
|
647
|
+
labelText="Label for native radiobutton"
|
|
648
|
+
type="radio"
|
|
649
|
+
id="inputfield12"
|
|
650
|
+
name="radiogroup"
|
|
651
|
+
inputValue="radiobuttonValue2"
|
|
652
|
+
v-model="radiobuttonValue"
|
|
653
|
+
:status="validationStatus"
|
|
654
|
+
:disabled="disabledStatus"
|
|
655
|
+
/>
|
|
656
|
+
</div>
|
|
650
657
|
</div>
|
|
651
|
-
|
|
652
|
-
|
|
653
|
-
|
|
654
|
-
|
|
655
|
-
|
|
656
|
-
|
|
657
|
-
|
|
658
|
-
|
|
658
|
+
<p>
|
|
659
|
+
Radiobuttons with values: {{ radiobuttonValue }}
|
|
660
|
+
</p>
|
|
661
|
+
<h3>Radiobuttons (replaced)</h3>
|
|
662
|
+
<div class="label inline">
|
|
663
|
+
<span class="label-text">Label for Replaced Input-Type-Radio:</span>
|
|
664
|
+
<div class="flex-container no-flex">
|
|
665
|
+
<CmdFormElement element="input"
|
|
666
|
+
labelText="Label for replaced radiobutton"
|
|
667
|
+
type="radio"
|
|
668
|
+
:replaceInputType="true"
|
|
669
|
+
id="inputfield13"
|
|
670
|
+
name="replaced-radiogroup"
|
|
671
|
+
inputValue="radiobuttonValue1"
|
|
672
|
+
v-model="replacedRadiobuttonValue"
|
|
673
|
+
:status="validationStatus"
|
|
674
|
+
:disabled="disabledStatus"
|
|
675
|
+
/>
|
|
676
|
+
<CmdFormElement element="input"
|
|
677
|
+
labelText="Label for replaced radiobutton"
|
|
678
|
+
type="radio"
|
|
679
|
+
:replaceInputType="true"
|
|
680
|
+
id="inputfield14"
|
|
681
|
+
name="replaced-radiogroup"
|
|
682
|
+
inputValue="radiobuttonValue2"
|
|
683
|
+
v-model="replacedRadiobuttonValue"
|
|
684
|
+
:status="validationStatus"
|
|
685
|
+
:disabled="disabledStatus"
|
|
686
|
+
/>
|
|
687
|
+
</div>
|
|
688
|
+
</div>
|
|
689
|
+
<!-- end checkboxes and radiobuttons -->
|
|
690
|
+
|
|
691
|
+
<!-- begin input-groups -->
|
|
692
|
+
<h2>Input-Groups</h2>
|
|
693
|
+
<h3>Input Group with Radiobuttons [native]</h3>
|
|
694
|
+
<CmdInputGroup
|
|
695
|
+
labelText="Group label for radio-group given by slot:"
|
|
696
|
+
:useSlot="true"
|
|
697
|
+
:status="validationStatus"
|
|
698
|
+
:disabled="disabledStatus"
|
|
699
|
+
>
|
|
659
700
|
<CmdFormElement element="input"
|
|
660
|
-
labelText="Label for
|
|
701
|
+
labelText="Label for radiobutton"
|
|
661
702
|
type="radio"
|
|
662
|
-
|
|
663
|
-
|
|
664
|
-
name="replaced-radiogroup"
|
|
703
|
+
id="input-group-radiobutton"
|
|
704
|
+
name="radiogroup2"
|
|
665
705
|
inputValue="radiobuttonValue1"
|
|
666
|
-
v-model="
|
|
706
|
+
v-model="inputGroupRadio"
|
|
667
707
|
:status="validationStatus"
|
|
668
708
|
:disabled="disabledStatus"
|
|
669
709
|
/>
|
|
670
710
|
<CmdFormElement element="input"
|
|
671
|
-
labelText="Label for
|
|
711
|
+
labelText="Label for radiobutton"
|
|
672
712
|
type="radio"
|
|
673
|
-
|
|
674
|
-
|
|
675
|
-
name="replaced-radiogroup"
|
|
713
|
+
id="input-group-radiobutton"
|
|
714
|
+
name="radiogroup2"
|
|
676
715
|
inputValue="radiobuttonValue2"
|
|
677
|
-
v-model="
|
|
716
|
+
v-model="inputGroupRadio"
|
|
678
717
|
:status="validationStatus"
|
|
679
718
|
:disabled="disabledStatus"
|
|
680
719
|
/>
|
|
681
|
-
</
|
|
682
|
-
|
|
683
|
-
|
|
684
|
-
|
|
685
|
-
|
|
686
|
-
|
|
687
|
-
|
|
688
|
-
|
|
689
|
-
labelText="Group label for radio-group given by slot:"
|
|
690
|
-
:useSlot="true"
|
|
691
|
-
:status="validationStatus"
|
|
692
|
-
:disabled="disabledStatus"
|
|
693
|
-
>
|
|
694
|
-
<CmdFormElement element="input"
|
|
695
|
-
labelText="Label for radiobutton"
|
|
696
|
-
type="radio"
|
|
697
|
-
id="input-group-radiobutton"
|
|
698
|
-
name="radiogroup2"
|
|
699
|
-
inputValue="radiobuttonValue1"
|
|
700
|
-
v-model="inputGroupRadio"
|
|
701
|
-
:status="validationStatus"
|
|
702
|
-
:disabled="disabledStatus"
|
|
703
|
-
/>
|
|
704
|
-
<CmdFormElement element="input"
|
|
705
|
-
labelText="Label for radiobutton"
|
|
706
|
-
type="radio"
|
|
707
|
-
id="input-group-radiobutton"
|
|
708
|
-
name="radiogroup2"
|
|
709
|
-
inputValue="radiobuttonValue2"
|
|
710
|
-
v-model="inputGroupRadio"
|
|
711
|
-
:status="validationStatus"
|
|
712
|
-
:disabled="disabledStatus"
|
|
713
|
-
/>
|
|
714
|
-
</CmdInputGroup>
|
|
715
|
-
<dl>
|
|
716
|
-
<dt>Selected value(s):</dt>
|
|
717
|
-
<dd>
|
|
718
|
-
<output>{{ inputGroupRadio }}</output>
|
|
719
|
-
</dd>
|
|
720
|
-
</dl>
|
|
721
|
-
<CmdInputGroup
|
|
720
|
+
</CmdInputGroup>
|
|
721
|
+
<dl>
|
|
722
|
+
<dt>Selected value(s):</dt>
|
|
723
|
+
<dd>
|
|
724
|
+
<output>{{ inputGroupRadio }}</output>
|
|
725
|
+
</dd>
|
|
726
|
+
</dl>
|
|
727
|
+
<CmdInputGroup
|
|
722
728
|
labelText="Grouplabel for radio-group given by property:"
|
|
723
729
|
:required="true"
|
|
724
730
|
:inputElements="idForReplacedInputsInInputGroup('radio-group')"
|
|
@@ -726,15 +732,15 @@
|
|
|
726
732
|
v-model="inputGroupCheckbox"
|
|
727
733
|
:status="validationStatus"
|
|
728
734
|
:disabled="disabledStatus"
|
|
729
|
-
|
|
730
|
-
|
|
731
|
-
|
|
732
|
-
|
|
733
|
-
|
|
734
|
-
|
|
735
|
-
|
|
736
|
-
|
|
737
|
-
|
|
735
|
+
/>
|
|
736
|
+
<dl>
|
|
737
|
+
<dt>Selected value:</dt>
|
|
738
|
+
<dd>
|
|
739
|
+
<output>{{ inputGroupCheckbox }}</output>
|
|
740
|
+
</dd>
|
|
741
|
+
</dl>
|
|
742
|
+
<h3>Input Group with Checkboxes/Radiobuttons (replaced)</h3>
|
|
743
|
+
<CmdInputGroup
|
|
738
744
|
labelText="Grouplabel for radio-group styled as replaced-input-type:"
|
|
739
745
|
:inputElements="idForReplacedInputsInInputGroup('replaced-radio-group')"
|
|
740
746
|
inputTypes="radio"
|
|
@@ -742,14 +748,14 @@
|
|
|
742
748
|
:replaceInputType="true"
|
|
743
749
|
:status="validationStatus"
|
|
744
750
|
:disabled="disabledStatus"
|
|
745
|
-
|
|
746
|
-
|
|
747
|
-
|
|
748
|
-
|
|
749
|
-
|
|
750
|
-
|
|
751
|
-
|
|
752
|
-
|
|
751
|
+
/>
|
|
752
|
+
<dl>
|
|
753
|
+
<dt>Selected value:</dt>
|
|
754
|
+
<dd>
|
|
755
|
+
<output>{{ inputGroupValueReplaceInputTypeRadio }}</output>
|
|
756
|
+
</dd>
|
|
757
|
+
</dl>
|
|
758
|
+
<CmdInputGroup
|
|
753
759
|
labelText="Grouplabel for checkbox-group styled as replaced-input-type:"
|
|
754
760
|
:inputElements="idForReplacedInputsInInputGroup('checkbox-group')"
|
|
755
761
|
inputTypes="checkbox"
|
|
@@ -758,16 +764,16 @@
|
|
|
758
764
|
:required="true"
|
|
759
765
|
:status="validationStatus"
|
|
760
766
|
:disabled="disabledStatus"
|
|
761
|
-
|
|
762
|
-
|
|
763
|
-
|
|
764
|
-
|
|
765
|
-
|
|
766
|
-
|
|
767
|
-
|
|
768
|
-
|
|
769
|
-
|
|
770
|
-
|
|
767
|
+
/>
|
|
768
|
+
<dl>
|
|
769
|
+
<dt>Selected value(s):</dt>
|
|
770
|
+
<dd>
|
|
771
|
+
<output>{{ inputGroupValueReplaceInputTypeCheckbox }}</output>
|
|
772
|
+
</dd>
|
|
773
|
+
</dl>
|
|
774
|
+
<h3>Input Groups with Checkboxes/
|
|
775
|
+
Radiobuttons (toggle-switches)</h3>
|
|
776
|
+
<CmdInputGroup
|
|
771
777
|
labelText="Grouplabel for checkbox-group styled as toggle-switches:"
|
|
772
778
|
:inputElements="idForReplacedInputsInInputGroup('checkbox-group-toggle-switch')"
|
|
773
779
|
inputTypes="checkbox"
|
|
@@ -776,14 +782,14 @@
|
|
|
776
782
|
required="required"
|
|
777
783
|
:status="validationStatus"
|
|
778
784
|
:disabled="disabledStatus"
|
|
779
|
-
|
|
780
|
-
|
|
781
|
-
|
|
782
|
-
|
|
783
|
-
|
|
784
|
-
|
|
785
|
-
|
|
786
|
-
|
|
785
|
+
/>
|
|
786
|
+
<dl>
|
|
787
|
+
<dt>Selected value(s):</dt>
|
|
788
|
+
<dd>
|
|
789
|
+
<output>{{ inputGroupValueToggleSwitchCheckbox }}</output>
|
|
790
|
+
</dd>
|
|
791
|
+
</dl>
|
|
792
|
+
<CmdInputGroup
|
|
787
793
|
labelText="Grouplabel for radio-group styled as toggle-switches:"
|
|
788
794
|
:inputElements="idForReplacedInputsInInputGroup('radio-group-toggle-switch')"
|
|
789
795
|
inputTypes="radio"
|
|
@@ -792,14 +798,14 @@
|
|
|
792
798
|
required="required"
|
|
793
799
|
:status="validationStatus"
|
|
794
800
|
:disabled="disabledStatus"
|
|
795
|
-
|
|
796
|
-
|
|
797
|
-
|
|
798
|
-
|
|
799
|
-
|
|
800
|
-
|
|
801
|
-
|
|
802
|
-
|
|
801
|
+
/>
|
|
802
|
+
<dl>
|
|
803
|
+
<dt>Selected value(s):</dt>
|
|
804
|
+
<dd>
|
|
805
|
+
<output>{{ inputGroupValueToggleSwitchRadio }}</output>
|
|
806
|
+
</dd>
|
|
807
|
+
</dl>
|
|
808
|
+
<CmdInputGroup
|
|
803
809
|
labelText="Grouplabel for radio-group given by property styled as multiple-switch:"
|
|
804
810
|
:inputElements="idForReplacedInputsInInputGroup('radio-group-multiple-switch')"
|
|
805
811
|
inputTypes="radio"
|
|
@@ -807,14 +813,14 @@
|
|
|
807
813
|
v-model="inputGroupValue3"
|
|
808
814
|
:status="validationStatus"
|
|
809
815
|
:disabled="disabledStatus"
|
|
810
|
-
|
|
811
|
-
|
|
812
|
-
|
|
813
|
-
|
|
814
|
-
|
|
815
|
-
|
|
816
|
-
|
|
817
|
-
|
|
816
|
+
/>
|
|
817
|
+
<dl>
|
|
818
|
+
<dt>Selected value(s):</dt>
|
|
819
|
+
<dd>
|
|
820
|
+
<output>{{ inputGroupValue3 }}</output>
|
|
821
|
+
</dd>
|
|
822
|
+
</dl>
|
|
823
|
+
<CmdInputGroup
|
|
818
824
|
labelText="Grouplabel for checkbox-group styled as multiple-switch (stretched horizontally):"
|
|
819
825
|
:inputElements="inputGroupCheckboxes"
|
|
820
826
|
inputTypes="checkbox"
|
|
@@ -824,327 +830,334 @@
|
|
|
824
830
|
:stretchHorizontally="true"
|
|
825
831
|
:status="validationStatus"
|
|
826
832
|
:disabled="disabledStatus"
|
|
827
|
-
|
|
828
|
-
|
|
829
|
-
|
|
830
|
-
|
|
831
|
-
|
|
832
|
-
|
|
833
|
-
|
|
834
|
-
|
|
835
|
-
|
|
836
|
-
|
|
837
|
-
|
|
838
|
-
|
|
839
|
-
|
|
840
|
-
|
|
841
|
-
|
|
842
|
-
|
|
843
|
-
|
|
844
|
-
|
|
845
|
-
|
|
846
|
-
|
|
847
|
-
|
|
848
|
-
|
|
849
|
-
|
|
850
|
-
|
|
851
|
-
|
|
852
|
-
|
|
853
|
-
|
|
854
|
-
|
|
855
|
-
|
|
856
|
-
|
|
857
|
-
|
|
858
|
-
|
|
859
|
-
|
|
860
|
-
|
|
861
|
-
|
|
862
|
-
|
|
863
|
-
|
|
864
|
-
|
|
865
|
-
|
|
866
|
-
|
|
867
|
-
|
|
868
|
-
|
|
869
|
-
|
|
870
|
-
|
|
871
|
-
|
|
872
|
-
|
|
873
|
-
|
|
874
|
-
|
|
875
|
-
|
|
876
|
-
|
|
877
|
-
|
|
878
|
-
<
|
|
833
|
+
/>
|
|
834
|
+
<dl>
|
|
835
|
+
<dt>Selected value(s):</dt>
|
|
836
|
+
<dd>
|
|
837
|
+
<output>{{ inputGroupValue4 }}</output>
|
|
838
|
+
</dd>
|
|
839
|
+
</dl>
|
|
840
|
+
</fieldset><!-- end fieldset -->
|
|
841
|
+
<div class="button-wrapper">
|
|
842
|
+
<small><sup>*</sup>values will not be submitted with the form!</small>
|
|
843
|
+
<CmdFormElement element="button"
|
|
844
|
+
:nativeButton="{text: 'Submit-button from component'}"
|
|
845
|
+
type="submit"
|
|
846
|
+
id="submitbutton"
|
|
847
|
+
name="submitbutton"
|
|
848
|
+
:disabled="disabledStatus"
|
|
849
|
+
/>
|
|
850
|
+
<button type="submit" :disabled="disabledStatus">
|
|
851
|
+
<span class="icon-check"></span>
|
|
852
|
+
<span>Native submit-button</span>
|
|
853
|
+
</button>
|
|
854
|
+
</div>
|
|
855
|
+
</CmdForm>
|
|
856
|
+
</CmdWidthLimitationWrapper>
|
|
857
|
+
<!-- end advanced form elements ----------------------------------------------------------------------------------------------------------------------------------------------------->
|
|
858
|
+
|
|
859
|
+
<!-- begin back to top button ----------------------------------------------------------------------------------------------------------------------------------------------------->
|
|
860
|
+
<CmdBackToTopButton href="#anchor-back-to-top" scroll-container="#page-wrapper"/>
|
|
861
|
+
<!-- end back to top button ----------------------------------------------------------------------------------------------------------------------------------------------------->
|
|
862
|
+
|
|
863
|
+
<!-- begin bank account data ----------------------------------------------------------------------------------------------------------------------------------------------------->
|
|
864
|
+
<a id="section-bank-account-data"></a>
|
|
865
|
+
<CmdWidthLimitationWrapper>
|
|
866
|
+
<h2 class="headline-demopage">Bank Account Data</h2>
|
|
867
|
+
<CmdBankAccountData :account-data="bankAccountData"
|
|
868
|
+
:cmd-headline="{ headlineText: 'Bank Account', headlineLevel: 3}"
|
|
869
|
+
:allow-copy-by-click="true"/>
|
|
870
|
+
</CmdWidthLimitationWrapper>
|
|
871
|
+
<!-- end bank account data ------------------------------------------------------------------------------------------------------------------------------------------------------->
|
|
872
|
+
|
|
873
|
+
<!-- begin boxes ------------------------------------------------------------------------------------------------------------------------------------------------------->
|
|
874
|
+
<a id="section-boxes"></a>
|
|
875
|
+
<CmdWidthLimitationWrapper>
|
|
876
|
+
<h2 class="headline-demopage">Boxes</h2>
|
|
877
|
+
<CmdBoxWrapper :useFlexbox="true"
|
|
878
|
+
:cmdHeadline="{headlineText: 'Boxes in BoxWrapper with flexbox', headlineLevel: 3}">
|
|
879
|
+
<CmdBox v-for="index in 14"
|
|
880
|
+
:key="index"
|
|
881
|
+
textBody="Content"
|
|
882
|
+
:cmd-headline="{headlineText: 'Headline ' + index, headlineLevel: 4}"/>
|
|
883
|
+
</CmdBoxWrapper>
|
|
884
|
+
<CmdBoxWrapper :useFlexbox="true"
|
|
885
|
+
:cmdHeadline="{headlineText: 'Different examples of content-boxes (in BoxWrapper)', headlineLevel: 3}">
|
|
886
|
+
<CmdBox
|
|
879
887
|
:stretch-vertically="false"
|
|
880
888
|
:cmdHeadline="{headlineText: 'Box with cutoff text', headlineLevel: 4}"
|
|
881
889
|
:useSlots="['body']"
|
|
882
890
|
:cutoff-text-lines="4"
|
|
883
|
-
|
|
884
|
-
|
|
885
|
-
|
|
886
|
-
|
|
887
|
-
|
|
888
|
-
|
|
889
|
-
|
|
890
|
-
<
|
|
891
|
-
<
|
|
892
|
-
|
|
893
|
-
|
|
894
|
-
|
|
895
|
-
|
|
896
|
-
<
|
|
891
|
+
>
|
|
892
|
+
<template v-slot:body>
|
|
893
|
+
This is a long text that is cutoff after a specific number of lines that can be defined
|
|
894
|
+
by
|
|
895
|
+
the property 'cutoffTextLines' and be toggled by a link below.
|
|
896
|
+
</template>
|
|
897
|
+
</CmdBox>
|
|
898
|
+
<CmdBox :useSlots="['header', 'body', 'footer']">
|
|
899
|
+
<template v-slot:header>
|
|
900
|
+
<h4>
|
|
901
|
+
Texts given by slots
|
|
902
|
+
</h4>
|
|
903
|
+
</template>
|
|
904
|
+
<template v-slot:body>
|
|
897
905
|
<p>
|
|
898
906
|
This content with paragraphs inside is placed inside the box-body.
|
|
899
907
|
</p>
|
|
900
908
|
<p>
|
|
901
909
|
<strong>Header, Content/Body and Footer of this box are given by slots.</strong>
|
|
902
910
|
</p>
|
|
903
|
-
</
|
|
904
|
-
|
|
905
|
-
|
|
906
|
-
|
|
907
|
-
|
|
908
|
-
</
|
|
909
|
-
</
|
|
910
|
-
|
|
911
|
-
|
|
912
|
-
|
|
913
|
-
|
|
914
|
-
|
|
915
|
-
</
|
|
916
|
-
|
|
917
|
-
|
|
918
|
-
|
|
919
|
-
|
|
920
|
-
|
|
921
|
-
|
|
922
|
-
|
|
923
|
-
</
|
|
924
|
-
|
|
925
|
-
|
|
926
|
-
|
|
927
|
-
|
|
928
|
-
|
|
929
|
-
</
|
|
930
|
-
</
|
|
931
|
-
|
|
932
|
-
|
|
911
|
+
</template>
|
|
912
|
+
<template v-slot:footer>
|
|
913
|
+
<p>
|
|
914
|
+
Footer content
|
|
915
|
+
</p>
|
|
916
|
+
</template>
|
|
917
|
+
</CmdBox>
|
|
918
|
+
<CmdBox :useSlots="['header', 'body']" :use-default-padding="false">
|
|
919
|
+
<template v-slot:header>
|
|
920
|
+
<h4>
|
|
921
|
+
Box with links
|
|
922
|
+
</h4>
|
|
923
|
+
</template>
|
|
924
|
+
<template v-slot:body>
|
|
925
|
+
<ul class="navigation">
|
|
926
|
+
<li><a href="#" @click.prevent="">Link name 1</a></li>
|
|
927
|
+
<li><a href="#" @click.prevent="">Link name 2</a></li>
|
|
928
|
+
<li><a href="#" @click.prevent="">Link name 3</a></li>
|
|
929
|
+
<li><a href="#" @click.prevent="">Link name 4</a></li>
|
|
930
|
+
</ul>
|
|
931
|
+
</template>
|
|
932
|
+
<!-- will not be displayed, because useSlots-property does not contain 'footer' in array -->
|
|
933
|
+
<template v-slot:footer>
|
|
934
|
+
<p>
|
|
935
|
+
footer content
|
|
936
|
+
</p>
|
|
937
|
+
</template>
|
|
938
|
+
</CmdBox>
|
|
939
|
+
<CmdBox
|
|
940
|
+
:use-default-padding="false"
|
|
933
941
|
:cmdHeadline="{headlineText: 'Collapsible box', headlineLevel: 4}"
|
|
934
942
|
:image="{src: 'media/images/content-images/landscape-medium.jpg', altText: 'ALternative text'}"
|
|
935
943
|
textBody="This is some text given by property."
|
|
936
944
|
:collapsible="true"
|
|
937
|
-
|
|
938
|
-
|
|
939
|
-
:
|
|
940
|
-
|
|
941
|
-
|
|
942
|
-
|
|
943
|
-
|
|
944
|
-
|
|
945
|
-
|
|
946
|
-
|
|
947
|
-
|
|
948
|
-
|
|
949
|
-
|
|
950
|
-
|
|
951
|
-
|
|
952
|
-
|
|
953
|
-
|
|
954
|
-
|
|
955
|
-
|
|
956
|
-
|
|
957
|
-
|
|
958
|
-
|
|
959
|
-
<
|
|
960
|
-
|
|
961
|
-
|
|
962
|
-
|
|
963
|
-
|
|
964
|
-
|
|
965
|
-
|
|
966
|
-
|
|
967
|
-
|
|
968
|
-
|
|
969
|
-
|
|
970
|
-
|
|
971
|
-
|
|
972
|
-
|
|
945
|
+
/>
|
|
946
|
+
<CmdBox
|
|
947
|
+
:useSlots="['header', 'body']"
|
|
948
|
+
:use-default-padding="false"
|
|
949
|
+
:cmdHeadline="{headlineText: 'Collapsible box', headlineLevel: 4}"
|
|
950
|
+
:collapsible="true">
|
|
951
|
+
<template v-slot:header>
|
|
952
|
+
<h4>
|
|
953
|
+
Collapsible box with image
|
|
954
|
+
</h4>
|
|
955
|
+
</template>
|
|
956
|
+
<template v-slot:body>
|
|
957
|
+
<img src="media/images/content-images/landscape-medium.jpg" alt="Alternative text"/>
|
|
958
|
+
</template>
|
|
959
|
+
</CmdBox>
|
|
960
|
+
<CmdBox :useSlots="['header', 'body', 'footer']" :use-default-padding="false">
|
|
961
|
+
<template v-slot:header>
|
|
962
|
+
<h4>
|
|
963
|
+
Box with image and content
|
|
964
|
+
</h4>
|
|
965
|
+
</template>
|
|
966
|
+
<template v-slot:body>
|
|
967
|
+
<img src="media/images/content-images/landscape-medium.jpg" alt="Alternative text"/>
|
|
968
|
+
<div class="default-padding">
|
|
969
|
+
<h4>Headline</h4>
|
|
970
|
+
<p>This is some text information i.e a short-text for a news teaser.</p>
|
|
971
|
+
</div>
|
|
972
|
+
</template>
|
|
973
|
+
<template v-slot:footer>
|
|
974
|
+
<p>
|
|
975
|
+
<a href="#">Read more…</a>
|
|
976
|
+
</p>
|
|
977
|
+
</template>
|
|
978
|
+
</CmdBox>
|
|
979
|
+
</CmdBoxWrapper>
|
|
980
|
+
<h3>Product boxes</h3>
|
|
981
|
+
<div class="grid-container-create-columns">
|
|
982
|
+
<div class="grid-small-item" v-for="(product, index) in boxProductData" :key="index">
|
|
983
|
+
<CmdBox boxType="product" :product="product" :cmdHeadline="{headlineLevel: 4}"/>
|
|
984
|
+
</div>
|
|
973
985
|
</div>
|
|
974
|
-
|
|
975
|
-
|
|
976
|
-
|
|
977
|
-
|
|
978
|
-
|
|
986
|
+
<h3>User boxes</h3>
|
|
987
|
+
<div class="grid-container-create-columns">
|
|
988
|
+
<div class="grid-small-item" v-for="(user, index) in boxUserData" :key="index">
|
|
989
|
+
<CmdBox boxType="user" :user="user" :cmdHeadline="{headlineLevel: 4}"/>
|
|
990
|
+
</div>
|
|
979
991
|
</div>
|
|
980
|
-
|
|
981
|
-
|
|
982
|
-
|
|
983
|
-
|
|
984
|
-
|
|
985
|
-
|
|
986
|
-
</
|
|
987
|
-
</
|
|
988
|
-
|
|
989
|
-
|
|
990
|
-
|
|
991
|
-
|
|
992
|
-
|
|
993
|
-
|
|
994
|
-
|
|
995
|
-
|
|
996
|
-
|
|
997
|
-
|
|
998
|
-
|
|
999
|
-
|
|
1000
|
-
|
|
1001
|
-
|
|
1002
|
-
|
|
1003
|
-
|
|
1004
|
-
|
|
1005
|
-
</
|
|
1006
|
-
|
|
1007
|
-
|
|
1008
|
-
|
|
1009
|
-
|
|
1010
|
-
|
|
1011
|
-
|
|
1012
|
-
|
|
1013
|
-
|
|
1014
|
-
|
|
1015
|
-
|
|
1016
|
-
|
|
1017
|
-
|
|
1018
|
-
|
|
1019
|
-
|
|
1020
|
-
|
|
1021
|
-
|
|
1022
|
-
|
|
1023
|
-
|
|
1024
|
-
|
|
1025
|
-
|
|
1026
|
-
|
|
1027
|
-
|
|
1028
|
-
|
|
1029
|
-
|
|
1030
|
-
|
|
1031
|
-
|
|
1032
|
-
|
|
1033
|
-
|
|
1034
|
-
|
|
1035
|
-
|
|
1036
|
-
|
|
1037
|
-
|
|
1038
|
-
|
|
1039
|
-
|
|
1040
|
-
|
|
1041
|
-
|
|
1042
|
-
|
|
1043
|
-
|
|
1044
|
-
|
|
1045
|
-
|
|
1046
|
-
|
|
1047
|
-
|
|
1048
|
-
|
|
1049
|
-
|
|
1050
|
-
|
|
1051
|
-
|
|
1052
|
-
|
|
992
|
+
<CmdBoxWrapper :boxesPerRow="[5, 2, 1]" :useRowViewAsDefault="true">
|
|
993
|
+
<template v-slot="slotProps">
|
|
994
|
+
<CmdBox v-for="index in boxUserData.length" :key="index" boxType="user"
|
|
995
|
+
:user="boxUserData[index - 1]" :cmdHeadline="{headlineLevel: 5}"
|
|
996
|
+
:rowView="slotProps.rowView"/>
|
|
997
|
+
</template>
|
|
998
|
+
</CmdBoxWrapper>
|
|
999
|
+
</CmdWidthLimitationWrapper>
|
|
1000
|
+
<!-- end boxes ------------------------------------------------------------------------------------------------------------------------------------------------------->
|
|
1001
|
+
|
|
1002
|
+
<!-- begin breadcrumbs ------------------------------------------------------------------------------------------------------------------------------------------------------->
|
|
1003
|
+
<a id="section-breadcrumbs"></a>
|
|
1004
|
+
<CmdWidthLimitationWrapper inner-component="div">
|
|
1005
|
+
<h2 class="headline-demopage">Breadcrumbs</h2>
|
|
1006
|
+
<CmdBreadcrumbs :breadcrumbLinks="breadcrumbData" breadcrumbLabel="You are here:"/>
|
|
1007
|
+
</CmdWidthLimitationWrapper>
|
|
1008
|
+
<!-- end breadcrumbs ------------------------------------------------------------------------------------------------------------------------------------------------------->
|
|
1009
|
+
|
|
1010
|
+
<!-- begin cookie-disclaimer ------------------------------------------------------------------------------------------------------------------------------------------------------->
|
|
1011
|
+
<a id="section-cookie-disclaimer"></a>
|
|
1012
|
+
<CmdWidthLimitationWrapper>
|
|
1013
|
+
<h2 class="headline-demopage">Cookie Disclaimer</h2>
|
|
1014
|
+
<a class="button" href="#" @click.prevent="fancyBoxCookieDisclaimer = true">
|
|
1015
|
+
<span>Open Cookie Disclaimer</span>
|
|
1016
|
+
</a>
|
|
1017
|
+
</CmdWidthLimitationWrapper>
|
|
1018
|
+
<!-- end cookie-disclaimer ------------------------------------------------------------------------------------------------------------------------------------------------------->
|
|
1019
|
+
|
|
1020
|
+
<!-- begin headline ------------------------------------------------------------------------------------------------------------------------------------------------------->
|
|
1021
|
+
<a id="section-headlines"></a>
|
|
1022
|
+
<CmdWidthLimitationWrapper>
|
|
1023
|
+
<h2 class="headline-demopage">Headlines</h2>
|
|
1024
|
+
<CmdHeadline :headlineIcon="{iconClass: 'icon-home'}" pre-headline-text="Pre-headline"
|
|
1025
|
+
headlineText="Headline level 1" :headlineLevel="1"/>
|
|
1026
|
+
<CmdHeadline headlineText="Headline level 2" :headlineLevel="2"/>
|
|
1027
|
+
<CmdHeadline headlineText="Headline level 3" :headlineLevel="3"/>
|
|
1028
|
+
<CmdHeadline headlineText="Headline level 4" :headlineLevel="4"/>
|
|
1029
|
+
<CmdHeadline headlineText="Headline level 5" :headlineLevel="5"/>
|
|
1030
|
+
<CmdHeadline headlineText="Headline level 6" :headlineLevel="6"/>
|
|
1031
|
+
<CmdHeadline pre-headline-text="Pre-headline" headlineText="Headline level 1 (center)"
|
|
1032
|
+
text-align="center" :headlineLevel="1"/>
|
|
1033
|
+
<CmdHeadline pre-headline-text="Pre-headline" headlineText="Headline level 1 (right)"
|
|
1034
|
+
text-align="right"
|
|
1035
|
+
:headlineLevel="1"/>
|
|
1036
|
+
</CmdWidthLimitationWrapper>
|
|
1037
|
+
<!-- end headline ------------------------------------------------------------------------------------------------------------------------------------------------------->
|
|
1038
|
+
|
|
1039
|
+
<!-- begin fancybox ------------------------------------------------------------------------------------------------------------------------------------------------------->
|
|
1040
|
+
<a id="section-fancybox"></a>
|
|
1041
|
+
<CmdWidthLimitationWrapper>
|
|
1042
|
+
<h2 class="headline-demopage">Fancybox</h2>
|
|
1043
|
+
<h3>FancyBox with text</h3>
|
|
1044
|
+
<a href="#" @click.prevent="showFancyBox('text','Some text', 'FancyBox with text')">Open FancyBox
|
|
1045
|
+
with
|
|
1046
|
+
text</a>
|
|
1047
|
+
<h3>FancyBox with large image given by url</h3>
|
|
1048
|
+
<a href="#"
|
|
1049
|
+
@click.prevent="showFancyBox('url', 'media/images/demo-images/large/landscape-01.jpg', 'FancyBox with large image given by url')"
|
|
1050
|
+
title="Open FancyBox with large image given by url"
|
|
1051
|
+
style="display: inline-flex;"
|
|
1052
|
+
>
|
|
1053
|
+
<img src="media/images/demo-images/small/landscape-01.jpg" alt="Alternative text"/>
|
|
1054
|
+
</a>
|
|
1055
|
+
<h3>FancyBox with large image given by property</h3>
|
|
1056
|
+
<a href="#"
|
|
1057
|
+
@click.prevent="showFancyBox('image', {large:'media/images/demo-images/large/landscape-02.jpg'}, 'FancyBox with large image given by property')"
|
|
1058
|
+
title="Open FancyBox with large image given by property"
|
|
1059
|
+
style="display: inline-flex;"
|
|
1060
|
+
>
|
|
1061
|
+
<img src="media/images/demo-images/small/landscape-02.jpg" alt="Alternative text"/>
|
|
1062
|
+
</a>
|
|
1063
|
+
<h3>FancyBox with image as object give by property</h3>
|
|
1064
|
+
<a href="#"
|
|
1065
|
+
@click.prevent="showFancyBox('image', {
|
|
1053
1066
|
small: 'media/images/demo-images/medium/landscape-03.jpg',
|
|
1054
1067
|
medium: 'media/images/demo-images/medium/landscape-03.jpg',
|
|
1055
1068
|
large: 'media/images/demo-images/large/landscape-03.jpg'
|
|
1056
1069
|
}, 'FancyBox with large image given by property')"
|
|
1057
|
-
|
|
1058
|
-
|
|
1059
|
-
|
|
1060
|
-
|
|
1061
|
-
|
|
1062
|
-
|
|
1063
|
-
|
|
1064
|
-
|
|
1065
|
-
|
|
1066
|
-
|
|
1067
|
-
|
|
1068
|
-
|
|
1069
|
-
|
|
1070
|
-
|
|
1071
|
-
|
|
1072
|
-
|
|
1073
|
-
|
|
1074
|
-
|
|
1075
|
-
|
|
1076
|
-
|
|
1077
|
-
|
|
1078
|
-
|
|
1079
|
-
|
|
1080
|
-
|
|
1081
|
-
|
|
1082
|
-
|
|
1083
|
-
|
|
1084
|
-
|
|
1085
|
-
|
|
1086
|
-
|
|
1087
|
-
|
|
1088
|
-
|
|
1089
|
-
|
|
1090
|
-
|
|
1091
|
-
|
|
1092
|
-
|
|
1093
|
-
|
|
1094
|
-
|
|
1095
|
-
|
|
1096
|
-
|
|
1097
|
-
|
|
1098
|
-
|
|
1099
|
-
|
|
1100
|
-
|
|
1101
|
-
|
|
1102
|
-
|
|
1103
|
-
|
|
1104
|
-
|
|
1105
|
-
|
|
1106
|
-
|
|
1107
|
-
|
|
1108
|
-
|
|
1109
|
-
|
|
1110
|
-
|
|
1111
|
-
|
|
1112
|
-
|
|
1113
|
-
|
|
1114
|
-
|
|
1115
|
-
|
|
1116
|
-
|
|
1117
|
-
|
|
1118
|
-
|
|
1119
|
-
|
|
1120
|
-
|
|
1121
|
-
|
|
1070
|
+
title="Open FancyBox with large image given by property"
|
|
1071
|
+
style="display: inline-flex;"
|
|
1072
|
+
>
|
|
1073
|
+
<img src="media/images/demo-images/small/landscape-03.jpg" alt="Alternative text"/>
|
|
1074
|
+
</a>
|
|
1075
|
+
|
|
1076
|
+
</CmdWidthLimitationWrapper>
|
|
1077
|
+
<!-- end fancybox ------------------------------------------------------------------------------------------------------------------------------------------------------->
|
|
1078
|
+
|
|
1079
|
+
<!-- begin google-maps ------------------------------------------------------------------------------------------------------------------------------------------------------->
|
|
1080
|
+
<a id="section-google-maps"></a>
|
|
1081
|
+
<CmdWidthLimitationWrapper>
|
|
1082
|
+
<h2 class="headline-demopage">Google Maps™</h2>
|
|
1083
|
+
<CmdGoogleMaps :address="addressData"/>
|
|
1084
|
+
</CmdWidthLimitationWrapper>
|
|
1085
|
+
<!-- end google-maps ------------------------------------------------------------------------------------------------------------------------------------------------------->
|
|
1086
|
+
|
|
1087
|
+
<!-- begin icons ------------------------------------------------------------------------------------------------------------------------------------------------------->
|
|
1088
|
+
<a id="section-icons"></a>
|
|
1089
|
+
<CmdWidthLimitationWrapper>
|
|
1090
|
+
<h2 class="headline-demopage">Icons</h2>
|
|
1091
|
+
<ul>
|
|
1092
|
+
<li><span>Icon from local iconfont</span>
|
|
1093
|
+
<CmdIcon iconClass="icon-home"/>
|
|
1094
|
+
</li>
|
|
1095
|
+
<li><span>Icon from iconify-api (icomoon-font)</span>
|
|
1096
|
+
<CmdIcon iconClass="icomoon-free:home"/>
|
|
1097
|
+
</li>
|
|
1098
|
+
<li><span>Icon from iconify-api (bootstrap-font)</span>
|
|
1099
|
+
<CmdIcon iconClass="bi:house-fill"/>
|
|
1100
|
+
</li>
|
|
1101
|
+
<li><span>Icon from iconify-api (material-design-font)</span>
|
|
1102
|
+
<CmdIcon iconClass="mdi:home"/>
|
|
1103
|
+
</li>
|
|
1104
|
+
<li><span>Icon from iconify-api (font-awesome-solid-font)</span>
|
|
1105
|
+
<CmdIcon iconClass="fa6-solid:house-chimney"/>
|
|
1106
|
+
</li>
|
|
1107
|
+
</ul>
|
|
1108
|
+
</CmdWidthLimitationWrapper>
|
|
1109
|
+
<!-- end icons ------------------------------------------------------------------------------------------------------------------------------------------------------->
|
|
1110
|
+
|
|
1111
|
+
<!-- begin images ------------------------------------------------------------------------------------------------------------------------------------------------------->
|
|
1112
|
+
<a id="section-image"></a>
|
|
1113
|
+
<CmdWidthLimitationWrapper>
|
|
1114
|
+
<h2 class="headline-demopage">Image</h2>
|
|
1115
|
+
<div class="flex-container">
|
|
1116
|
+
<CmdImage :image="imageData[0].image" :figcaption="imageData[0].figcaption"/>
|
|
1117
|
+
<CmdImage :image="imageData[1].image" :figcaption="imageData[1].figcaption"/>
|
|
1118
|
+
</div>
|
|
1119
|
+
</CmdWidthLimitationWrapper>
|
|
1120
|
+
<!-- end images ------------------------------------------------------------------------------------------------------------------------------------------------------->
|
|
1121
|
+
|
|
1122
|
+
<!-- begin image-gallery------------------------------------------------------------------------------------------------------------------------------------------------------->
|
|
1123
|
+
<a id="section-image-gallery"></a>
|
|
1124
|
+
<CmdWidthLimitationWrapper>
|
|
1125
|
+
<h2 class="headline-demopage">Image-Gallery</h2>
|
|
1126
|
+
<CmdImageGallery :images="imageGalleryData"/>
|
|
1127
|
+
</CmdWidthLimitationWrapper>
|
|
1128
|
+
<!-- end image-gallery ------------------------------------------------------------------------------------------------------------------------------------------------------->
|
|
1129
|
+
|
|
1130
|
+
<!-- begin image-zoom ------------------------------------------------------------------------------------------------------------------------------------------------------->
|
|
1131
|
+
<a id="section-image-zoom"></a>
|
|
1132
|
+
<CmdWidthLimitationWrapper>
|
|
1133
|
+
<h2 class="headline-demopage">Image-Zoom</h2>
|
|
1134
|
+
<CmdImageZoom
|
|
1122
1135
|
:imageSmall="imageData[2].image"
|
|
1123
1136
|
:imageLarge="imageData[3].image"
|
|
1124
|
-
|
|
1125
|
-
|
|
1126
|
-
|
|
1127
|
-
|
|
1128
|
-
|
|
1129
|
-
|
|
1130
|
-
|
|
1131
|
-
|
|
1132
|
-
|
|
1133
|
-
|
|
1134
|
-
|
|
1135
|
-
|
|
1136
|
-
|
|
1137
|
-
|
|
1138
|
-
|
|
1139
|
-
|
|
1140
|
-
|
|
1141
|
-
|
|
1142
|
-
|
|
1143
|
-
|
|
1144
|
-
|
|
1145
|
-
|
|
1146
|
-
|
|
1147
|
-
|
|
1137
|
+
/>
|
|
1138
|
+
</CmdWidthLimitationWrapper>
|
|
1139
|
+
<!-- end image-zoom ------------------------------------------------------------------------------------------------------------------------------------------------------->
|
|
1140
|
+
|
|
1141
|
+
<!-- begin login-form ------------------------------------------------------------------------------------------------------------------------------------------------------->
|
|
1142
|
+
<a id="section-login-form"></a>
|
|
1143
|
+
<CmdWidthLimitationWrapper>
|
|
1144
|
+
<h2 class="headline-demopage">Login Form</h2>
|
|
1145
|
+
<CmdForm :use-validation="true" :use-fieldset="false">
|
|
1146
|
+
<CmdLoginForm v-model="loginData" textLegendLoginForm="Please log in"/>
|
|
1147
|
+
</CmdForm>
|
|
1148
|
+
<p>LoginData: {{ loginData }}</p>
|
|
1149
|
+
</CmdWidthLimitationWrapper>
|
|
1150
|
+
<!-- end list-of-links ------------------------------------------------------------------------------------------------------------------------------------------------------->
|
|
1151
|
+
|
|
1152
|
+
|
|
1153
|
+
<!-- begin list-of-links ------------------------------------------------------------------------------------------------------------------------------------------------------->
|
|
1154
|
+
<a id="section-list-of-links"></a>
|
|
1155
|
+
<CmdWidthLimitationWrapper>
|
|
1156
|
+
<h2 class="headline-demopage">List Of Links</h2>
|
|
1157
|
+
<h3>Vertical</h3>
|
|
1158
|
+
<CmdListOfLinks :links="listOfLinksData"/>
|
|
1159
|
+
<h3>Horizontal (aligned left, with headline)</h3>
|
|
1160
|
+
<CmdListOfLinks
|
|
1148
1161
|
orientation="horizontal"
|
|
1149
1162
|
align="left"
|
|
1150
1163
|
:links="listOfLinksData"
|
|
@@ -1152,166 +1165,166 @@
|
|
|
1152
1165
|
headlineText: 'Headline',
|
|
1153
1166
|
headlineLevel: 5
|
|
1154
1167
|
}"
|
|
1155
|
-
|
|
1156
|
-
|
|
1157
|
-
|
|
1158
|
-
|
|
1159
|
-
|
|
1160
|
-
|
|
1161
|
-
|
|
1162
|
-
|
|
1163
|
-
|
|
1164
|
-
|
|
1165
|
-
|
|
1166
|
-
|
|
1167
|
-
|
|
1168
|
-
|
|
1169
|
-
|
|
1170
|
-
|
|
1168
|
+
/>
|
|
1169
|
+
<h3>Horizontal (aligned center)</h3>
|
|
1170
|
+
<CmdListOfLinks orientation="horizontal" align="center" :links="listOfLinksData"/>
|
|
1171
|
+
<h3>Horizontal (aligned right)</h3>
|
|
1172
|
+
<CmdListOfLinks orientation="horizontal" align="right" :links="listOfLinksData"
|
|
1173
|
+
@click="clickOnListOfLinks"/>
|
|
1174
|
+
<h3>Large icons</h3>
|
|
1175
|
+
<CmdListOfLinks orientation="horizontal" :links="listOfLinksData" :largeIcons="true"/>
|
|
1176
|
+
</CmdWidthLimitationWrapper>
|
|
1177
|
+
<!-- end list-of-links ------------------------------------------------------------------------------------------------------------------------------------------------------->
|
|
1178
|
+
|
|
1179
|
+
<!-- begin main-navigation ------------------------------------------------------------------------------------------------------------------------------------------------------->
|
|
1180
|
+
<a id="section-main-navigation"></a>
|
|
1181
|
+
<CmdWidthLimitationWrapper>
|
|
1182
|
+
<h2 class="headline-demopage">Main Navigation</h2>
|
|
1183
|
+
<CmdMainNavigation
|
|
1171
1184
|
:stretchMainItems="false"
|
|
1172
1185
|
:persistOnMobile="false"
|
|
1173
1186
|
:navigationEntries="navigationData.navigationEntries"
|
|
1174
|
-
|
|
1175
|
-
|
|
1176
|
-
|
|
1177
|
-
|
|
1178
|
-
|
|
1179
|
-
|
|
1180
|
-
|
|
1181
|
-
|
|
1182
|
-
|
|
1183
|
-
|
|
1187
|
+
/>
|
|
1188
|
+
</CmdWidthLimitationWrapper>
|
|
1189
|
+
<!-- end main-navigation ------------------------------------------------------------------------------------------------------------------------------------------------------->
|
|
1190
|
+
|
|
1191
|
+
<!-- begin multistep-form-progress-bar ------------------------------------------------------------------------------------------------------------------------------------------------------->
|
|
1192
|
+
<a id="section-multistep-form-progress-bar"></a>
|
|
1193
|
+
<CmdWidthLimitationWrapper>
|
|
1194
|
+
<h2 class="headline-demopage">Multistepform-Progressbar</h2>
|
|
1195
|
+
<h3>Steps with icons</h3>
|
|
1196
|
+
<CmdMultistepFormProgressBar
|
|
1184
1197
|
:multisteps="multistepsData.withIcon"
|
|
1185
1198
|
separatorIconClass="icon-single-arrow-right"
|
|
1186
1199
|
@click="showPageMultistep = $event.index + 1"
|
|
1187
|
-
|
|
1188
|
-
|
|
1189
|
-
|
|
1190
|
-
|
|
1191
|
-
|
|
1192
|
-
|
|
1200
|
+
/>
|
|
1201
|
+
<div>
|
|
1202
|
+
<p>Page {{ showPageMultistep }}</p>
|
|
1203
|
+
</div>
|
|
1204
|
+
<h3>Steps with number</h3>
|
|
1205
|
+
<CmdMultistepFormProgressBar
|
|
1193
1206
|
:showStepNumber="true"
|
|
1194
1207
|
:multisteps="multistepsData.withoutIcon"
|
|
1195
1208
|
separatorIconClass="icon-single-arrow-right"
|
|
1196
1209
|
@click="showPageMultistep = $event.index + 1"
|
|
1197
|
-
|
|
1198
|
-
|
|
1199
|
-
|
|
1200
|
-
|
|
1201
|
-
|
|
1202
|
-
|
|
1203
|
-
|
|
1204
|
-
|
|
1205
|
-
|
|
1206
|
-
|
|
1207
|
-
|
|
1208
|
-
|
|
1209
|
-
|
|
1210
|
-
|
|
1211
|
-
|
|
1212
|
-
|
|
1213
|
-
|
|
1214
|
-
|
|
1215
|
-
|
|
1216
|
-
|
|
1217
|
-
|
|
1218
|
-
|
|
1219
|
-
|
|
1220
|
-
|
|
1221
|
-
|
|
1222
|
-
|
|
1223
|
-
|
|
1210
|
+
/>
|
|
1211
|
+
<div>
|
|
1212
|
+
<p>Page {{ showPageMultistep }}</p>
|
|
1213
|
+
</div>
|
|
1214
|
+
</CmdWidthLimitationWrapper>
|
|
1215
|
+
<!-- end multistep-form-progress-bar ------------------------------------------------------------------------------------------------------------------------------------------------------->
|
|
1216
|
+
|
|
1217
|
+
<!-- begin newsletter-subscription ------------------------------------------------------------------------------------------------------------------------------------------------------->
|
|
1218
|
+
<a id="section-newsletter-subscription"></a>
|
|
1219
|
+
<CmdWidthLimitationWrapper>
|
|
1220
|
+
<h2 class="headline-demopage">Newsletter Subscription</h2>
|
|
1221
|
+
<CmdForm textLegend="Stay-up-to-date" :use-fieldset="false">
|
|
1222
|
+
<CmdNewsletterSubscription v-model="newsletter" buttonType="submit"
|
|
1223
|
+
@buttonClick="submitNewsletterRegistration"/>
|
|
1224
|
+
</CmdForm>
|
|
1225
|
+
</CmdWidthLimitationWrapper>
|
|
1226
|
+
<!-- end newsletter-subscription ------------------------------------------------------------------------------------------------------------------------------------------------------->
|
|
1227
|
+
|
|
1228
|
+
<!-- begin pager ------------------------------------------------------------------------------------------------------------------------------------------------------->
|
|
1229
|
+
<a id="section-pager"></a>
|
|
1230
|
+
<CmdWidthLimitationWrapper>
|
|
1231
|
+
<h2 class="headline-demopage">Pager</h2>
|
|
1232
|
+
<h3>Link-view</h3>
|
|
1233
|
+
<div>
|
|
1234
|
+
<p>Page {{ showPagePager }}</p>
|
|
1235
|
+
</div>
|
|
1236
|
+
<CmdPager
|
|
1224
1237
|
:pages="4"
|
|
1225
1238
|
:itemsPerPage="1"
|
|
1226
1239
|
@click="showPagePager = $event"
|
|
1227
|
-
|
|
1228
|
-
|
|
1229
|
-
|
|
1230
|
-
|
|
1231
|
-
|
|
1232
|
-
|
|
1240
|
+
/>
|
|
1241
|
+
<h3>Button-view</h3>
|
|
1242
|
+
<div>
|
|
1243
|
+
<p>Page {{ showPagePager }}</p>
|
|
1244
|
+
</div>
|
|
1245
|
+
<CmdPager
|
|
1233
1246
|
:pages="4"
|
|
1234
1247
|
:itemsPerPage="1"
|
|
1235
1248
|
link-type="button"
|
|
1236
1249
|
@click="showPagePager = $event"
|
|
1237
|
-
|
|
1238
|
-
|
|
1239
|
-
|
|
1240
|
-
|
|
1241
|
-
|
|
1242
|
-
|
|
1243
|
-
|
|
1244
|
-
|
|
1245
|
-
|
|
1246
|
-
|
|
1250
|
+
/>
|
|
1251
|
+
</CmdWidthLimitationWrapper>
|
|
1252
|
+
<!-- end pager ------------------------------------------------------------------------------------------------------------------------------------------------------->
|
|
1253
|
+
|
|
1254
|
+
<!-- begin social-networks ------------------------------------------------------------------------------------------------------------------------------------------------------->
|
|
1255
|
+
<a id="section-social-networks"></a>
|
|
1256
|
+
<CmdWidthLimitationWrapper>
|
|
1257
|
+
<h2 class="headline-demopage">Social Networks</h2>
|
|
1258
|
+
<h3>With user confirmation (buttons without gap)</h3>
|
|
1259
|
+
<CmdSocialNetworks
|
|
1247
1260
|
:networks="socialNetworksData"
|
|
1248
1261
|
:userMustAcceptDataPrivacy="true"
|
|
1249
1262
|
:useGap="false"
|
|
1250
|
-
|
|
1251
|
-
|
|
1252
|
-
|
|
1263
|
+
/>
|
|
1264
|
+
<h3>Without user confirmation (buttons with gap, text aligned right)</h3>
|
|
1265
|
+
<CmdSocialNetworks
|
|
1253
1266
|
:networks="socialNetworksData"
|
|
1254
1267
|
:userMustAcceptDataPrivacy="false"
|
|
1255
|
-
|
|
1256
|
-
|
|
1257
|
-
|
|
1268
|
+
/>
|
|
1269
|
+
<h3>Without user confirmation (buttons with gap, text aligned left)</h3>
|
|
1270
|
+
<CmdSocialNetworks
|
|
1258
1271
|
:networks="socialNetworksData"
|
|
1259
1272
|
:userMustAcceptDataPrivacy="false"
|
|
1260
1273
|
textAlign="left"
|
|
1261
|
-
|
|
1262
|
-
|
|
1263
|
-
|
|
1264
|
-
|
|
1265
|
-
|
|
1266
|
-
|
|
1267
|
-
|
|
1268
|
-
|
|
1269
|
-
|
|
1270
|
-
|
|
1274
|
+
/>
|
|
1275
|
+
</CmdWidthLimitationWrapper>
|
|
1276
|
+
<!-- end social-networks ------------------------------------------------------------------------------------------------------------------------------------------------------->
|
|
1277
|
+
|
|
1278
|
+
<!-- begin site-header ------------------------------------------------------------------------------------------------------------------------------------------------------->
|
|
1279
|
+
<a id="section-site-header"></a>
|
|
1280
|
+
<CmdWidthLimitationWrapper>
|
|
1281
|
+
<h2 class="headline-demopage">Site Header</h2>
|
|
1282
|
+
<h3>Header with navigation below logo</h3>
|
|
1283
|
+
<CmdSiteHeader
|
|
1271
1284
|
:cmdMainNavigation="navigationData"
|
|
1272
1285
|
:cmdCompanyLogo="companyLogoData"
|
|
1273
1286
|
:sticky="false"
|
|
1274
|
-
|
|
1275
|
-
|
|
1276
|
-
|
|
1287
|
+
/>
|
|
1288
|
+
<h3>Header with navigation inline with logo</h3>
|
|
1289
|
+
<CmdSiteHeader
|
|
1277
1290
|
:cmdMainNavigation="navigationData"
|
|
1278
1291
|
:cmdCompanyLogo="companyLogoData"
|
|
1279
1292
|
:sticky="false"
|
|
1280
1293
|
:navigation-inline="true"
|
|
1281
|
-
|
|
1282
|
-
|
|
1283
|
-
|
|
1284
|
-
|
|
1285
|
-
|
|
1294
|
+
/>
|
|
1295
|
+
<h3>Header with top-header-links, logo and navigation given by slot</h3>
|
|
1296
|
+
<CmdSiteHeader :sticky="false">
|
|
1297
|
+
<template v-slot:topheader>
|
|
1298
|
+
<CmdListOfLinks
|
|
1286
1299
|
:links="listOfLinksData"
|
|
1287
1300
|
orientation="horizontal"
|
|
1288
1301
|
align="right"
|
|
1289
|
-
|
|
1290
|
-
|
|
1291
|
-
|
|
1292
|
-
|
|
1302
|
+
/>
|
|
1303
|
+
</template>
|
|
1304
|
+
<template v-slot:logo>
|
|
1305
|
+
<CmdCompanyLogo
|
|
1293
1306
|
:link="companyLogoData.link"
|
|
1294
1307
|
altText="CoManD Logo"
|
|
1295
1308
|
:pathDefaultLogo="companyLogoData.pathDefaultLogo"
|
|
1296
1309
|
:pathDarkmodeLogo="companyLogoData.pathDarkmodeLogo"
|
|
1297
|
-
|
|
1298
|
-
|
|
1299
|
-
|
|
1300
|
-
|
|
1310
|
+
/>
|
|
1311
|
+
</template>
|
|
1312
|
+
<template v-slot:navigation>
|
|
1313
|
+
<CmdMainNavigation
|
|
1301
1314
|
:stretchMainItems="false"
|
|
1302
1315
|
:persistOnMobile="false"
|
|
1303
1316
|
:navigationEntries="navigationData.navigationEntries"
|
|
1304
|
-
|
|
1305
|
-
|
|
1306
|
-
|
|
1307
|
-
|
|
1308
|
-
|
|
1309
|
-
|
|
1310
|
-
|
|
1311
|
-
|
|
1312
|
-
|
|
1313
|
-
|
|
1314
|
-
|
|
1317
|
+
/>
|
|
1318
|
+
</template>
|
|
1319
|
+
</CmdSiteHeader>
|
|
1320
|
+
</CmdWidthLimitationWrapper>
|
|
1321
|
+
<!-- end site-header ------------------------------------------------------------------------------------------------------------------------------------------------------->
|
|
1322
|
+
|
|
1323
|
+
<!-- begin site-search ------------------------------------------------------------------------------------------------------------------------------------------------------->
|
|
1324
|
+
<a id="section-site-search"></a>
|
|
1325
|
+
<CmdWidthLimitationWrapper>
|
|
1326
|
+
<h2 class="headline-demopage">Site Search</h2>
|
|
1327
|
+
<CmdSiteSearch
|
|
1315
1328
|
v-model:modelValueInput1="siteSearchInput1"
|
|
1316
1329
|
v-model:modelValueInput2="siteSearchInput2"
|
|
1317
1330
|
v-model:modelValueRadius="radius"
|
|
@@ -1319,249 +1332,249 @@
|
|
|
1319
1332
|
@search="siteSearchOutput"
|
|
1320
1333
|
textLegend="Search"
|
|
1321
1334
|
:cmdFakeSelect="siteSearchFilters"
|
|
1322
|
-
|
|
1323
|
-
|
|
1324
|
-
|
|
1325
|
-
|
|
1326
|
-
|
|
1327
|
-
|
|
1328
|
-
|
|
1329
|
-
|
|
1330
|
-
|
|
1331
|
-
|
|
1332
|
-
|
|
1333
|
-
|
|
1334
|
-
|
|
1335
|
-
|
|
1336
|
-
|
|
1337
|
-
|
|
1338
|
-
|
|
1339
|
-
|
|
1340
|
-
|
|
1341
|
-
|
|
1342
|
-
|
|
1343
|
-
|
|
1344
|
-
|
|
1345
|
-
|
|
1346
|
-
|
|
1347
|
-
|
|
1348
|
-
|
|
1349
|
-
|
|
1350
|
-
|
|
1351
|
-
|
|
1352
|
-
|
|
1353
|
-
|
|
1354
|
-
|
|
1355
|
-
|
|
1356
|
-
|
|
1357
|
-
|
|
1358
|
-
|
|
1359
|
-
|
|
1360
|
-
|
|
1361
|
-
|
|
1362
|
-
|
|
1363
|
-
|
|
1364
|
-
|
|
1365
|
-
|
|
1366
|
-
|
|
1367
|
-
|
|
1368
|
-
|
|
1369
|
-
|
|
1370
|
-
|
|
1371
|
-
|
|
1372
|
-
|
|
1373
|
-
|
|
1374
|
-
|
|
1375
|
-
|
|
1376
|
-
|
|
1377
|
-
|
|
1378
|
-
|
|
1379
|
-
|
|
1380
|
-
|
|
1381
|
-
|
|
1382
|
-
|
|
1383
|
-
|
|
1384
|
-
|
|
1385
|
-
|
|
1386
|
-
|
|
1387
|
-
|
|
1388
|
-
|
|
1389
|
-
|
|
1390
|
-
|
|
1391
|
-
|
|
1392
|
-
|
|
1393
|
-
|
|
1394
|
-
|
|
1395
|
-
|
|
1396
|
-
|
|
1397
|
-
|
|
1398
|
-
|
|
1399
|
-
|
|
1400
|
-
|
|
1401
|
-
|
|
1402
|
-
|
|
1403
|
-
|
|
1404
|
-
|
|
1405
|
-
|
|
1406
|
-
|
|
1407
|
-
|
|
1408
|
-
|
|
1409
|
-
|
|
1410
|
-
|
|
1411
|
-
|
|
1412
|
-
|
|
1413
|
-
|
|
1414
|
-
|
|
1415
|
-
|
|
1416
|
-
|
|
1417
|
-
|
|
1418
|
-
|
|
1419
|
-
|
|
1420
|
-
|
|
1421
|
-
|
|
1422
|
-
|
|
1423
|
-
|
|
1335
|
+
/>
|
|
1336
|
+
</CmdWidthLimitationWrapper>
|
|
1337
|
+
<!-- end site-search ------------------------------------------------------------------------------------------------------------------------------------------------------->
|
|
1338
|
+
|
|
1339
|
+
<!-- begin slideshow ------------------------------------------------------------------------------------------------------------------------------------------------------->
|
|
1340
|
+
<a id="section-slideshow"></a>
|
|
1341
|
+
<CmdWidthLimitationWrapper>
|
|
1342
|
+
<h2 class="headline-demopage">Slideshow</h2>
|
|
1343
|
+
<CmdSlideshow :slideshow-items="slideshowData" :showCounter="true" :autoplay="true"/>
|
|
1344
|
+
</CmdWidthLimitationWrapper>
|
|
1345
|
+
<!-- end slideshow ------------------------------------------------------------------------------------------------------------------------------------------------------->
|
|
1346
|
+
|
|
1347
|
+
<!-- begin system-message ------------------------------------------------------------------------------------------------------------------------------------------------------->
|
|
1348
|
+
<a id="section-system-message"></a>
|
|
1349
|
+
<CmdWidthLimitationWrapper>
|
|
1350
|
+
<h2 class="headline-demopage">System Message</h2>
|
|
1351
|
+
<CmdSystemMessage validationStatus="error"
|
|
1352
|
+
:fullWidth="true"
|
|
1353
|
+
systemMessage="This is an error message!"
|
|
1354
|
+
:iconMessage="{iconClass: 'icon-error-circle', show: true}">
|
|
1355
|
+
<ul>
|
|
1356
|
+
<li>Error #1</li>
|
|
1357
|
+
<li>Error #2</li>
|
|
1358
|
+
<li>Error #3</li>
|
|
1359
|
+
</ul>
|
|
1360
|
+
</CmdSystemMessage>
|
|
1361
|
+
<CmdSystemMessage validationStatus="warning"
|
|
1362
|
+
:fullWidth="true"
|
|
1363
|
+
systemMessage="This is a warning message!">
|
|
1364
|
+
<p>This is additional text!</p>
|
|
1365
|
+
</CmdSystemMessage>
|
|
1366
|
+
<CmdSystemMessage validationStatus="success"
|
|
1367
|
+
:fullWidth="true"
|
|
1368
|
+
systemMessage="This is a success message!"
|
|
1369
|
+
:iconMessage="{iconClass: 'icon-check-circle', show: true}">
|
|
1370
|
+
<p>This is additional text!</p>
|
|
1371
|
+
</CmdSystemMessage>
|
|
1372
|
+
<CmdSystemMessage validationStatus="info"
|
|
1373
|
+
:fullWidth="true"
|
|
1374
|
+
systemMessage="This is an info message!"
|
|
1375
|
+
:iconMessage="{iconClass: 'icon-info-circle', show: true}">
|
|
1376
|
+
<p>This is additional text!</p>
|
|
1377
|
+
</CmdSystemMessage>
|
|
1378
|
+
</CmdWidthLimitationWrapper>
|
|
1379
|
+
<!-- end system-message ------------------------------------------------------------------------------------------------------------------------------------------------------->
|
|
1380
|
+
|
|
1381
|
+
<!-- begin tables ------------------------------------------------------------------------------------------------------------------------------------------------------->
|
|
1382
|
+
<a id="section-tables"></a>
|
|
1383
|
+
<CmdWidthLimitationWrapper>
|
|
1384
|
+
<h2 class="headline-demopage">Tables</h2>
|
|
1385
|
+
<h3>Table as wide as its content (with caption)</h3>
|
|
1386
|
+
<CmdTable :collapsible="true" :fullWidthOnDefault="false" :userCanToggleWidth="true"
|
|
1387
|
+
:table-data="tableDataSmall"/>
|
|
1388
|
+
<h3>Table as wide as its content (without caption)</h3>
|
|
1389
|
+
<CmdTable :collapsible="true" :fullWidthOnDefault="false" :userCanToggleWidth="true"
|
|
1390
|
+
:caption="{ text: 'Hidden caption', show: false}" :table-data="tableDataSmall"/>
|
|
1391
|
+
<h3>Table as wide as possible</h3>
|
|
1392
|
+
<CmdTable :collapsible="true" :fullWidthOnDefault="false" :userCanToggleWidth="true"
|
|
1393
|
+
:table-data="tableDataLarge"/>
|
|
1394
|
+
</CmdWidthLimitationWrapper>
|
|
1395
|
+
<!-- end tables ------------------------------------------------------------------------------------------------------------------------------------------------------->
|
|
1396
|
+
|
|
1397
|
+
<!-- begin tabs ------------------------------------------------------------------------------------------------------------------------------------------------------->
|
|
1398
|
+
<a id="section-tabs"></a>
|
|
1399
|
+
<CmdWidthLimitationWrapper>
|
|
1400
|
+
<h2 class="headline-demopage">Tabs</h2>
|
|
1401
|
+
<h3>Tabs with content from json-file</h3>
|
|
1402
|
+
<CmdTabs :stretchTabs="false" :tabs="tabsData"/>
|
|
1403
|
+
<h3>Tabs with HTML-content (given by slot))</h3>
|
|
1404
|
+
<CmdTabs :stretchTabs="true" :tabs="[{name: 'Tab 1'}, {name: 'Tab 2'}, {name: 'Tab 3'}]"
|
|
1405
|
+
:useSlot="true">
|
|
1406
|
+
<template v-slot:tab-content-0>
|
|
1407
|
+
<h4>Tab 1 headline</h4>
|
|
1408
|
+
<p>Content</p>
|
|
1409
|
+
</template>
|
|
1410
|
+
<template v-slot:tab-content-1>
|
|
1411
|
+
<h4>Tab 2</h4>
|
|
1412
|
+
<p>Content</p>
|
|
1413
|
+
<p>Content</p>
|
|
1414
|
+
</template>
|
|
1415
|
+
<template v-slot:tab-content-2>
|
|
1416
|
+
<h4>Tab 3</h4>
|
|
1417
|
+
<p>Content</p>
|
|
1418
|
+
<p>Content</p>
|
|
1419
|
+
<p>Content</p>
|
|
1420
|
+
</template>
|
|
1421
|
+
</CmdTabs>
|
|
1422
|
+
</CmdWidthLimitationWrapper>
|
|
1423
|
+
<!-- end tabs ------------------------------------------------------------------------------------------------------------------------------------------------------->
|
|
1424
|
+
|
|
1425
|
+
<!-- begin textblock ------------------------------------------------------------------------------------------------------------------------------------------------------->
|
|
1426
|
+
<a id="section-text-block"></a>
|
|
1427
|
+
<CmdWidthLimitationWrapper>
|
|
1428
|
+
<h2 class="headline-demopage">Text-Block</h2>
|
|
1429
|
+
<div class="flex-container">
|
|
1430
|
+
<CmdTextBlock :cmdHeadline="{headlineText: 'Headline', headlineLevel: 3}"
|
|
1431
|
+
textContent="Text given as text only"/>
|
|
1432
|
+
<CmdTextBlock :cmdHeadline="{headlineText: 'Headline', headlineLevel: 3}"
|
|
1433
|
+
htmlContent="<p>Text given as html-content</p>"/>
|
|
1434
|
+
</div>
|
|
1435
|
+
</CmdWidthLimitationWrapper>
|
|
1436
|
+
<!-- end textblock ------------------------------------------------------------------------------------------------------------------------------------------------------->
|
|
1424
1437
|
|
|
1425
|
-
|
|
1426
|
-
|
|
1427
|
-
|
|
1428
|
-
|
|
1429
|
-
|
|
1430
|
-
|
|
1438
|
+
<!-- begin thumbnail-scroller ------------------------------------------------------------------------------------------------------------------------------------------------------->
|
|
1439
|
+
<a id="section-thumbnail-scroller"></a>
|
|
1440
|
+
<CmdWidthLimitationWrapper>
|
|
1441
|
+
<h2 class="headline-demopage">Thumbnail-Scroller</h2>
|
|
1442
|
+
<div class="inline-size">
|
|
1443
|
+
<h3>Thumbnail-Scroller with images (opens fancybox)</h3>
|
|
1431
1444
|
|
|
1432
|
-
|
|
1445
|
+
<CmdThumbnailScroller
|
|
1433
1446
|
:thumbnail-scroller-items="thumbnailScrollerImagesData"
|
|
1434
|
-
|
|
1435
|
-
|
|
1436
|
-
|
|
1447
|
+
/>
|
|
1448
|
+
<h3>Thumbnail-Scroller with text (opens url)</h3>
|
|
1449
|
+
<CmdThumbnailScroller
|
|
1437
1450
|
:thumbnail-scroller-items="thumbnailScrollerTextData"
|
|
1438
1451
|
contentType="text"
|
|
1439
1452
|
executeOnClick="url"
|
|
1440
1453
|
:fullWidth="true"
|
|
1441
|
-
|
|
1442
|
-
|
|
1443
|
-
|
|
1454
|
+
/>
|
|
1455
|
+
<h3>Thumbnail-Scroller with text (emits click-event)</h3>
|
|
1456
|
+
<CmdThumbnailScroller
|
|
1444
1457
|
:thumbnail-scroller-items="thumbnailScrollerTextData"
|
|
1445
1458
|
contentType="text"
|
|
1446
1459
|
executeOnClick="emit"
|
|
1447
1460
|
@click="onClick"
|
|
1448
1461
|
:largeIcons="true"
|
|
1449
1462
|
:fullWidth="true"
|
|
1463
|
+
/>
|
|
1464
|
+
</div>
|
|
1465
|
+
</CmdWidthLimitationWrapper>
|
|
1466
|
+
<!-- end thumbnail-scroller ------------------------------------------------------------------------------------------------------------------------------------------------------->
|
|
1467
|
+
|
|
1468
|
+
<!-- begin tooltip ------------------------------------------------------------------------------------------------------------------------------------------------------->
|
|
1469
|
+
<a id="section-tooltip"></a>
|
|
1470
|
+
<CmdWidthLimitationWrapper>
|
|
1471
|
+
<h2 class="headline-demopage">Tooltip</h2>
|
|
1472
|
+
<p>
|
|
1473
|
+
<a href="#" @click.prevent id="show-on-hover">Show tooltip on hover!</a><br/>
|
|
1474
|
+
<a href="#" @click.prevent id="show-with-delay">Show tooltip on hover with delay!</a><br/>
|
|
1475
|
+
<a href="#" @click.prevent id="show-on-click" title="Native tooltip">Show tooltip on click!</a>
|
|
1476
|
+
</p>
|
|
1477
|
+
<CmdTooltip related-id="show-on-hover">
|
|
1478
|
+
Tooltip on hover
|
|
1479
|
+
</CmdTooltip>
|
|
1480
|
+
<CmdTooltip :delay-to-show-tooltip="2000" related-id="show-with-delay">
|
|
1481
|
+
Tooltip on hover with delay
|
|
1482
|
+
</CmdTooltip>
|
|
1483
|
+
<CmdTooltip related-id="show-on-click" :toggle-visibility-by-click="true">
|
|
1484
|
+
Tooltip on click
|
|
1485
|
+
</CmdTooltip>
|
|
1486
|
+
</CmdWidthLimitationWrapper>
|
|
1487
|
+
<!-- end tooltip ------------------------------------------------------------------------------------------------------------------------------------------------------->
|
|
1488
|
+
|
|
1489
|
+
<!-- begin upload-form ------------------------------------------------------------------------------------------------------------------------------------------------------->
|
|
1490
|
+
<a id="section-upload-form"></a>
|
|
1491
|
+
<CmdWidthLimitationWrapper>
|
|
1492
|
+
<h2 class="headline-demopage">Upload-Form</h2>
|
|
1493
|
+
<h3>Simple mode</h3>
|
|
1494
|
+
<CmdUploadForm :enableDragAndDrop="true"
|
|
1495
|
+
:allowedFileExtensions="['jpg', 'png']"
|
|
1496
|
+
:allowMultipleFileUploads="true"
|
|
1497
|
+
:advancedMode="false"
|
|
1498
|
+
textLegend="Simple upload form"
|
|
1499
|
+
@error="showError"
|
|
1500
|
+
:uploadOptions="{url: 'http://localhost:8888'}"
|
|
1450
1501
|
/>
|
|
1451
|
-
|
|
1452
|
-
|
|
1453
|
-
|
|
1454
|
-
|
|
1455
|
-
|
|
1456
|
-
|
|
1457
|
-
|
|
1458
|
-
|
|
1459
|
-
|
|
1460
|
-
|
|
1461
|
-
|
|
1462
|
-
<a href="#" @click.prevent id="show-on-click" title="Native tooltip">Show tooltip on click!</a>
|
|
1463
|
-
</p>
|
|
1464
|
-
<CmdTooltip related-id="show-on-hover">
|
|
1465
|
-
Tooltip on hover
|
|
1466
|
-
</CmdTooltip>
|
|
1467
|
-
<CmdTooltip :delay-to-show-tooltip="2000" related-id="show-with-delay">
|
|
1468
|
-
Tooltip on hover with delay
|
|
1469
|
-
</CmdTooltip>
|
|
1470
|
-
<CmdTooltip related-id="show-on-click" :toggle-visibility-by-click="true">
|
|
1471
|
-
Tooltip on click
|
|
1472
|
-
</CmdTooltip>
|
|
1473
|
-
</CmdWidthLimitationWrapper>
|
|
1474
|
-
<!-- end tooltip ------------------------------------------------------------------------------------------------------------------------------------------------------->
|
|
1475
|
-
|
|
1476
|
-
<!-- begin upload-form ------------------------------------------------------------------------------------------------------------------------------------------------------->
|
|
1477
|
-
<a id="section-upload-form"></a>
|
|
1478
|
-
<CmdWidthLimitationWrapper>
|
|
1479
|
-
<h2 class="headline-demopage">Upload-Form</h2>
|
|
1480
|
-
<h3>Simple mode</h3>
|
|
1481
|
-
<CmdUploadForm :enableDragAndDrop="true"
|
|
1482
|
-
:allowedFileExtensions="['jpg', 'png']"
|
|
1483
|
-
:allowMultipleFileUploads="true"
|
|
1484
|
-
:advancedMode="false"
|
|
1485
|
-
textLegend="Simple upload form"
|
|
1486
|
-
@error="showError"
|
|
1487
|
-
:uploadOptions="{url: 'http://localhost:8888'}"
|
|
1488
|
-
/>
|
|
1489
|
-
<h3>Advanced mode</h3>
|
|
1490
|
-
<CmdUploadForm :cmdHeadlineFieldset="{headlineText: 'Select files to upload', headlineLevel: 3}"
|
|
1491
|
-
:enableDragAndDrop="true"
|
|
1492
|
-
:allowedFileExtensions="['jpg', 'png']"
|
|
1493
|
-
:allowMultipleFileUploads="true"
|
|
1494
|
-
textLegend="Advanced upload form"
|
|
1495
|
-
:uploadOptions="{url: 'http://localhost:8888'}"
|
|
1496
|
-
/>
|
|
1497
|
-
</CmdWidthLimitationWrapper>
|
|
1498
|
-
<!-- end upload-form ------------------------------------------------------------------------------------------------------------------------------------------------------->
|
|
1499
|
-
</main>
|
|
1500
|
-
|
|
1501
|
-
<!-- begin site-footer ------------------------------------------------------------------------------------------------------------------------------------------------------->
|
|
1502
|
-
<CmdSiteFooter>
|
|
1503
|
-
<!-- begin switch-language ------------------------------------------------------------------------------------------------------------------------------------------------------->
|
|
1504
|
-
<CmdSwitchLanguage :languages="languagesData" @click="doSomething"/>
|
|
1505
|
-
<!-- end switch-languager ------------------------------------------------------------------------------------------------------------------------------------------------------->
|
|
1506
|
-
|
|
1507
|
-
<div class="flex-container">
|
|
1508
|
-
<!-- begin list-of-links ------------------------------------------------------------------------------------------------------------------------------------------------------->
|
|
1509
|
-
<CmdListOfLinks :links="listOfLinksData"
|
|
1510
|
-
:cmdHeadline="{headlineText: 'List of links', headlineLevel: 6}"
|
|
1511
|
-
/>
|
|
1512
|
-
<!-- end list-of-links ------------------------------------------------------------------------------------------------------------------------------------------------------->
|
|
1502
|
+
<h3>Advanced mode</h3>
|
|
1503
|
+
<CmdUploadForm :cmdHeadlineFieldset="{headlineText: 'Select files to upload', headlineLevel: 3}"
|
|
1504
|
+
:enableDragAndDrop="true"
|
|
1505
|
+
:allowedFileExtensions="['jpg', 'png']"
|
|
1506
|
+
:allowMultipleFileUploads="true"
|
|
1507
|
+
textLegend="Advanced upload form"
|
|
1508
|
+
:uploadOptions="{url: 'http://localhost:8888'}"
|
|
1509
|
+
/>
|
|
1510
|
+
</CmdWidthLimitationWrapper>
|
|
1511
|
+
<!-- end upload-form ------------------------------------------------------------------------------------------------------------------------------------------------------->
|
|
1512
|
+
</main>
|
|
1513
1513
|
|
|
1514
|
-
|
|
1515
|
-
|
|
1516
|
-
|
|
1517
|
-
|
|
1518
|
-
|
|
1519
|
-
:checkInterval="0"
|
|
1520
|
-
/>
|
|
1521
|
-
<!-- end opening-hours ------------------------------------------------------------------------------------------------------------------------------------------------------->
|
|
1514
|
+
<!-- begin site-footer ------------------------------------------------------------------------------------------------------------------------------------------------------->
|
|
1515
|
+
<CmdSiteFooter>
|
|
1516
|
+
<!-- begin switch-language ------------------------------------------------------------------------------------------------------------------------------------------------------->
|
|
1517
|
+
<CmdSwitchLanguage :languages="languagesData" @click="doSomething"/>
|
|
1518
|
+
<!-- end switch-languager ------------------------------------------------------------------------------------------------------------------------------------------------------->
|
|
1522
1519
|
|
|
1523
|
-
|
|
1524
|
-
|
|
1525
|
-
|
|
1526
|
-
|
|
1527
|
-
|
|
1528
|
-
|
|
1529
|
-
|
|
1530
|
-
|
|
1531
|
-
|
|
1520
|
+
<div class="flex-container">
|
|
1521
|
+
<!-- begin list-of-links ------------------------------------------------------------------------------------------------------------------------------------------------------->
|
|
1522
|
+
<CmdListOfLinks :links="listOfLinksData"
|
|
1523
|
+
:cmdHeadline="{headlineText: 'List of links', headlineLevel: 6}"
|
|
1524
|
+
/>
|
|
1525
|
+
<!-- end list-of-links ------------------------------------------------------------------------------------------------------------------------------------------------------->
|
|
1526
|
+
|
|
1527
|
+
<!-- begin opening-hours ------------------------------------------------------------------------------------------------------------------------------------------------------->
|
|
1528
|
+
<CmdOpeningHours :openingHours="openingHoursData"
|
|
1529
|
+
:cmdHeadline="{headlineText: 'Opening hours', headlineLevel: 6}"
|
|
1530
|
+
textHolidaysClosed="Closed on holidays"
|
|
1531
|
+
textMiscInfo="Miscellaneous information"
|
|
1532
|
+
:checkInterval="0"
|
|
1533
|
+
/>
|
|
1534
|
+
<!-- end opening-hours ------------------------------------------------------------------------------------------------------------------------------------------------------->
|
|
1535
|
+
|
|
1536
|
+
<!-- begin address-data ------------------------------------------------------------------------------------------------------------------------------------------------------->
|
|
1537
|
+
<CmdAddressData :addressData="addressData"
|
|
1538
|
+
:linkGoogleMaps="false"
|
|
1539
|
+
:cmdHeadline="{headlineText: 'Address data', headlineLevel: 6}"
|
|
1540
|
+
/>
|
|
1541
|
+
<!-- end address-data ------------------------------------------------------------------------------------------------------------------------------------------------------->
|
|
1542
|
+
</div>
|
|
1543
|
+
</CmdSiteFooter>
|
|
1544
|
+
<!-- end site-footer ------------------------------------------------------------------------------------------------------------------------------------------------------->
|
|
1532
1545
|
|
|
1533
|
-
|
|
1534
|
-
|
|
1535
|
-
|
|
1546
|
+
<!-- begin copyright-information ------------------------------------------------------------------------------------------------------------------------------------------------------->
|
|
1547
|
+
<CmdCopyrightInformation/>
|
|
1548
|
+
<!-- end copyright-information ------------------------------------------------------------------------------------------------------------------------------------------------------->
|
|
1536
1549
|
|
|
1537
|
-
|
|
1538
|
-
|
|
1550
|
+
<!-- begin fancy-box ------------------------------------------------------------------------------------------------------------------------------------------------------->
|
|
1551
|
+
<CmdFancyBox
|
|
1539
1552
|
:show="fancyBoxCookieDisclaimer"
|
|
1540
1553
|
:fancyboxOptions="{}"
|
|
1541
1554
|
:allowEscapeKey="false"
|
|
1542
1555
|
:cmdHeadline="{show: true, headlineText: 'Cookie Disclaimer', headlineLevel: 2}"
|
|
1543
1556
|
ariaLabelText="Cookie Disclaimer"
|
|
1544
|
-
|
|
1545
|
-
|
|
1546
|
-
|
|
1557
|
+
>
|
|
1558
|
+
<!-- begin cookie-disclaimer ------------------------------------------------------------------------------------------------------------------------------------------------------->
|
|
1559
|
+
<CmdCookieDisclaimer
|
|
1547
1560
|
:cookieOptions="cookieDisclaimerData"
|
|
1548
1561
|
buttonLabelAcceptAllCookies="Accept all cookies"
|
|
1549
1562
|
buttonLabelAcceptCurrentSettings="Accept current settings"
|
|
1550
1563
|
@closeCookieDisclaimer="closeCookieDisclaimer"
|
|
1551
1564
|
v-model="acceptedCookies"
|
|
1552
1565
|
:cmdHeadlineCookieDisclaimer="{ show: false }">
|
|
1553
|
-
|
|
1554
|
-
|
|
1555
|
-
|
|
1556
|
-
|
|
1557
|
-
|
|
1558
|
-
|
|
1559
|
-
|
|
1560
|
-
|
|
1561
|
-
|
|
1562
|
-
|
|
1563
|
-
|
|
1564
|
-
|
|
1566
|
+
<template #privacy-text>
|
|
1567
|
+
<p>
|
|
1568
|
+
<strong>
|
|
1569
|
+
By browsing this web site you accept the usage and saving of anonymous data!
|
|
1570
|
+
</strong>
|
|
1571
|
+
</p>
|
|
1572
|
+
</template>
|
|
1573
|
+
</CmdCookieDisclaimer>
|
|
1574
|
+
<!-- end cookie-disclaimer ------------------------------------------------------------------------------------------------------------------------------------------------------->
|
|
1575
|
+
</CmdFancyBox>
|
|
1576
|
+
<!-- end fancy-box ------------------------------------------------------------------------------------------------------------------------------------------------------->
|
|
1577
|
+
</div><!-- end #page-wrapper -->
|
|
1565
1578
|
</div>
|
|
1566
1579
|
</template>
|
|
1567
1580
|
|
|
@@ -1888,15 +1901,15 @@ export default {
|
|
|
1888
1901
|
|
|
1889
1902
|
<style lang="scss">
|
|
1890
1903
|
.list-status {
|
|
1891
|
-
|
|
1892
|
-
|
|
1893
|
-
|
|
1894
|
-
|
|
1895
|
-
|
|
1904
|
+
.active {
|
|
1905
|
+
color: var(--text-color);
|
|
1906
|
+
text-decoration: none;
|
|
1907
|
+
background: none;
|
|
1908
|
+
}
|
|
1896
1909
|
}
|
|
1897
1910
|
|
|
1898
1911
|
main .cmd-width-limitation-wrapper:not(:last-of-type) {
|
|
1899
|
-
|
|
1900
|
-
|
|
1912
|
+
border-bottom: var(--default-border);
|
|
1913
|
+
border-style: dashed;
|
|
1901
1914
|
}
|
|
1902
1915
|
</style>
|