@chayns-components/core 5.0.33 → 5.0.34
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/AI_USAGE.md +4738 -0
- package/package.json +4 -3
package/AI_USAGE.md
ADDED
|
@@ -0,0 +1,4738 @@
|
|
|
1
|
+
# @chayns-components/core
|
|
2
|
+
|
|
3
|
+
React component package providing 44 documented components for chayns applications.
|
|
4
|
+
|
|
5
|
+
Documented components: `Accordion`, `AmountControl`, `AnimatedNumber`, `Badge`, `Button`, `Checkbox`, `ComboBox`, `ContentCard`, `ContextMenu`, `ExpandableContent`, `FileInput`, `FileList`, `FileSelect`, `Filter`, `FilterButtons`, `GridImage`, `GroupedImage`, `HighlightSlider`, `Icon`, `Input`, `List`, `MentionFinder`, `MultiActionButton`, `NumberInput`, `Popup`, `ProgressBar`, `RadioButton`, `ScrollView`, `SearchBox`, `SearchInput`, `SelectButton`, `SetupWizard`, `SetupWizardItem`, `SharingBar`, `SharingButton`, `Signature`, `Slider`, `SliderButton`, `SmallWaitCursor`, `TagInput`, `TextArea`, `Tooltip`, `Truncation`, `VerificationBadge`.
|
|
6
|
+
|
|
7
|
+
## Import
|
|
8
|
+
|
|
9
|
+
```ts
|
|
10
|
+
import { Accordion, AmountControl, AnimatedNumber } from '@chayns-components/core';
|
|
11
|
+
```
|
|
12
|
+
|
|
13
|
+
## Typical Usage
|
|
14
|
+
|
|
15
|
+
```tsx
|
|
16
|
+
<Accordion />
|
|
17
|
+
```
|
|
18
|
+
|
|
19
|
+
## Components
|
|
20
|
+
|
|
21
|
+
- `Accordion`
|
|
22
|
+
- `AmountControl`
|
|
23
|
+
- `AnimatedNumber`
|
|
24
|
+
- `Badge`
|
|
25
|
+
- `Button`
|
|
26
|
+
- `Checkbox`
|
|
27
|
+
- `ComboBox`
|
|
28
|
+
- `ContentCard`
|
|
29
|
+
- `ContextMenu`
|
|
30
|
+
- `ExpandableContent`
|
|
31
|
+
- `FileInput`
|
|
32
|
+
- `FileList`
|
|
33
|
+
- `FileSelect`
|
|
34
|
+
- `Filter`
|
|
35
|
+
- `FilterButtons`
|
|
36
|
+
- `GridImage`
|
|
37
|
+
- `GroupedImage`
|
|
38
|
+
- `HighlightSlider`
|
|
39
|
+
- `Icon`
|
|
40
|
+
- `Input`
|
|
41
|
+
- `List`
|
|
42
|
+
- `MentionFinder`
|
|
43
|
+
- `MultiActionButton`
|
|
44
|
+
- `NumberInput`
|
|
45
|
+
- `Popup`
|
|
46
|
+
- `ProgressBar`
|
|
47
|
+
- `RadioButton`
|
|
48
|
+
- `ScrollView`
|
|
49
|
+
- `SearchBox`
|
|
50
|
+
- `SearchInput`
|
|
51
|
+
- `SelectButton`
|
|
52
|
+
- `SetupWizard`
|
|
53
|
+
- `SetupWizardItem`
|
|
54
|
+
- `SharingBar`
|
|
55
|
+
- `SharingButton`
|
|
56
|
+
- `Signature`
|
|
57
|
+
- `Slider`
|
|
58
|
+
- `SliderButton`
|
|
59
|
+
- `SmallWaitCursor`
|
|
60
|
+
- `TagInput`
|
|
61
|
+
- `TextArea`
|
|
62
|
+
- `Tooltip`
|
|
63
|
+
- `Truncation`
|
|
64
|
+
- `VerificationBadge`
|
|
65
|
+
|
|
66
|
+
## Accordion
|
|
67
|
+
|
|
68
|
+
`Accordion` is exported by `@chayns-components/core` and should be imported from the public package entry point.
|
|
69
|
+
|
|
70
|
+
### Import
|
|
71
|
+
|
|
72
|
+
```ts
|
|
73
|
+
import { Accordion } from '@chayns-components/core';
|
|
74
|
+
```
|
|
75
|
+
|
|
76
|
+
### Examples
|
|
77
|
+
|
|
78
|
+
#### Dynamic Loading Template
|
|
79
|
+
|
|
80
|
+
```tsx
|
|
81
|
+
<Accordion />
|
|
82
|
+
```
|
|
83
|
+
|
|
84
|
+
#### General
|
|
85
|
+
|
|
86
|
+
```tsx
|
|
87
|
+
<Accordion
|
|
88
|
+
title={'Lorem ipsum dolor sit amet, consetetur sadipscing elitr'}
|
|
89
|
+
>
|
|
90
|
+
{
|
|
91
|
+
<AccordionContent>
|
|
92
|
+
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor
|
|
93
|
+
invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et
|
|
94
|
+
accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata
|
|
95
|
+
sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur
|
|
96
|
+
sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna
|
|
97
|
+
aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea
|
|
98
|
+
rebum.
|
|
99
|
+
</AccordionContent>
|
|
100
|
+
}
|
|
101
|
+
</Accordion>
|
|
102
|
+
```
|
|
103
|
+
|
|
104
|
+
#### Controlled Accordion
|
|
105
|
+
|
|
106
|
+
```tsx
|
|
107
|
+
<Accordion
|
|
108
|
+
title={'Lorem ipsum dolor sit amet, consetetur sadipscing elitr'}
|
|
109
|
+
>
|
|
110
|
+
{
|
|
111
|
+
<AccordionContent>
|
|
112
|
+
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor
|
|
113
|
+
invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et
|
|
114
|
+
accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata
|
|
115
|
+
sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur
|
|
116
|
+
sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna
|
|
117
|
+
aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea
|
|
118
|
+
rebum.
|
|
119
|
+
</AccordionContent>
|
|
120
|
+
}
|
|
121
|
+
</Accordion>
|
|
122
|
+
```
|
|
123
|
+
|
|
124
|
+
#### Multiple Accordions
|
|
125
|
+
|
|
126
|
+
```tsx
|
|
127
|
+
<Accordion />
|
|
128
|
+
```
|
|
129
|
+
|
|
130
|
+
#### Dynamic Loading
|
|
131
|
+
|
|
132
|
+
```tsx
|
|
133
|
+
<Accordion />
|
|
134
|
+
```
|
|
135
|
+
|
|
136
|
+
#### Wrapped Accordions
|
|
137
|
+
|
|
138
|
+
```tsx
|
|
139
|
+
<Accordion
|
|
140
|
+
title={'Lorem ipsum dolor sit amet'}
|
|
141
|
+
>
|
|
142
|
+
{
|
|
143
|
+
[
|
|
144
|
+
<AccordionContent>
|
|
145
|
+
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor
|
|
146
|
+
invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et
|
|
147
|
+
accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata
|
|
148
|
+
sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur
|
|
149
|
+
sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna
|
|
150
|
+
aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea
|
|
151
|
+
rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor si amet.
|
|
152
|
+
</AccordionContent>,
|
|
153
|
+
<AccordionGroup>
|
|
154
|
+
<Accordion
|
|
155
|
+
key="first"
|
|
156
|
+
title="Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor
|
|
157
|
+
invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua"
|
|
158
|
+
>
|
|
159
|
+
<AccordionContent>
|
|
160
|
+
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod
|
|
161
|
+
tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
|
|
162
|
+
</AccordionContent>
|
|
163
|
+
</Accordion>
|
|
164
|
+
<Accordion key="second" title="Justo duo dolores et ea rebum">
|
|
165
|
+
<AccordionContent>
|
|
166
|
+
At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd
|
|
167
|
+
gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum
|
|
168
|
+
dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor
|
|
169
|
+
invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
|
|
170
|
+
</AccordionContent>
|
|
171
|
+
<AccordionGroup>
|
|
172
|
+
<Accordion key="first_wrapped" title="At vero eos et accusam">
|
|
173
|
+
<AccordionContent>
|
|
174
|
+
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy
|
|
175
|
+
eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam
|
|
176
|
+
voluptua.
|
|
177
|
+
</AccordionContent>
|
|
178
|
+
</Accordion>
|
|
179
|
+
<Accordion key="second_wrapped" title="Justo duo dolores et ea rebum">
|
|
180
|
+
<AccordionContent>
|
|
181
|
+
At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd
|
|
182
|
+
gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem
|
|
183
|
+
ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy
|
|
184
|
+
eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam
|
|
185
|
+
voluptua.
|
|
186
|
+
</AccordionContent>
|
|
187
|
+
<AccordionGroup>
|
|
188
|
+
<Accordion key="first_deep_wrapped" title="At vero eos et accusam">
|
|
189
|
+
<AccordionContent>
|
|
190
|
+
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed
|
|
191
|
+
diam nonumy eirmod tempor invidunt ut labore et dolore magna
|
|
192
|
+
aliquyam erat, sed diam voluptua.
|
|
193
|
+
</AccordionContent>
|
|
194
|
+
</Accordion>
|
|
195
|
+
<Accordion
|
|
196
|
+
key="first_deep_wrapped"
|
|
197
|
+
title="Justo duo dolores et ea rebum"
|
|
198
|
+
>
|
|
199
|
+
<AccordionContent>
|
|
200
|
+
At vero eos et accusam et justo duo dolores et ea rebum. Stet
|
|
201
|
+
clita kasd gubergren, no sea takimata sanctus est Lorem ipsum
|
|
202
|
+
dolor sit amet. Lorem ipsum dolor sit amet, consetetur
|
|
203
|
+
sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut
|
|
204
|
+
labore et dolore magna aliquyam erat, sed diam voluptua.
|
|
205
|
+
</AccordionContent>
|
|
206
|
+
</Accordion>
|
|
207
|
+
</AccordionGroup>
|
|
208
|
+
</Accordion>
|
|
209
|
+
</AccordionGroup>
|
|
210
|
+
</Accordion>
|
|
211
|
+
</AccordionGroup>,
|
|
212
|
+
]
|
|
213
|
+
}
|
|
214
|
+
</Accordion>
|
|
215
|
+
```
|
|
216
|
+
|
|
217
|
+
#### Accordion With Badge
|
|
218
|
+
|
|
219
|
+
```tsx
|
|
220
|
+
<Accordion
|
|
221
|
+
rightElement={<Badge>10.000 Euro</Badge>}
|
|
222
|
+
title={'Lorem ipsum dolor sit amet'}
|
|
223
|
+
>
|
|
224
|
+
{
|
|
225
|
+
<AccordionContent>
|
|
226
|
+
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor
|
|
227
|
+
invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et
|
|
228
|
+
accusam et justo duo dolores et ea rebum.
|
|
229
|
+
</AccordionContent>
|
|
230
|
+
}
|
|
231
|
+
</Accordion>
|
|
232
|
+
```
|
|
233
|
+
|
|
234
|
+
#### Accordion With Title Element
|
|
235
|
+
|
|
236
|
+
```tsx
|
|
237
|
+
<Accordion
|
|
238
|
+
title={'Lorem ipsum dolor sit amet'}
|
|
239
|
+
titleElement={<Icon icons={['fa fa-download']} />}
|
|
240
|
+
>
|
|
241
|
+
{
|
|
242
|
+
<AccordionContent>
|
|
243
|
+
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor
|
|
244
|
+
invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et
|
|
245
|
+
accusam et justo duo dolores et ea rebum.
|
|
246
|
+
</AccordionContent>
|
|
247
|
+
}
|
|
248
|
+
</Accordion>
|
|
249
|
+
```
|
|
250
|
+
|
|
251
|
+
#### Accordion With Search
|
|
252
|
+
|
|
253
|
+
```tsx
|
|
254
|
+
<Accordion
|
|
255
|
+
onSearchChange={() => {}}
|
|
256
|
+
searchPlaceholder={'Suchen'}
|
|
257
|
+
title={'Lorem ipsum dolor sit amet'}
|
|
258
|
+
>
|
|
259
|
+
{
|
|
260
|
+
<AccordionContent>
|
|
261
|
+
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor
|
|
262
|
+
invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et
|
|
263
|
+
accusam et justo duo dolores et ea rebum.
|
|
264
|
+
</AccordionContent>
|
|
265
|
+
}
|
|
266
|
+
</Accordion>
|
|
267
|
+
```
|
|
268
|
+
|
|
269
|
+
#### Accordion With Badge And Search
|
|
270
|
+
|
|
271
|
+
```tsx
|
|
272
|
+
<Accordion
|
|
273
|
+
onSearchChange={() => {}}
|
|
274
|
+
rightElement={<Badge>124</Badge>}
|
|
275
|
+
searchPlaceholder={'Suchen'}
|
|
276
|
+
title={'Lorem ipsum dolor sit amet'}
|
|
277
|
+
>
|
|
278
|
+
{
|
|
279
|
+
<AccordionContent>
|
|
280
|
+
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor
|
|
281
|
+
invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et
|
|
282
|
+
accusam et justo duo dolores et ea rebum.
|
|
283
|
+
</AccordionContent>
|
|
284
|
+
}
|
|
285
|
+
</Accordion>
|
|
286
|
+
```
|
|
287
|
+
|
|
288
|
+
#### Disabled Accordion
|
|
289
|
+
|
|
290
|
+
```tsx
|
|
291
|
+
<Accordion
|
|
292
|
+
isDisabled
|
|
293
|
+
title={'Lorem ipsum dolor sit amet'}
|
|
294
|
+
>
|
|
295
|
+
{
|
|
296
|
+
<AccordionContent>
|
|
297
|
+
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor
|
|
298
|
+
invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et
|
|
299
|
+
accusam et justo duo dolores et ea rebum.
|
|
300
|
+
</AccordionContent>
|
|
301
|
+
}
|
|
302
|
+
</Accordion>
|
|
303
|
+
```
|
|
304
|
+
|
|
305
|
+
#### Scrollable Accordion
|
|
306
|
+
|
|
307
|
+
```tsx
|
|
308
|
+
<Accordion
|
|
309
|
+
bodyMaxHeight={200}
|
|
310
|
+
onBodyScroll={console.debug}
|
|
311
|
+
title={'Lorem ipsum dolor sit amet'}
|
|
312
|
+
>
|
|
313
|
+
{
|
|
314
|
+
<AccordionContent>
|
|
315
|
+
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor
|
|
316
|
+
invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et
|
|
317
|
+
accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata
|
|
318
|
+
sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur
|
|
319
|
+
sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna
|
|
320
|
+
aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea
|
|
321
|
+
rebum. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod
|
|
322
|
+
tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos
|
|
323
|
+
et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata
|
|
324
|
+
sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur
|
|
325
|
+
sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna
|
|
326
|
+
aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea
|
|
327
|
+
rebum.
|
|
328
|
+
</AccordionContent>
|
|
329
|
+
}
|
|
330
|
+
</Accordion>
|
|
331
|
+
```
|
|
332
|
+
|
|
333
|
+
#### With Accordion Items
|
|
334
|
+
|
|
335
|
+
```tsx
|
|
336
|
+
<Accordion
|
|
337
|
+
title={'Lorem ipsum dolor sit amet'}
|
|
338
|
+
>
|
|
339
|
+
{
|
|
340
|
+
<>
|
|
341
|
+
<AccordionItem>Lorem ipsum dolor sit amet</AccordionItem>
|
|
342
|
+
<AccordionItem>Consetetur sadipscing elitr</AccordionItem>
|
|
343
|
+
<AccordionItem>Sed diam nonumy eirmod tempor invidunt ut labore</AccordionItem>
|
|
344
|
+
<AccordionItem>Et dolore magna aliquyam erat</AccordionItem>
|
|
345
|
+
<AccordionGroup isWrapped>
|
|
346
|
+
<Accordion key="first" title="At vero eos et accusam">
|
|
347
|
+
<AccordionItem>Consetetur sadipscing elitr</AccordionItem>
|
|
348
|
+
<AccordionItem>Sed diam nonumy eirmod tempor invidunt ut labore</AccordionItem>
|
|
349
|
+
</Accordion>
|
|
350
|
+
</AccordionGroup>
|
|
351
|
+
</>
|
|
352
|
+
}
|
|
353
|
+
</Accordion>
|
|
354
|
+
```
|
|
355
|
+
|
|
356
|
+
#### Input As Title
|
|
357
|
+
|
|
358
|
+
```tsx
|
|
359
|
+
<Accordion
|
|
360
|
+
title={'Lorem ipsum'}
|
|
361
|
+
onTitleInputChange={undefined}
|
|
362
|
+
titleInputProps={{
|
|
363
|
+
rightElement: (
|
|
364
|
+
<div
|
|
365
|
+
style={{
|
|
366
|
+
backgroundColor: '#3377b6',
|
|
367
|
+
height: '42px',
|
|
368
|
+
width: '42px',
|
|
369
|
+
display: 'flex',
|
|
370
|
+
alignItems: 'center',
|
|
371
|
+
justifyContent: 'center',
|
|
372
|
+
}}
|
|
373
|
+
>
|
|
374
|
+
<Icon icons={['ts-calling-code']} size={25} color={'white'} />
|
|
375
|
+
</div>
|
|
376
|
+
),
|
|
377
|
+
}}
|
|
378
|
+
>
|
|
379
|
+
{
|
|
380
|
+
<AccordionContent>
|
|
381
|
+
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor
|
|
382
|
+
invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et
|
|
383
|
+
accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata
|
|
384
|
+
sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur
|
|
385
|
+
sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna
|
|
386
|
+
aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea
|
|
387
|
+
rebum.
|
|
388
|
+
</AccordionContent>
|
|
389
|
+
}
|
|
390
|
+
</Accordion>
|
|
391
|
+
```
|
|
392
|
+
|
|
393
|
+
#### Wrapped Accordion With List Items
|
|
394
|
+
|
|
395
|
+
```tsx
|
|
396
|
+
<Accordion
|
|
397
|
+
title={'Lorem ipsum dolor sit amet'}
|
|
398
|
+
>
|
|
399
|
+
{
|
|
400
|
+
<>
|
|
401
|
+
<List>
|
|
402
|
+
<ListItem images={[locationImages[0] ?? '']} title="Tolor tantem">
|
|
403
|
+
<ListItemContent>Consetetur sadipscing elitr</ListItemContent>
|
|
404
|
+
</ListItem>
|
|
405
|
+
<ListItem
|
|
406
|
+
images={[locationImages[0] ?? '']}
|
|
407
|
+
shouldHideIndicator
|
|
408
|
+
title="Tolor tantem"
|
|
409
|
+
>
|
|
410
|
+
<ListItemContent>Consetetur sadipscing elitr</ListItemContent>
|
|
411
|
+
</ListItem>
|
|
412
|
+
<ListItem title="Tolor tantem">
|
|
413
|
+
<ListItemContent>Consetetur sadipscing elitr</ListItemContent>
|
|
414
|
+
</ListItem>
|
|
415
|
+
<ListItem shouldHideIndicator title="Tolor tantem">
|
|
416
|
+
<ListItemContent>Consetetur sadipscing elitr</ListItemContent>
|
|
417
|
+
</ListItem>
|
|
418
|
+
</List>
|
|
419
|
+
<AccordionGroup isWrapped>
|
|
420
|
+
<Accordion title="Lorem ipsum">
|
|
421
|
+
<List>
|
|
422
|
+
<ListItem images={[locationImages[0] ?? '']} title="Tolor tantem">
|
|
423
|
+
<ListItemContent>Consetetur sadipscing elitr</ListItemContent>
|
|
424
|
+
</ListItem>
|
|
425
|
+
<ListItem
|
|
426
|
+
images={[locationImages[0] ?? '']}
|
|
427
|
+
shouldHideIndicator
|
|
428
|
+
title="Tolor tantem"
|
|
429
|
+
>
|
|
430
|
+
<ListItemContent>Consetetur sadipscing elitr</ListItemContent>
|
|
431
|
+
</ListItem>
|
|
432
|
+
<ListItem title="Tolor tantem">
|
|
433
|
+
<ListItemContent>Consetetur sadipscing elitr</ListItemContent>
|
|
434
|
+
</ListItem>
|
|
435
|
+
<ListItem shouldHideIndicator title="Tolor tantem">
|
|
436
|
+
<ListItemContent>Consetetur sadipscing elitr</ListItemContent>
|
|
437
|
+
</ListItem>
|
|
438
|
+
</List>
|
|
439
|
+
</Accordion>
|
|
440
|
+
<Accordion title="Lorem ipsum sit dolor atem">
|
|
441
|
+
<AccordionGroup isWrapped>
|
|
442
|
+
<Accordion title="Dolor sit amet">
|
|
443
|
+
<List>
|
|
444
|
+
<ListItem images={[locationImages[0] ?? '']} title="Tolor tantem">
|
|
445
|
+
<ListItemContent>Consetetur sadipscing elitr</ListItemContent>
|
|
446
|
+
</ListItem>
|
|
447
|
+
<ListItem
|
|
448
|
+
images={[locationImages[0] ?? '']}
|
|
449
|
+
shouldHideIndicator
|
|
450
|
+
title="Tolor tantem"
|
|
451
|
+
>
|
|
452
|
+
<ListItemContent>Consetetur sadipscing elitr</ListItemContent>
|
|
453
|
+
</ListItem>
|
|
454
|
+
<ListItem title="Tolor tantem">
|
|
455
|
+
<ListItemContent>Consetetur sadipscing elitr</ListItemContent>
|
|
456
|
+
</ListItem>
|
|
457
|
+
<ListItem shouldHideIndicator title="Tolor tantem">
|
|
458
|
+
<ListItemContent>Consetetur sadipscing elitr</ListItemContent>
|
|
459
|
+
</ListItem>
|
|
460
|
+
</List>
|
|
461
|
+
</Accordion>
|
|
462
|
+
</AccordionGroup>
|
|
463
|
+
</Accordion>
|
|
464
|
+
</AccordionGroup>
|
|
465
|
+
</>
|
|
466
|
+
}
|
|
467
|
+
</Accordion>
|
|
468
|
+
```
|
|
469
|
+
|
|
470
|
+
#### Hidden Bottom Lines
|
|
471
|
+
|
|
472
|
+
```tsx
|
|
473
|
+
<Accordion />
|
|
474
|
+
```
|
|
475
|
+
|
|
476
|
+
### Props
|
|
477
|
+
|
|
478
|
+
No prop documentation available.
|
|
479
|
+
|
|
480
|
+
### Types
|
|
481
|
+
|
|
482
|
+
No additional exported types documented.
|
|
483
|
+
|
|
484
|
+
### Usage Notes
|
|
485
|
+
|
|
486
|
+
- Import `Accordion` directly from `@chayns-components/core` instead of internal source paths.
|
|
487
|
+
- Start with one of the documented Storybook examples and adapt the props incrementally for your use case.
|
|
488
|
+
|
|
489
|
+
### Anti Patterns
|
|
490
|
+
|
|
491
|
+
- Avoid imports from internal paths such as `@chayns-components/core/src/...`; always use the public package export.
|
|
492
|
+
## AmountControl
|
|
493
|
+
|
|
494
|
+
`AmountControl` is exported by `@chayns-components/core` and should be imported from the public package entry point.
|
|
495
|
+
|
|
496
|
+
### Import
|
|
497
|
+
|
|
498
|
+
```ts
|
|
499
|
+
import { AmountControl } from '@chayns-components/core';
|
|
500
|
+
```
|
|
501
|
+
|
|
502
|
+
### Examples
|
|
503
|
+
|
|
504
|
+
#### General
|
|
505
|
+
|
|
506
|
+
```tsx
|
|
507
|
+
<AmountControl />
|
|
508
|
+
```
|
|
509
|
+
|
|
510
|
+
#### With Label
|
|
511
|
+
|
|
512
|
+
```tsx
|
|
513
|
+
<AmountControl
|
|
514
|
+
label={'1,43'}
|
|
515
|
+
/>
|
|
516
|
+
```
|
|
517
|
+
|
|
518
|
+
#### With Max Amount
|
|
519
|
+
|
|
520
|
+
```tsx
|
|
521
|
+
<AmountControl
|
|
522
|
+
maxAmount={1}
|
|
523
|
+
/>
|
|
524
|
+
```
|
|
525
|
+
|
|
526
|
+
#### Reset Amount
|
|
527
|
+
|
|
528
|
+
```tsx
|
|
529
|
+
<AmountControl />
|
|
530
|
+
```
|
|
531
|
+
|
|
532
|
+
### Props
|
|
533
|
+
|
|
534
|
+
No prop documentation available.
|
|
535
|
+
|
|
536
|
+
### Types
|
|
537
|
+
|
|
538
|
+
No additional exported types documented.
|
|
539
|
+
|
|
540
|
+
### Usage Notes
|
|
541
|
+
|
|
542
|
+
- Import `AmountControl` directly from `@chayns-components/core` instead of internal source paths.
|
|
543
|
+
- Start with one of the documented Storybook examples and adapt the props incrementally for your use case.
|
|
544
|
+
|
|
545
|
+
### Anti Patterns
|
|
546
|
+
|
|
547
|
+
- Avoid imports from internal paths such as `@chayns-components/core/src/...`; always use the public package export.
|
|
548
|
+
## AnimatedNumber
|
|
549
|
+
|
|
550
|
+
`AnimatedNumber` is exported by `@chayns-components/core` and should be imported from the public package entry point.
|
|
551
|
+
|
|
552
|
+
### Import
|
|
553
|
+
|
|
554
|
+
```ts
|
|
555
|
+
import { AnimatedNumber } from '@chayns-components/core';
|
|
556
|
+
```
|
|
557
|
+
|
|
558
|
+
### Examples
|
|
559
|
+
|
|
560
|
+
#### General
|
|
561
|
+
|
|
562
|
+
```tsx
|
|
563
|
+
<AnimatedNumber
|
|
564
|
+
value={935936}
|
|
565
|
+
/>
|
|
566
|
+
```
|
|
567
|
+
|
|
568
|
+
### Props
|
|
569
|
+
|
|
570
|
+
No prop documentation available.
|
|
571
|
+
|
|
572
|
+
### Types
|
|
573
|
+
|
|
574
|
+
No additional exported types documented.
|
|
575
|
+
|
|
576
|
+
### Usage Notes
|
|
577
|
+
|
|
578
|
+
- Import `AnimatedNumber` directly from `@chayns-components/core` instead of internal source paths.
|
|
579
|
+
- Start with one of the documented Storybook examples and adapt the props incrementally for your use case.
|
|
580
|
+
|
|
581
|
+
### Anti Patterns
|
|
582
|
+
|
|
583
|
+
- Avoid imports from internal paths such as `@chayns-components/core/src/...`; always use the public package export.
|
|
584
|
+
## Badge
|
|
585
|
+
|
|
586
|
+
`Badge` is exported by `@chayns-components/core` and should be imported from the public package entry point.
|
|
587
|
+
|
|
588
|
+
### Import
|
|
589
|
+
|
|
590
|
+
```ts
|
|
591
|
+
import { Badge } from '@chayns-components/core';
|
|
592
|
+
```
|
|
593
|
+
|
|
594
|
+
### Examples
|
|
595
|
+
|
|
596
|
+
#### General
|
|
597
|
+
|
|
598
|
+
```tsx
|
|
599
|
+
<Badge>
|
|
600
|
+
{'10.000 Euro'}
|
|
601
|
+
</Badge>
|
|
602
|
+
```
|
|
603
|
+
|
|
604
|
+
#### Single Number
|
|
605
|
+
|
|
606
|
+
```tsx
|
|
607
|
+
<Badge
|
|
608
|
+
backgroundColor={'#ff0000'}
|
|
609
|
+
fontColor={'#ffffff'}
|
|
610
|
+
>
|
|
611
|
+
{'4'}
|
|
612
|
+
</Badge>
|
|
613
|
+
```
|
|
614
|
+
|
|
615
|
+
#### Empty
|
|
616
|
+
|
|
617
|
+
```tsx
|
|
618
|
+
<Badge>
|
|
619
|
+
{undefined}
|
|
620
|
+
</Badge>
|
|
621
|
+
```
|
|
622
|
+
|
|
623
|
+
#### Border
|
|
624
|
+
|
|
625
|
+
```tsx
|
|
626
|
+
<Badge
|
|
627
|
+
design={BadgeDesign.BORDER}
|
|
628
|
+
>
|
|
629
|
+
{'SYSTEM'}
|
|
630
|
+
</Badge>
|
|
631
|
+
```
|
|
632
|
+
|
|
633
|
+
### Props
|
|
634
|
+
|
|
635
|
+
No prop documentation available.
|
|
636
|
+
|
|
637
|
+
### Types
|
|
638
|
+
|
|
639
|
+
No additional exported types documented.
|
|
640
|
+
|
|
641
|
+
### Usage Notes
|
|
642
|
+
|
|
643
|
+
- Import `Badge` directly from `@chayns-components/core` instead of internal source paths.
|
|
644
|
+
- Start with one of the documented Storybook examples and adapt the props incrementally for your use case.
|
|
645
|
+
|
|
646
|
+
### Anti Patterns
|
|
647
|
+
|
|
648
|
+
- Avoid imports from internal paths such as `@chayns-components/core/src/...`; always use the public package export.
|
|
649
|
+
## Button
|
|
650
|
+
|
|
651
|
+
`Button` is exported by `@chayns-components/core` and should be imported from the public package entry point.
|
|
652
|
+
|
|
653
|
+
### Import
|
|
654
|
+
|
|
655
|
+
```ts
|
|
656
|
+
import { Button } from '@chayns-components/core';
|
|
657
|
+
```
|
|
658
|
+
|
|
659
|
+
### Examples
|
|
660
|
+
|
|
661
|
+
#### General
|
|
662
|
+
|
|
663
|
+
```tsx
|
|
664
|
+
<Button
|
|
665
|
+
isDisabled={false}
|
|
666
|
+
isSecondary={false}
|
|
667
|
+
shouldStopPropagation={false}
|
|
668
|
+
>
|
|
669
|
+
{'Click me!'}
|
|
670
|
+
</Button>
|
|
671
|
+
```
|
|
672
|
+
|
|
673
|
+
#### Icon Button
|
|
674
|
+
|
|
675
|
+
```tsx
|
|
676
|
+
<Button
|
|
677
|
+
isDisabled={false}
|
|
678
|
+
isSecondary={false}
|
|
679
|
+
shouldStopPropagation={false}
|
|
680
|
+
icon={'fa fa-rocket'}
|
|
681
|
+
/>
|
|
682
|
+
```
|
|
683
|
+
|
|
684
|
+
#### Button With Icon
|
|
685
|
+
|
|
686
|
+
```tsx
|
|
687
|
+
<Button
|
|
688
|
+
isDisabled={false}
|
|
689
|
+
isSecondary={false}
|
|
690
|
+
shouldStopPropagation={false}
|
|
691
|
+
icon={'fa fa-rocket'}
|
|
692
|
+
>
|
|
693
|
+
{'Click me!'}
|
|
694
|
+
</Button>
|
|
695
|
+
```
|
|
696
|
+
|
|
697
|
+
### Props
|
|
698
|
+
|
|
699
|
+
No prop documentation available.
|
|
700
|
+
|
|
701
|
+
### Types
|
|
702
|
+
|
|
703
|
+
No additional exported types documented.
|
|
704
|
+
|
|
705
|
+
### Usage Notes
|
|
706
|
+
|
|
707
|
+
- Import `Button` directly from `@chayns-components/core` instead of internal source paths.
|
|
708
|
+
- Start with one of the documented Storybook examples and adapt the props incrementally for your use case.
|
|
709
|
+
|
|
710
|
+
### Anti Patterns
|
|
711
|
+
|
|
712
|
+
- Avoid imports from internal paths such as `@chayns-components/core/src/...`; always use the public package export.
|
|
713
|
+
## Checkbox
|
|
714
|
+
|
|
715
|
+
`Checkbox` is exported by `@chayns-components/core` and should be imported from the public package entry point.
|
|
716
|
+
|
|
717
|
+
### Import
|
|
718
|
+
|
|
719
|
+
```ts
|
|
720
|
+
import { Checkbox } from '@chayns-components/core';
|
|
721
|
+
```
|
|
722
|
+
|
|
723
|
+
### Examples
|
|
724
|
+
|
|
725
|
+
#### General
|
|
726
|
+
|
|
727
|
+
```tsx
|
|
728
|
+
<Checkbox>
|
|
729
|
+
{'Try me out!'}
|
|
730
|
+
</Checkbox>
|
|
731
|
+
```
|
|
732
|
+
|
|
733
|
+
### Props
|
|
734
|
+
|
|
735
|
+
No prop documentation available.
|
|
736
|
+
|
|
737
|
+
### Types
|
|
738
|
+
|
|
739
|
+
No additional exported types documented.
|
|
740
|
+
|
|
741
|
+
### Usage Notes
|
|
742
|
+
|
|
743
|
+
- Import `Checkbox` directly from `@chayns-components/core` instead of internal source paths.
|
|
744
|
+
- Start with one of the documented Storybook examples and adapt the props incrementally for your use case.
|
|
745
|
+
|
|
746
|
+
### Anti Patterns
|
|
747
|
+
|
|
748
|
+
- Avoid imports from internal paths such as `@chayns-components/core/src/...`; always use the public package export.
|
|
749
|
+
## ComboBox
|
|
750
|
+
|
|
751
|
+
`ComboBox` is exported by `@chayns-components/core` and should be imported from the public package entry point.
|
|
752
|
+
|
|
753
|
+
### Import
|
|
754
|
+
|
|
755
|
+
```ts
|
|
756
|
+
import { ComboBox } from '@chayns-components/core';
|
|
757
|
+
```
|
|
758
|
+
|
|
759
|
+
### Examples
|
|
760
|
+
|
|
761
|
+
#### General
|
|
762
|
+
|
|
763
|
+
```tsx
|
|
764
|
+
<ComboBox
|
|
765
|
+
lists={[
|
|
766
|
+
{
|
|
767
|
+
list: [
|
|
768
|
+
{
|
|
769
|
+
text: 'Margherita',
|
|
770
|
+
value: 1,
|
|
771
|
+
},
|
|
772
|
+
],
|
|
773
|
+
},
|
|
774
|
+
]}
|
|
775
|
+
placeholder={'Select Pizza'}
|
|
776
|
+
/>
|
|
777
|
+
```
|
|
778
|
+
|
|
779
|
+
#### Custom
|
|
780
|
+
|
|
781
|
+
```tsx
|
|
782
|
+
<ComboBox
|
|
783
|
+
lists={[
|
|
784
|
+
{
|
|
785
|
+
list: [
|
|
786
|
+
{
|
|
787
|
+
icons: ['fa fa-users'],
|
|
788
|
+
imageUrl: 'https://picsum.photos/200',
|
|
789
|
+
rightElement: <Badge>7</Badge>,
|
|
790
|
+
text: 'Allgemein',
|
|
791
|
+
value: 1,
|
|
792
|
+
},
|
|
793
|
+
{
|
|
794
|
+
icons: ['fa fa-user'],
|
|
795
|
+
imageUrl: 'https://picsum.photos/200',
|
|
796
|
+
rightElement: <Badge>33</Badge>,
|
|
797
|
+
text: 'Persönlich',
|
|
798
|
+
value: 2,
|
|
799
|
+
},
|
|
800
|
+
{
|
|
801
|
+
icons: ['fa fa-hashtag-lock'],
|
|
802
|
+
imageUrl: 'https://picsum.photos/200',
|
|
803
|
+
rightElement: <Badge>1</Badge>,
|
|
804
|
+
text: 'Die Doppelnull-Crew',
|
|
805
|
+
value: 3,
|
|
806
|
+
},
|
|
807
|
+
{
|
|
808
|
+
icons: ['fa fa-question-circle'],
|
|
809
|
+
imageUrl: 'https://picsum.photos/200',
|
|
810
|
+
rightElement: <Badge>12</Badge>,
|
|
811
|
+
text: 'Bereich mit Hilfe & FAQ',
|
|
812
|
+
value: 4,
|
|
813
|
+
},
|
|
814
|
+
{
|
|
815
|
+
icons: ['fa fa-sign-out-alt'],
|
|
816
|
+
imageUrl: 'https://picsum.photos/200',
|
|
817
|
+
rightElement: <Badge>10</Badge>,
|
|
818
|
+
text: 'Abmelden',
|
|
819
|
+
value: 5,
|
|
820
|
+
},
|
|
821
|
+
],
|
|
822
|
+
},
|
|
823
|
+
]}
|
|
824
|
+
placeholder={'Auswählen'}
|
|
825
|
+
direction={DropdownDirection.BOTTOM_LEFT}
|
|
826
|
+
shouldDropDownUseMaxItemWidth
|
|
827
|
+
shouldShowTransparentBackground
|
|
828
|
+
shouldUseCurrentItemWidth
|
|
829
|
+
/>
|
|
830
|
+
```
|
|
831
|
+
|
|
832
|
+
#### Own Width
|
|
833
|
+
|
|
834
|
+
```tsx
|
|
835
|
+
<ComboBox
|
|
836
|
+
lists={[
|
|
837
|
+
{
|
|
838
|
+
list: [
|
|
839
|
+
{
|
|
840
|
+
text: 'Margherita',
|
|
841
|
+
value: 1,
|
|
842
|
+
},
|
|
843
|
+
],
|
|
844
|
+
},
|
|
845
|
+
]}
|
|
846
|
+
placeholder={'Select Pizza'}
|
|
847
|
+
bodyWidth={300}
|
|
848
|
+
direction={DropdownDirection.LEFT}
|
|
849
|
+
shouldUseFullWidth
|
|
850
|
+
/>
|
|
851
|
+
```
|
|
852
|
+
|
|
853
|
+
#### With Prefix
|
|
854
|
+
|
|
855
|
+
```tsx
|
|
856
|
+
<ComboBox
|
|
857
|
+
lists={[
|
|
858
|
+
{
|
|
859
|
+
list: [
|
|
860
|
+
{
|
|
861
|
+
text: 'Margherita',
|
|
862
|
+
value: 1,
|
|
863
|
+
},
|
|
864
|
+
],
|
|
865
|
+
},
|
|
866
|
+
]}
|
|
867
|
+
placeholder={'Select Pizza'}
|
|
868
|
+
prefix={'Von'}
|
|
869
|
+
/>
|
|
870
|
+
```
|
|
871
|
+
|
|
872
|
+
#### With Images
|
|
873
|
+
|
|
874
|
+
```tsx
|
|
875
|
+
<ComboBox
|
|
876
|
+
lists={[
|
|
877
|
+
{
|
|
878
|
+
list: [
|
|
879
|
+
{
|
|
880
|
+
imageUrl: 'https://picsum.photos/200',
|
|
881
|
+
text: 'Schnellstart',
|
|
882
|
+
value: 0,
|
|
883
|
+
},
|
|
884
|
+
{
|
|
885
|
+
imageUrl: 'https://picsum.photos/200',
|
|
886
|
+
text: 'Flexibles Design',
|
|
887
|
+
value: 1,
|
|
888
|
+
},
|
|
889
|
+
{
|
|
890
|
+
imageUrl: 'https://picsum.photos/200',
|
|
891
|
+
text: 'Intuitive Bedienung',
|
|
892
|
+
value: 2,
|
|
893
|
+
},
|
|
894
|
+
{
|
|
895
|
+
imageUrl: 'https://picsum.photos/200',
|
|
896
|
+
text: 'Integration',
|
|
897
|
+
value: 3,
|
|
898
|
+
},
|
|
899
|
+
{
|
|
900
|
+
imageUrl: 'https://picsum.photos/200',
|
|
901
|
+
text: 'Navigation',
|
|
902
|
+
value: 4,
|
|
903
|
+
},
|
|
904
|
+
],
|
|
905
|
+
},
|
|
906
|
+
]}
|
|
907
|
+
placeholder={'Select Pizza'}
|
|
908
|
+
selectedItem={{
|
|
909
|
+
imageUrl: 'https://picsum.photos/200',
|
|
910
|
+
text: 'Flexibles Design',
|
|
911
|
+
value: 1,
|
|
912
|
+
}}
|
|
913
|
+
/>
|
|
914
|
+
```
|
|
915
|
+
|
|
916
|
+
#### With Suffix Elements
|
|
917
|
+
|
|
918
|
+
```tsx
|
|
919
|
+
<ComboBox
|
|
920
|
+
lists={[
|
|
921
|
+
{
|
|
922
|
+
list: [
|
|
923
|
+
{
|
|
924
|
+
imageUrl: 'https://picsum.photos/200',
|
|
925
|
+
suffixElement: <Icon icons={['fal fa-image']} />,
|
|
926
|
+
text: 'Schnellstart',
|
|
927
|
+
value: 0,
|
|
928
|
+
},
|
|
929
|
+
{
|
|
930
|
+
imageUrl: 'https://picsum.photos/200',
|
|
931
|
+
text: 'Flexibles Design',
|
|
932
|
+
value: 1,
|
|
933
|
+
},
|
|
934
|
+
{
|
|
935
|
+
imageUrl: 'https://picsum.photos/200',
|
|
936
|
+
text: 'Intuitive Bedienung',
|
|
937
|
+
suffixElement: <Icon icons={['fa fa-user']} />,
|
|
938
|
+
value: 2,
|
|
939
|
+
},
|
|
940
|
+
{
|
|
941
|
+
imageUrl: 'https://picsum.photos/200',
|
|
942
|
+
text: 'Integration',
|
|
943
|
+
value: 3,
|
|
944
|
+
},
|
|
945
|
+
{
|
|
946
|
+
imageUrl: 'https://picsum.photos/200',
|
|
947
|
+
text: 'Navigation',
|
|
948
|
+
value: 4,
|
|
949
|
+
},
|
|
950
|
+
],
|
|
951
|
+
},
|
|
952
|
+
]}
|
|
953
|
+
placeholder={'Select Pizza'}
|
|
954
|
+
selectedItem={{
|
|
955
|
+
imageUrl: 'https://picsum.photos/200',
|
|
956
|
+
text: 'Intuitive Bedienung',
|
|
957
|
+
suffixElement: <Icon icons={['far fa-user']} />,
|
|
958
|
+
value: 2,
|
|
959
|
+
}}
|
|
960
|
+
/>
|
|
961
|
+
```
|
|
962
|
+
|
|
963
|
+
#### With Icons
|
|
964
|
+
|
|
965
|
+
```tsx
|
|
966
|
+
<ComboBox
|
|
967
|
+
lists={[
|
|
968
|
+
{
|
|
969
|
+
list: [
|
|
970
|
+
{
|
|
971
|
+
icons: ['ts-calling-code'],
|
|
972
|
+
text: 'Schnellstart',
|
|
973
|
+
value: 0,
|
|
974
|
+
},
|
|
975
|
+
{
|
|
976
|
+
icons: ['ts-calling-code'],
|
|
977
|
+
text: 'Flexibles Design',
|
|
978
|
+
value: 1,
|
|
979
|
+
},
|
|
980
|
+
{
|
|
981
|
+
icons: ['ts-calling-code'],
|
|
982
|
+
text: 'Intuitive Bedienung',
|
|
983
|
+
value: 2,
|
|
984
|
+
},
|
|
985
|
+
{
|
|
986
|
+
icons: ['ts-calling-code'],
|
|
987
|
+
text: 'Integration',
|
|
988
|
+
value: 3,
|
|
989
|
+
},
|
|
990
|
+
{
|
|
991
|
+
icons: ['ts-calling-code'],
|
|
992
|
+
text: 'Navigation',
|
|
993
|
+
value: 4,
|
|
994
|
+
},
|
|
995
|
+
],
|
|
996
|
+
},
|
|
997
|
+
]}
|
|
998
|
+
placeholder={'Select Pizza'}
|
|
999
|
+
selectedItem={{
|
|
1000
|
+
icons: ['ts-calling-code'],
|
|
1001
|
+
text: 'Flexibles Design',
|
|
1002
|
+
value: 1,
|
|
1003
|
+
}}
|
|
1004
|
+
/>
|
|
1005
|
+
```
|
|
1006
|
+
|
|
1007
|
+
#### With Groups
|
|
1008
|
+
|
|
1009
|
+
```tsx
|
|
1010
|
+
<ComboBox
|
|
1011
|
+
lists={[
|
|
1012
|
+
{
|
|
1013
|
+
groupName: 'Autos',
|
|
1014
|
+
list: [
|
|
1015
|
+
{
|
|
1016
|
+
text: 'Audi',
|
|
1017
|
+
value: 0,
|
|
1018
|
+
},
|
|
1019
|
+
{
|
|
1020
|
+
text: 'BMW',
|
|
1021
|
+
value: 1,
|
|
1022
|
+
},
|
|
1023
|
+
{
|
|
1024
|
+
text: 'Toyota',
|
|
1025
|
+
value: 2,
|
|
1026
|
+
},
|
|
1027
|
+
{
|
|
1028
|
+
text: 'Volkswagen',
|
|
1029
|
+
value: 3,
|
|
1030
|
+
},
|
|
1031
|
+
{
|
|
1032
|
+
text: 'Nissan',
|
|
1033
|
+
value: 4,
|
|
1034
|
+
},
|
|
1035
|
+
],
|
|
1036
|
+
},
|
|
1037
|
+
{
|
|
1038
|
+
groupName: 'Fußballvereine',
|
|
1039
|
+
list: [
|
|
1040
|
+
{
|
|
1041
|
+
text: 'Bayern München',
|
|
1042
|
+
value: 0,
|
|
1043
|
+
},
|
|
1044
|
+
{
|
|
1045
|
+
text: 'Dortmund',
|
|
1046
|
+
value: 1,
|
|
1047
|
+
},
|
|
1048
|
+
{
|
|
1049
|
+
text: 'Real Madrid',
|
|
1050
|
+
value: 2,
|
|
1051
|
+
},
|
|
1052
|
+
{
|
|
1053
|
+
text: 'Man City',
|
|
1054
|
+
value: 3,
|
|
1055
|
+
},
|
|
1056
|
+
{
|
|
1057
|
+
text: 'Barcelona',
|
|
1058
|
+
value: 4,
|
|
1059
|
+
},
|
|
1060
|
+
],
|
|
1061
|
+
},
|
|
1062
|
+
]}
|
|
1063
|
+
placeholder={'Select Pizza'}
|
|
1064
|
+
/>
|
|
1065
|
+
```
|
|
1066
|
+
|
|
1067
|
+
#### With Subtext
|
|
1068
|
+
|
|
1069
|
+
```tsx
|
|
1070
|
+
<ComboBox
|
|
1071
|
+
lists={[
|
|
1072
|
+
{
|
|
1073
|
+
list: [
|
|
1074
|
+
{
|
|
1075
|
+
imageUrl: 'https://tsimg.cloud/PM4-7NBYY/profile_w128.png',
|
|
1076
|
+
value: 'PM4-7NBYY',
|
|
1077
|
+
text: 'David Rechenberg, 39 Jahre',
|
|
1078
|
+
subtext: 'Mathelehrer',
|
|
1079
|
+
},
|
|
1080
|
+
{
|
|
1081
|
+
imageUrl: 'https://tsimg.cloud/9JC-14TQZ/profile_w128.png',
|
|
1082
|
+
value: '9JC-14TQZ',
|
|
1083
|
+
text: 'Gerhard Kaiser, 55 Jahre',
|
|
1084
|
+
subtext: 'Geschichtslehrer',
|
|
1085
|
+
},
|
|
1086
|
+
{
|
|
1087
|
+
imageUrl: 'https://tsimg.cloud/AFQ-2VL54/profile_w128.png',
|
|
1088
|
+
value: 'AFQ-2VL54',
|
|
1089
|
+
text: 'Claudia Schreiber, 57 Jahre',
|
|
1090
|
+
subtext: 'Deutschlehrerin',
|
|
1091
|
+
},
|
|
1092
|
+
{
|
|
1093
|
+
imageUrl: 'https://tsimg.cloud/FCB-GEU25/profile_w128.png',
|
|
1094
|
+
value: 'FCB-GEU25',
|
|
1095
|
+
text: 'Lukas Waldmann, 24 Jahre',
|
|
1096
|
+
subtext: 'Biologielehrer',
|
|
1097
|
+
},
|
|
1098
|
+
{
|
|
1099
|
+
imageUrl: 'https://tsimg.cloud/R3U-8B6ZJ/profile_w128.png',
|
|
1100
|
+
value: 'R3U-8B6ZJ',
|
|
1101
|
+
text: 'Emily Taylor, 29 Jahre',
|
|
1102
|
+
subtext: 'Englischlehrerin',
|
|
1103
|
+
},
|
|
1104
|
+
{
|
|
1105
|
+
imageUrl: 'https://tsimg.cloud/TER-1VS4Q/profile_w128.png',
|
|
1106
|
+
value: 'TER-1VS4Q',
|
|
1107
|
+
text: 'Paul Bitner, 28 Jahre',
|
|
1108
|
+
subtext: 'Informatiklehrer',
|
|
1109
|
+
},
|
|
1110
|
+
{
|
|
1111
|
+
imageUrl: 'https://tsimg.cloud/IFZ-HFCC6/profile_w128.png',
|
|
1112
|
+
value: 'IFZ-HFCC6',
|
|
1113
|
+
text: 'Rudi Ratlos, 20 Jahre',
|
|
1114
|
+
subtext: 'Informatik-Referent',
|
|
1115
|
+
},
|
|
1116
|
+
],
|
|
1117
|
+
},
|
|
1118
|
+
]}
|
|
1119
|
+
placeholder={'Agent wählen'}
|
|
1120
|
+
shouldShowBigImage
|
|
1121
|
+
shouldShowClearIcon
|
|
1122
|
+
shouldShowRoundImage
|
|
1123
|
+
shouldUseFullWidth
|
|
1124
|
+
/>
|
|
1125
|
+
```
|
|
1126
|
+
|
|
1127
|
+
#### With Big Image
|
|
1128
|
+
|
|
1129
|
+
```tsx
|
|
1130
|
+
<ComboBox
|
|
1131
|
+
lists={[
|
|
1132
|
+
{
|
|
1133
|
+
list: [
|
|
1134
|
+
{
|
|
1135
|
+
imageUrl: 'https://tsimg.cloud/6C8-5QJDF/profile_w128.png',
|
|
1136
|
+
value: '6C8-5QJDF',
|
|
1137
|
+
text: 'Albert, 55 Jahre',
|
|
1138
|
+
},
|
|
1139
|
+
{
|
|
1140
|
+
imageUrl: 'https://tsimg.cloud/DFU-I2R6I/profile_w128.png',
|
|
1141
|
+
value: 'DFU-I2R6I',
|
|
1142
|
+
text: 'Anna, 30 Jahre',
|
|
1143
|
+
},
|
|
1144
|
+
{
|
|
1145
|
+
imageUrl: 'https://tsimg.cloud/SY9-LT5TA/profile_w128.png',
|
|
1146
|
+
value: 'SY9-LT5TA',
|
|
1147
|
+
text: 'Elisabeth, 80 Jahre',
|
|
1148
|
+
},
|
|
1149
|
+
{
|
|
1150
|
+
imageUrl: 'https://tsimg.cloud/BGJ-DTZBH/profile_w128.png',
|
|
1151
|
+
value: 'BGJ-DTZBH',
|
|
1152
|
+
text: 'Jonas, 20 Jahre',
|
|
1153
|
+
},
|
|
1154
|
+
{
|
|
1155
|
+
imageUrl: 'https://tsimg.cloud/672-9GQ3J/profile_w128.png',
|
|
1156
|
+
value: '672-9GQ3J',
|
|
1157
|
+
text: 'Lisa, 10 Jahre',
|
|
1158
|
+
},
|
|
1159
|
+
{
|
|
1160
|
+
imageUrl: 'https://tsimg.cloud/CVW-MDH7R/profile_w128.png',
|
|
1161
|
+
value: 'CVW-MDH7R',
|
|
1162
|
+
text: 'Stefan, 35 Jahre',
|
|
1163
|
+
subtext: 'Informatiklehrer',
|
|
1164
|
+
},
|
|
1165
|
+
],
|
|
1166
|
+
},
|
|
1167
|
+
]}
|
|
1168
|
+
placeholder={'Agent wählen'}
|
|
1169
|
+
shouldShowBigImage
|
|
1170
|
+
shouldShowClearIcon
|
|
1171
|
+
shouldShowRoundImage
|
|
1172
|
+
shouldUseFullWidth
|
|
1173
|
+
/>
|
|
1174
|
+
```
|
|
1175
|
+
|
|
1176
|
+
#### With Input
|
|
1177
|
+
|
|
1178
|
+
```tsx
|
|
1179
|
+
<ComboBox
|
|
1180
|
+
lists={[
|
|
1181
|
+
{
|
|
1182
|
+
list: [
|
|
1183
|
+
{
|
|
1184
|
+
text: '12px',
|
|
1185
|
+
value: 0,
|
|
1186
|
+
},
|
|
1187
|
+
{
|
|
1188
|
+
text: '13px',
|
|
1189
|
+
value: 1,
|
|
1190
|
+
},
|
|
1191
|
+
{
|
|
1192
|
+
text: '14px',
|
|
1193
|
+
value: 2,
|
|
1194
|
+
},
|
|
1195
|
+
{
|
|
1196
|
+
text: '15px',
|
|
1197
|
+
value: 3,
|
|
1198
|
+
},
|
|
1199
|
+
{
|
|
1200
|
+
text: '16px',
|
|
1201
|
+
value: 4,
|
|
1202
|
+
},
|
|
1203
|
+
{
|
|
1204
|
+
text: '20px',
|
|
1205
|
+
value: 5,
|
|
1206
|
+
},
|
|
1207
|
+
{
|
|
1208
|
+
text: '24px',
|
|
1209
|
+
value: 6,
|
|
1210
|
+
},
|
|
1211
|
+
],
|
|
1212
|
+
},
|
|
1213
|
+
]}
|
|
1214
|
+
placeholder={'Fontsize'}
|
|
1215
|
+
/>
|
|
1216
|
+
```
|
|
1217
|
+
|
|
1218
|
+
#### With Text Style
|
|
1219
|
+
|
|
1220
|
+
```tsx
|
|
1221
|
+
<ComboBox
|
|
1222
|
+
lists={[
|
|
1223
|
+
{
|
|
1224
|
+
list: [
|
|
1225
|
+
{
|
|
1226
|
+
text: 'Normal',
|
|
1227
|
+
value: 0,
|
|
1228
|
+
},
|
|
1229
|
+
{
|
|
1230
|
+
text: 'Headline 1',
|
|
1231
|
+
value: 1,
|
|
1232
|
+
textStyles: {
|
|
1233
|
+
tagName: 'h1',
|
|
1234
|
+
styles: { margin: 0 },
|
|
1235
|
+
},
|
|
1236
|
+
},
|
|
1237
|
+
{
|
|
1238
|
+
text: 'Headline 2',
|
|
1239
|
+
value: 2,
|
|
1240
|
+
textStyles: {
|
|
1241
|
+
tagName: 'h2',
|
|
1242
|
+
styles: { margin: 0 },
|
|
1243
|
+
},
|
|
1244
|
+
},
|
|
1245
|
+
{
|
|
1246
|
+
text: 'Headline 3',
|
|
1247
|
+
value: 3,
|
|
1248
|
+
textStyles: {
|
|
1249
|
+
tagName: 'h3',
|
|
1250
|
+
styles: { margin: 0 },
|
|
1251
|
+
},
|
|
1252
|
+
},
|
|
1253
|
+
{
|
|
1254
|
+
text: 'headline 4',
|
|
1255
|
+
value: 4,
|
|
1256
|
+
textStyles: {
|
|
1257
|
+
tagName: 'h4',
|
|
1258
|
+
styles: { margin: 0 },
|
|
1259
|
+
},
|
|
1260
|
+
},
|
|
1261
|
+
{
|
|
1262
|
+
text: 'Footer',
|
|
1263
|
+
value: 5,
|
|
1264
|
+
textStyles: {
|
|
1265
|
+
tagName: 'footer',
|
|
1266
|
+
styles: { margin: 0 },
|
|
1267
|
+
},
|
|
1268
|
+
},
|
|
1269
|
+
],
|
|
1270
|
+
},
|
|
1271
|
+
]}
|
|
1272
|
+
placeholder={'Fontsize'}
|
|
1273
|
+
/>
|
|
1274
|
+
```
|
|
1275
|
+
|
|
1276
|
+
### Props
|
|
1277
|
+
|
|
1278
|
+
No prop documentation available.
|
|
1279
|
+
|
|
1280
|
+
### Types
|
|
1281
|
+
|
|
1282
|
+
No additional exported types documented.
|
|
1283
|
+
|
|
1284
|
+
### Usage Notes
|
|
1285
|
+
|
|
1286
|
+
- Import `ComboBox` directly from `@chayns-components/core` instead of internal source paths.
|
|
1287
|
+
- Start with one of the documented Storybook examples and adapt the props incrementally for your use case.
|
|
1288
|
+
|
|
1289
|
+
### Anti Patterns
|
|
1290
|
+
|
|
1291
|
+
- Avoid imports from internal paths such as `@chayns-components/core/src/...`; always use the public package export.
|
|
1292
|
+
## ContentCard
|
|
1293
|
+
|
|
1294
|
+
`ContentCard` is exported by `@chayns-components/core` and should be imported from the public package entry point.
|
|
1295
|
+
|
|
1296
|
+
### Import
|
|
1297
|
+
|
|
1298
|
+
```ts
|
|
1299
|
+
import { ContentCard } from '@chayns-components/core';
|
|
1300
|
+
```
|
|
1301
|
+
|
|
1302
|
+
### Examples
|
|
1303
|
+
|
|
1304
|
+
#### General
|
|
1305
|
+
|
|
1306
|
+
```tsx
|
|
1307
|
+
<ContentCard>
|
|
1308
|
+
{'Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.'}
|
|
1309
|
+
</ContentCard>
|
|
1310
|
+
```
|
|
1311
|
+
|
|
1312
|
+
#### Content Card With Input
|
|
1313
|
+
|
|
1314
|
+
```tsx
|
|
1315
|
+
<ContentCard>
|
|
1316
|
+
{
|
|
1317
|
+
<>
|
|
1318
|
+
<span>
|
|
1319
|
+
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod
|
|
1320
|
+
tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
|
|
1321
|
+
</span>
|
|
1322
|
+
<div style={{ height: '10px' }} />
|
|
1323
|
+
<Input placeholder="Your advertisement could be here..." />
|
|
1324
|
+
<div style={{ height: '10px' }} />
|
|
1325
|
+
<span>
|
|
1326
|
+
At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren,
|
|
1327
|
+
no sea takimata sanctus est.
|
|
1328
|
+
</span>
|
|
1329
|
+
</>
|
|
1330
|
+
}
|
|
1331
|
+
</ContentCard>
|
|
1332
|
+
```
|
|
1333
|
+
|
|
1334
|
+
### Props
|
|
1335
|
+
|
|
1336
|
+
No prop documentation available.
|
|
1337
|
+
|
|
1338
|
+
### Types
|
|
1339
|
+
|
|
1340
|
+
No additional exported types documented.
|
|
1341
|
+
|
|
1342
|
+
### Usage Notes
|
|
1343
|
+
|
|
1344
|
+
- Import `ContentCard` directly from `@chayns-components/core` instead of internal source paths.
|
|
1345
|
+
- Start with one of the documented Storybook examples and adapt the props incrementally for your use case.
|
|
1346
|
+
|
|
1347
|
+
### Anti Patterns
|
|
1348
|
+
|
|
1349
|
+
- Avoid imports from internal paths such as `@chayns-components/core/src/...`; always use the public package export.
|
|
1350
|
+
## ContextMenu
|
|
1351
|
+
|
|
1352
|
+
`ContextMenu` is exported by `@chayns-components/core` and should be imported from the public package entry point.
|
|
1353
|
+
|
|
1354
|
+
### Import
|
|
1355
|
+
|
|
1356
|
+
```ts
|
|
1357
|
+
import { ContextMenu } from '@chayns-components/core';
|
|
1358
|
+
```
|
|
1359
|
+
|
|
1360
|
+
### Examples
|
|
1361
|
+
|
|
1362
|
+
#### General
|
|
1363
|
+
|
|
1364
|
+
```tsx
|
|
1365
|
+
<ContextMenu
|
|
1366
|
+
items={[
|
|
1367
|
+
{
|
|
1368
|
+
icons: ['fa fa-pencil'],
|
|
1369
|
+
key: 'rename',
|
|
1370
|
+
onClick: () => alert('Option "Umbenennen" wurde geklickt...'),
|
|
1371
|
+
text: 'Umbenennen',
|
|
1372
|
+
},
|
|
1373
|
+
{
|
|
1374
|
+
icons: ['fa fa-eye'],
|
|
1375
|
+
key: 'show',
|
|
1376
|
+
onClick: () => alert('Option "Einblenden" wurde geklickt...'),
|
|
1377
|
+
text: 'Einblenden',
|
|
1378
|
+
},
|
|
1379
|
+
{
|
|
1380
|
+
icons: ['fa fa-trash'],
|
|
1381
|
+
key: 'delete',
|
|
1382
|
+
onClick: () => alert('Option "Löschen" wurde geklickt...'),
|
|
1383
|
+
text: 'Löschen',
|
|
1384
|
+
},
|
|
1385
|
+
]}
|
|
1386
|
+
/>
|
|
1387
|
+
```
|
|
1388
|
+
|
|
1389
|
+
#### With Spacer
|
|
1390
|
+
|
|
1391
|
+
```tsx
|
|
1392
|
+
<ContextMenu
|
|
1393
|
+
items={[
|
|
1394
|
+
{
|
|
1395
|
+
icons: ['fa fa-pencil'],
|
|
1396
|
+
key: 'rename',
|
|
1397
|
+
onClick: () => alert('Option "Umbenennen" wurde geklickt...'),
|
|
1398
|
+
text: 'Umbenennen',
|
|
1399
|
+
},
|
|
1400
|
+
{
|
|
1401
|
+
icons: ['fa fa-eye'],
|
|
1402
|
+
key: 'show',
|
|
1403
|
+
onClick: () => alert('Option "Einblenden" wurde geklickt...'),
|
|
1404
|
+
text: 'Einblenden',
|
|
1405
|
+
shouldShowSpacer: true,
|
|
1406
|
+
},
|
|
1407
|
+
{
|
|
1408
|
+
icons: ['fa fa-trash'],
|
|
1409
|
+
key: 'delete',
|
|
1410
|
+
onClick: () => alert('Option "Löschen" wurde geklickt...'),
|
|
1411
|
+
text: 'Löschen',
|
|
1412
|
+
},
|
|
1413
|
+
]}
|
|
1414
|
+
/>
|
|
1415
|
+
```
|
|
1416
|
+
|
|
1417
|
+
#### Without Icons
|
|
1418
|
+
|
|
1419
|
+
```tsx
|
|
1420
|
+
<ContextMenu
|
|
1421
|
+
items={[
|
|
1422
|
+
{
|
|
1423
|
+
key: 'rename',
|
|
1424
|
+
onClick: () => alert('Option "Umbenennen" wurde geklickt...'),
|
|
1425
|
+
text: 'Umbenennen',
|
|
1426
|
+
},
|
|
1427
|
+
{
|
|
1428
|
+
key: 'show',
|
|
1429
|
+
onClick: () => alert('Option "Einblenden" wurde geklickt...'),
|
|
1430
|
+
text: 'Einblenden',
|
|
1431
|
+
},
|
|
1432
|
+
{
|
|
1433
|
+
key: 'delete',
|
|
1434
|
+
onClick: () => alert('Option "Löschen" wurde geklickt...'),
|
|
1435
|
+
text: 'Löschen',
|
|
1436
|
+
},
|
|
1437
|
+
]}
|
|
1438
|
+
/>
|
|
1439
|
+
```
|
|
1440
|
+
|
|
1441
|
+
### Props
|
|
1442
|
+
|
|
1443
|
+
No prop documentation available.
|
|
1444
|
+
|
|
1445
|
+
### Types
|
|
1446
|
+
|
|
1447
|
+
No additional exported types documented.
|
|
1448
|
+
|
|
1449
|
+
### Usage Notes
|
|
1450
|
+
|
|
1451
|
+
- Import `ContextMenu` directly from `@chayns-components/core` instead of internal source paths.
|
|
1452
|
+
- Start with one of the documented Storybook examples and adapt the props incrementally for your use case.
|
|
1453
|
+
|
|
1454
|
+
### Anti Patterns
|
|
1455
|
+
|
|
1456
|
+
- Avoid imports from internal paths such as `@chayns-components/core/src/...`; always use the public package export.
|
|
1457
|
+
## ExpandableContent
|
|
1458
|
+
|
|
1459
|
+
`ExpandableContent` is exported by `@chayns-components/core` and should be imported from the public package entry point.
|
|
1460
|
+
|
|
1461
|
+
### Import
|
|
1462
|
+
|
|
1463
|
+
```ts
|
|
1464
|
+
import { ExpandableContent } from '@chayns-components/core';
|
|
1465
|
+
```
|
|
1466
|
+
|
|
1467
|
+
### Examples
|
|
1468
|
+
|
|
1469
|
+
#### General
|
|
1470
|
+
|
|
1471
|
+
```tsx
|
|
1472
|
+
<ExpandableContent>
|
|
1473
|
+
{
|
|
1474
|
+
'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec nec nisi vel nulla tincidunt facilisis. Nullam fringilla eu felis at sollicitudin. Aliquam et urna augue. Praesent rhoncus hendrerit molestie. Vestibulum non faucibus mauris. In bibendum ultricies pulvinar. Duis in nisi lacinia, maximus dolor sit amet, pharetra neque. Quisque vulputate semper eleifend. Quisque imperdiet dolor faucibus, lobortis quam et, consectetur dui. Nunc at aliquam odio, vel luctus magna. Cras at ante at nunc volutpat aliquam. Integer ex nunc, pellentesque ac pharetra eu, porttitor eu mi.\n' +
|
|
1475
|
+
'\n' +
|
|
1476
|
+
'Vestibulum mollis sagittis maximus. Nulla facilisi. Curabitur accumsan ipsum laoreet ipsum rutrum, id vehicula lectus cursus. Donec sit amet eros sed quam suscipit sodales. Phasellus faucibus fermentum sagittis. Vestibulum non orci quis nisl aliquet pharetra. Donec massa dui, consectetur sit amet metus ac, mattis semper nulla. Suspendisse ut quam a enim egestas gravida at sed sapien. Duis id mi id nisl pellentesque ornare quis non nibh. Fusce pellentesque, leo interdum rutrum maximus, libero purus auctor velit, at sodales nulla elit ut est. Nam tellus lacus, tristique et nulla sed, mollis vulputate mi. Donec tempor non magna id ornare. Integer facilisis lacus urna. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Nunc nec leo in nulla faucibus facilisis at nec dolor.'
|
|
1477
|
+
}
|
|
1478
|
+
</ExpandableContent>
|
|
1479
|
+
```
|
|
1480
|
+
|
|
1481
|
+
### Props
|
|
1482
|
+
|
|
1483
|
+
No prop documentation available.
|
|
1484
|
+
|
|
1485
|
+
### Types
|
|
1486
|
+
|
|
1487
|
+
No additional exported types documented.
|
|
1488
|
+
|
|
1489
|
+
### Usage Notes
|
|
1490
|
+
|
|
1491
|
+
- Import `ExpandableContent` directly from `@chayns-components/core` instead of internal source paths.
|
|
1492
|
+
- Start with one of the documented Storybook examples and adapt the props incrementally for your use case.
|
|
1493
|
+
|
|
1494
|
+
### Anti Patterns
|
|
1495
|
+
|
|
1496
|
+
- Avoid imports from internal paths such as `@chayns-components/core/src/...`; always use the public package export.
|
|
1497
|
+
## FileInput
|
|
1498
|
+
|
|
1499
|
+
`FileInput` is exported by `@chayns-components/core` and should be imported from the public package entry point.
|
|
1500
|
+
|
|
1501
|
+
### Import
|
|
1502
|
+
|
|
1503
|
+
```ts
|
|
1504
|
+
import { FileInput } from '@chayns-components/core';
|
|
1505
|
+
```
|
|
1506
|
+
|
|
1507
|
+
### Examples
|
|
1508
|
+
|
|
1509
|
+
#### General
|
|
1510
|
+
|
|
1511
|
+
```tsx
|
|
1512
|
+
<FileInput />
|
|
1513
|
+
```
|
|
1514
|
+
|
|
1515
|
+
#### With Image Selection
|
|
1516
|
+
|
|
1517
|
+
```tsx
|
|
1518
|
+
<FileInput
|
|
1519
|
+
imageSelectPlaceholder={'Bild auswählen'}
|
|
1520
|
+
/>
|
|
1521
|
+
```
|
|
1522
|
+
|
|
1523
|
+
#### With Files
|
|
1524
|
+
|
|
1525
|
+
```tsx
|
|
1526
|
+
<FileInput
|
|
1527
|
+
files={[
|
|
1528
|
+
{
|
|
1529
|
+
id: '2733zgetfvedjh4wetrf23w',
|
|
1530
|
+
name: 'Eine Datei',
|
|
1531
|
+
size: 34,
|
|
1532
|
+
mimeType: 'image/png',
|
|
1533
|
+
},
|
|
1534
|
+
{
|
|
1535
|
+
id: '34zh34rdchg26zth5erfdzjzg',
|
|
1536
|
+
name: 'Test Datei',
|
|
1537
|
+
size: 23,
|
|
1538
|
+
mimeType: 'image/png',
|
|
1539
|
+
},
|
|
1540
|
+
]}
|
|
1541
|
+
/>
|
|
1542
|
+
```
|
|
1543
|
+
|
|
1544
|
+
### Props
|
|
1545
|
+
|
|
1546
|
+
No prop documentation available.
|
|
1547
|
+
|
|
1548
|
+
### Types
|
|
1549
|
+
|
|
1550
|
+
No additional exported types documented.
|
|
1551
|
+
|
|
1552
|
+
### Usage Notes
|
|
1553
|
+
|
|
1554
|
+
- Import `FileInput` directly from `@chayns-components/core` instead of internal source paths.
|
|
1555
|
+
- Start with one of the documented Storybook examples and adapt the props incrementally for your use case.
|
|
1556
|
+
|
|
1557
|
+
### Anti Patterns
|
|
1558
|
+
|
|
1559
|
+
- Avoid imports from internal paths such as `@chayns-components/core/src/...`; always use the public package export.
|
|
1560
|
+
## FileList
|
|
1561
|
+
|
|
1562
|
+
`FileList` is exported by `@chayns-components/core` and should be imported from the public package entry point.
|
|
1563
|
+
|
|
1564
|
+
### Import
|
|
1565
|
+
|
|
1566
|
+
```ts
|
|
1567
|
+
import { FileList } from '@chayns-components/core';
|
|
1568
|
+
```
|
|
1569
|
+
|
|
1570
|
+
### Examples
|
|
1571
|
+
|
|
1572
|
+
#### General
|
|
1573
|
+
|
|
1574
|
+
```tsx
|
|
1575
|
+
<FileList
|
|
1576
|
+
files={[
|
|
1577
|
+
{ id: '1', name: 'file1', size: 20, mimeType: 'text/plain' },
|
|
1578
|
+
{ id: '2', name: 'file2', size: 20, mimeType: 'text/plain' },
|
|
1579
|
+
{ id: '3', name: 'file3', size: 20, mimeType: 'text/plain' },
|
|
1580
|
+
{ id: '4', name: 'file4', size: 20, mimeType: 'text/plain' },
|
|
1581
|
+
]}
|
|
1582
|
+
/>
|
|
1583
|
+
```
|
|
1584
|
+
|
|
1585
|
+
### Props
|
|
1586
|
+
|
|
1587
|
+
No prop documentation available.
|
|
1588
|
+
|
|
1589
|
+
### Types
|
|
1590
|
+
|
|
1591
|
+
No additional exported types documented.
|
|
1592
|
+
|
|
1593
|
+
### Usage Notes
|
|
1594
|
+
|
|
1595
|
+
- Import `FileList` directly from `@chayns-components/core` instead of internal source paths.
|
|
1596
|
+
- Start with one of the documented Storybook examples and adapt the props incrementally for your use case.
|
|
1597
|
+
|
|
1598
|
+
### Anti Patterns
|
|
1599
|
+
|
|
1600
|
+
- Avoid imports from internal paths such as `@chayns-components/core/src/...`; always use the public package export.
|
|
1601
|
+
## FileSelect
|
|
1602
|
+
|
|
1603
|
+
`FileSelect` is exported by `@chayns-components/core` and should be imported from the public package entry point.
|
|
1604
|
+
|
|
1605
|
+
### Import
|
|
1606
|
+
|
|
1607
|
+
```ts
|
|
1608
|
+
import { FileSelect } from '@chayns-components/core';
|
|
1609
|
+
```
|
|
1610
|
+
|
|
1611
|
+
### Examples
|
|
1612
|
+
|
|
1613
|
+
#### General
|
|
1614
|
+
|
|
1615
|
+
```tsx
|
|
1616
|
+
<FileSelect />
|
|
1617
|
+
```
|
|
1618
|
+
|
|
1619
|
+
### Props
|
|
1620
|
+
|
|
1621
|
+
No prop documentation available.
|
|
1622
|
+
|
|
1623
|
+
### Types
|
|
1624
|
+
|
|
1625
|
+
No additional exported types documented.
|
|
1626
|
+
|
|
1627
|
+
### Usage Notes
|
|
1628
|
+
|
|
1629
|
+
- Import `FileSelect` directly from `@chayns-components/core` instead of internal source paths.
|
|
1630
|
+
- Start with one of the documented Storybook examples and adapt the props incrementally for your use case.
|
|
1631
|
+
|
|
1632
|
+
### Anti Patterns
|
|
1633
|
+
|
|
1634
|
+
- Avoid imports from internal paths such as `@chayns-components/core/src/...`; always use the public package export.
|
|
1635
|
+
## Filter
|
|
1636
|
+
|
|
1637
|
+
`Filter` is exported by `@chayns-components/core` and should be imported from the public package entry point.
|
|
1638
|
+
|
|
1639
|
+
### Import
|
|
1640
|
+
|
|
1641
|
+
```ts
|
|
1642
|
+
import { Filter } from '@chayns-components/core';
|
|
1643
|
+
```
|
|
1644
|
+
|
|
1645
|
+
### Examples
|
|
1646
|
+
|
|
1647
|
+
#### General
|
|
1648
|
+
|
|
1649
|
+
```tsx
|
|
1650
|
+
<Filter
|
|
1651
|
+
headline={''}
|
|
1652
|
+
searchConfig={{
|
|
1653
|
+
searchValue: '',
|
|
1654
|
+
onSearchChange: () => {},
|
|
1655
|
+
}}
|
|
1656
|
+
checkboxConfig={{
|
|
1657
|
+
children: 'Checkbox Label',
|
|
1658
|
+
}}
|
|
1659
|
+
filterButtonConfig={{
|
|
1660
|
+
items: [
|
|
1661
|
+
{
|
|
1662
|
+
id: '1',
|
|
1663
|
+
text: 'Essen',
|
|
1664
|
+
color: 'red',
|
|
1665
|
+
icons: ['fa fa-burger'],
|
|
1666
|
+
count: 5,
|
|
1667
|
+
},
|
|
1668
|
+
{
|
|
1669
|
+
id: '2',
|
|
1670
|
+
text: 'Getränke',
|
|
1671
|
+
color: 'green',
|
|
1672
|
+
icons: ['fa fa-bottle-water'],
|
|
1673
|
+
count: 74,
|
|
1674
|
+
},
|
|
1675
|
+
{
|
|
1676
|
+
id: '3',
|
|
1677
|
+
text: 'Nachtisch',
|
|
1678
|
+
color: 'blue',
|
|
1679
|
+
icons: ['fa fa-pie'],
|
|
1680
|
+
isDisabled: true,
|
|
1681
|
+
count: 32,
|
|
1682
|
+
},
|
|
1683
|
+
{
|
|
1684
|
+
id: '4',
|
|
1685
|
+
text: 'Snacks',
|
|
1686
|
+
color: 'purple',
|
|
1687
|
+
icons: ['fa fa-cookie'],
|
|
1688
|
+
count: 45,
|
|
1689
|
+
},
|
|
1690
|
+
],
|
|
1691
|
+
size: FilterButtonSize.Small,
|
|
1692
|
+
}}
|
|
1693
|
+
sortConfig={{
|
|
1694
|
+
items: [
|
|
1695
|
+
{ text: 'alphanumerisch', id: 'alphanumerisch' },
|
|
1696
|
+
{ text: 'zuletzt hinzugefügt', id: 'latest' },
|
|
1697
|
+
],
|
|
1698
|
+
selectedItem: { text: 'alphanumerisch', id: 'alphanumerisch' },
|
|
1699
|
+
onSortChange: () => {},
|
|
1700
|
+
}}
|
|
1701
|
+
/>
|
|
1702
|
+
```
|
|
1703
|
+
|
|
1704
|
+
#### Only Search
|
|
1705
|
+
|
|
1706
|
+
```tsx
|
|
1707
|
+
<Filter
|
|
1708
|
+
headline={'Suche'}
|
|
1709
|
+
searchConfig={{
|
|
1710
|
+
searchValue: '',
|
|
1711
|
+
onSearchChange: () => {},
|
|
1712
|
+
}}
|
|
1713
|
+
/>
|
|
1714
|
+
```
|
|
1715
|
+
|
|
1716
|
+
#### Only Filter Buttons
|
|
1717
|
+
|
|
1718
|
+
```tsx
|
|
1719
|
+
<Filter
|
|
1720
|
+
headline={'Filter'}
|
|
1721
|
+
filterButtonConfig={{
|
|
1722
|
+
items: [
|
|
1723
|
+
{
|
|
1724
|
+
id: '1',
|
|
1725
|
+
text: 'Essen',
|
|
1726
|
+
color: 'red',
|
|
1727
|
+
icons: ['fa fa-burger'],
|
|
1728
|
+
count: 5,
|
|
1729
|
+
},
|
|
1730
|
+
{
|
|
1731
|
+
id: '2',
|
|
1732
|
+
text: 'Getränke',
|
|
1733
|
+
color: 'green',
|
|
1734
|
+
icons: ['fa fa-bottle-water'],
|
|
1735
|
+
count: 74,
|
|
1736
|
+
},
|
|
1737
|
+
{
|
|
1738
|
+
id: '3',
|
|
1739
|
+
text: 'Nachtisch',
|
|
1740
|
+
color: 'blue',
|
|
1741
|
+
icons: ['fa fa-pie'],
|
|
1742
|
+
isDisabled: true,
|
|
1743
|
+
count: 32,
|
|
1744
|
+
},
|
|
1745
|
+
{
|
|
1746
|
+
id: '4',
|
|
1747
|
+
text: 'Snacks',
|
|
1748
|
+
color: 'purple',
|
|
1749
|
+
icons: ['fa fa-cookie'],
|
|
1750
|
+
count: 45,
|
|
1751
|
+
},
|
|
1752
|
+
],
|
|
1753
|
+
size: FilterButtonSize.Small,
|
|
1754
|
+
}}
|
|
1755
|
+
/>
|
|
1756
|
+
```
|
|
1757
|
+
|
|
1758
|
+
#### Only Sort
|
|
1759
|
+
|
|
1760
|
+
```tsx
|
|
1761
|
+
<Filter
|
|
1762
|
+
headline={'Sortierung'}
|
|
1763
|
+
sortConfig={{
|
|
1764
|
+
items: [
|
|
1765
|
+
{ text: 'alphanumerisch', id: 'alphanumerisch' },
|
|
1766
|
+
{ text: 'zuletzt hinzugefügt', id: 'latest' },
|
|
1767
|
+
],
|
|
1768
|
+
selectedItem: { text: 'alphanumerisch', id: 'alphanumerisch' },
|
|
1769
|
+
onSortChange: () => {},
|
|
1770
|
+
}}
|
|
1771
|
+
/>
|
|
1772
|
+
```
|
|
1773
|
+
|
|
1774
|
+
#### Only Checkbox
|
|
1775
|
+
|
|
1776
|
+
```tsx
|
|
1777
|
+
<Filter
|
|
1778
|
+
headline={'Checkbox'}
|
|
1779
|
+
checkboxConfig={{
|
|
1780
|
+
children: 'Checkbox Label',
|
|
1781
|
+
}}
|
|
1782
|
+
/>
|
|
1783
|
+
```
|
|
1784
|
+
|
|
1785
|
+
### Props
|
|
1786
|
+
|
|
1787
|
+
No prop documentation available.
|
|
1788
|
+
|
|
1789
|
+
### Types
|
|
1790
|
+
|
|
1791
|
+
No additional exported types documented.
|
|
1792
|
+
|
|
1793
|
+
### Usage Notes
|
|
1794
|
+
|
|
1795
|
+
- Import `Filter` directly from `@chayns-components/core` instead of internal source paths.
|
|
1796
|
+
- Start with one of the documented Storybook examples and adapt the props incrementally for your use case.
|
|
1797
|
+
|
|
1798
|
+
### Anti Patterns
|
|
1799
|
+
|
|
1800
|
+
- Avoid imports from internal paths such as `@chayns-components/core/src/...`; always use the public package export.
|
|
1801
|
+
## FilterButtons
|
|
1802
|
+
|
|
1803
|
+
`FilterButtons` is exported by `@chayns-components/core` and should be imported from the public package entry point.
|
|
1804
|
+
|
|
1805
|
+
### Import
|
|
1806
|
+
|
|
1807
|
+
```ts
|
|
1808
|
+
import { FilterButtons } from '@chayns-components/core';
|
|
1809
|
+
```
|
|
1810
|
+
|
|
1811
|
+
### Examples
|
|
1812
|
+
|
|
1813
|
+
#### General
|
|
1814
|
+
|
|
1815
|
+
```tsx
|
|
1816
|
+
<FilterButtons
|
|
1817
|
+
items={[
|
|
1818
|
+
{
|
|
1819
|
+
id: '1',
|
|
1820
|
+
text: 'Essen',
|
|
1821
|
+
color: 'red',
|
|
1822
|
+
icons: ['fa fa-burger'],
|
|
1823
|
+
count: 5,
|
|
1824
|
+
},
|
|
1825
|
+
{
|
|
1826
|
+
id: '2',
|
|
1827
|
+
text: 'Getränke',
|
|
1828
|
+
color: 'green',
|
|
1829
|
+
icons: ['fa fa-bottle-water'],
|
|
1830
|
+
count: 74,
|
|
1831
|
+
},
|
|
1832
|
+
{
|
|
1833
|
+
id: '3',
|
|
1834
|
+
text: 'Nachtisch',
|
|
1835
|
+
color: 'blue',
|
|
1836
|
+
icons: ['fa fa-pie'],
|
|
1837
|
+
isDisabled: true,
|
|
1838
|
+
count: 32,
|
|
1839
|
+
},
|
|
1840
|
+
{
|
|
1841
|
+
id: '4',
|
|
1842
|
+
text: 'Snacks',
|
|
1843
|
+
color: 'purple',
|
|
1844
|
+
icons: ['fa fa-cookie'],
|
|
1845
|
+
count: 45,
|
|
1846
|
+
},
|
|
1847
|
+
]}
|
|
1848
|
+
/>
|
|
1849
|
+
```
|
|
1850
|
+
|
|
1851
|
+
#### Filter Button With Small Buttons
|
|
1852
|
+
|
|
1853
|
+
```tsx
|
|
1854
|
+
<FilterButtons
|
|
1855
|
+
items={[
|
|
1856
|
+
{
|
|
1857
|
+
id: '1',
|
|
1858
|
+
text: 'Essen',
|
|
1859
|
+
color: 'red',
|
|
1860
|
+
icons: ['fa fa-burger'],
|
|
1861
|
+
count: 5,
|
|
1862
|
+
},
|
|
1863
|
+
{
|
|
1864
|
+
id: '2',
|
|
1865
|
+
text: 'Getränke',
|
|
1866
|
+
color: 'green',
|
|
1867
|
+
icons: ['fa fa-bottle-water'],
|
|
1868
|
+
count: 74,
|
|
1869
|
+
},
|
|
1870
|
+
{
|
|
1871
|
+
id: '3',
|
|
1872
|
+
text: 'Nachtisch',
|
|
1873
|
+
color: 'blue',
|
|
1874
|
+
icons: ['fa fa-pie'],
|
|
1875
|
+
isDisabled: true,
|
|
1876
|
+
count: 32,
|
|
1877
|
+
},
|
|
1878
|
+
{
|
|
1879
|
+
id: '4',
|
|
1880
|
+
text: 'Snacks',
|
|
1881
|
+
color: 'purple',
|
|
1882
|
+
icons: ['fa fa-cookie'],
|
|
1883
|
+
count: 45,
|
|
1884
|
+
},
|
|
1885
|
+
]}
|
|
1886
|
+
size={FilterButtonSize.Small}
|
|
1887
|
+
/>
|
|
1888
|
+
```
|
|
1889
|
+
|
|
1890
|
+
#### Filter Button With Selected Ids
|
|
1891
|
+
|
|
1892
|
+
```tsx
|
|
1893
|
+
<FilterButtons
|
|
1894
|
+
items={[
|
|
1895
|
+
{
|
|
1896
|
+
id: '1',
|
|
1897
|
+
text: 'Essen',
|
|
1898
|
+
color: 'red',
|
|
1899
|
+
icons: ['fa fa-burger'],
|
|
1900
|
+
count: 5,
|
|
1901
|
+
},
|
|
1902
|
+
{
|
|
1903
|
+
id: '2',
|
|
1904
|
+
text: 'Getränke',
|
|
1905
|
+
color: 'green',
|
|
1906
|
+
icons: ['fa fa-bottle-water'],
|
|
1907
|
+
count: 74,
|
|
1908
|
+
},
|
|
1909
|
+
{
|
|
1910
|
+
id: '3',
|
|
1911
|
+
text: 'Nachtisch',
|
|
1912
|
+
color: 'blue',
|
|
1913
|
+
icons: ['fa fa-pie'],
|
|
1914
|
+
isDisabled: true,
|
|
1915
|
+
count: 32,
|
|
1916
|
+
},
|
|
1917
|
+
{
|
|
1918
|
+
id: '4',
|
|
1919
|
+
text: 'Snacks',
|
|
1920
|
+
color: 'purple',
|
|
1921
|
+
icons: ['fa fa-cookie'],
|
|
1922
|
+
count: 45,
|
|
1923
|
+
},
|
|
1924
|
+
]}
|
|
1925
|
+
selectedItemIds={['1', '3']}
|
|
1926
|
+
/>
|
|
1927
|
+
```
|
|
1928
|
+
|
|
1929
|
+
### Props
|
|
1930
|
+
|
|
1931
|
+
No prop documentation available.
|
|
1932
|
+
|
|
1933
|
+
### Types
|
|
1934
|
+
|
|
1935
|
+
No additional exported types documented.
|
|
1936
|
+
|
|
1937
|
+
### Usage Notes
|
|
1938
|
+
|
|
1939
|
+
- Import `FilterButtons` directly from `@chayns-components/core` instead of internal source paths.
|
|
1940
|
+
- Start with one of the documented Storybook examples and adapt the props incrementally for your use case.
|
|
1941
|
+
|
|
1942
|
+
### Anti Patterns
|
|
1943
|
+
|
|
1944
|
+
- Avoid imports from internal paths such as `@chayns-components/core/src/...`; always use the public package export.
|
|
1945
|
+
## GridImage
|
|
1946
|
+
|
|
1947
|
+
`GridImage` is exported by `@chayns-components/core` and should be imported from the public package entry point.
|
|
1948
|
+
|
|
1949
|
+
### Import
|
|
1950
|
+
|
|
1951
|
+
```ts
|
|
1952
|
+
import { GridImage } from '@chayns-components/core';
|
|
1953
|
+
```
|
|
1954
|
+
|
|
1955
|
+
### Examples
|
|
1956
|
+
|
|
1957
|
+
#### General
|
|
1958
|
+
|
|
1959
|
+
```tsx
|
|
1960
|
+
<GridImage
|
|
1961
|
+
images={[
|
|
1962
|
+
'https://tsimg.cloud/77896-21884/8aee1a304297729a4542b97325940a656a3da8f2.png',
|
|
1963
|
+
'https://tsimg.cloud/77896-21884/54a117f35e5fb57520e64471461af5491c0eff06.png',
|
|
1964
|
+
'https://tsimg.cloud/77896-21884/25399416f38c1d960f521a3530c8a2bc70a88bb9.png',
|
|
1965
|
+
'https://tsimg.cloud/77896-21884/fce5e30f68c75c8c524cc9ac0887832f263b79ff.png',
|
|
1966
|
+
]}
|
|
1967
|
+
size={250}
|
|
1968
|
+
/>
|
|
1969
|
+
```
|
|
1970
|
+
|
|
1971
|
+
### Props
|
|
1972
|
+
|
|
1973
|
+
No prop documentation available.
|
|
1974
|
+
|
|
1975
|
+
### Types
|
|
1976
|
+
|
|
1977
|
+
No additional exported types documented.
|
|
1978
|
+
|
|
1979
|
+
### Usage Notes
|
|
1980
|
+
|
|
1981
|
+
- Import `GridImage` directly from `@chayns-components/core` instead of internal source paths.
|
|
1982
|
+
- Start with one of the documented Storybook examples and adapt the props incrementally for your use case.
|
|
1983
|
+
|
|
1984
|
+
### Anti Patterns
|
|
1985
|
+
|
|
1986
|
+
- Avoid imports from internal paths such as `@chayns-components/core/src/...`; always use the public package export.
|
|
1987
|
+
## GroupedImage
|
|
1988
|
+
|
|
1989
|
+
`GroupedImage` is exported by `@chayns-components/core` and should be imported from the public package entry point.
|
|
1990
|
+
|
|
1991
|
+
### Import
|
|
1992
|
+
|
|
1993
|
+
```ts
|
|
1994
|
+
import { GroupedImage } from '@chayns-components/core';
|
|
1995
|
+
```
|
|
1996
|
+
|
|
1997
|
+
### Examples
|
|
1998
|
+
|
|
1999
|
+
#### General
|
|
2000
|
+
|
|
2001
|
+
```tsx
|
|
2002
|
+
<GroupedImage
|
|
2003
|
+
images={[
|
|
2004
|
+
'https://picsum.photos/id/669/160/160.jpg',
|
|
2005
|
+
'https://picsum.photos/id/823/160/160.jpg',
|
|
2006
|
+
]}
|
|
2007
|
+
shouldPreventBackground={false}
|
|
2008
|
+
shouldShowRoundImage
|
|
2009
|
+
/>
|
|
2010
|
+
```
|
|
2011
|
+
|
|
2012
|
+
#### Larger Dimensions
|
|
2013
|
+
|
|
2014
|
+
```tsx
|
|
2015
|
+
<GroupedImage
|
|
2016
|
+
images={[
|
|
2017
|
+
'https://picsum.photos/id/669/320/320.jpg',
|
|
2018
|
+
'https://picsum.photos/id/823/320/320.jpg',
|
|
2019
|
+
]}
|
|
2020
|
+
shouldPreventBackground={false}
|
|
2021
|
+
shouldShowRoundImage
|
|
2022
|
+
height={'80px'}
|
|
2023
|
+
/>
|
|
2024
|
+
```
|
|
2025
|
+
|
|
2026
|
+
#### With Corner Image
|
|
2027
|
+
|
|
2028
|
+
```tsx
|
|
2029
|
+
<GroupedImage
|
|
2030
|
+
images={[
|
|
2031
|
+
'https://picsum.photos/id/669/160/160.jpg',
|
|
2032
|
+
'https://picsum.photos/id/823/160/160.jpg',
|
|
2033
|
+
]}
|
|
2034
|
+
shouldPreventBackground={false}
|
|
2035
|
+
shouldShowRoundImage
|
|
2036
|
+
cornerImage={'https://sub60.tobit.com/l/1214?size=160'}
|
|
2037
|
+
/>
|
|
2038
|
+
```
|
|
2039
|
+
|
|
2040
|
+
### Props
|
|
2041
|
+
|
|
2042
|
+
No prop documentation available.
|
|
2043
|
+
|
|
2044
|
+
### Types
|
|
2045
|
+
|
|
2046
|
+
No additional exported types documented.
|
|
2047
|
+
|
|
2048
|
+
### Usage Notes
|
|
2049
|
+
|
|
2050
|
+
- Import `GroupedImage` directly from `@chayns-components/core` instead of internal source paths.
|
|
2051
|
+
- Start with one of the documented Storybook examples and adapt the props incrementally for your use case.
|
|
2052
|
+
|
|
2053
|
+
### Anti Patterns
|
|
2054
|
+
|
|
2055
|
+
- Avoid imports from internal paths such as `@chayns-components/core/src/...`; always use the public package export.
|
|
2056
|
+
## HighlightSlider
|
|
2057
|
+
|
|
2058
|
+
`HighlightSlider` is exported by `@chayns-components/core` and should be imported from the public package entry point.
|
|
2059
|
+
|
|
2060
|
+
### Import
|
|
2061
|
+
|
|
2062
|
+
```ts
|
|
2063
|
+
import { HighlightSlider } from '@chayns-components/core';
|
|
2064
|
+
```
|
|
2065
|
+
|
|
2066
|
+
### Examples
|
|
2067
|
+
|
|
2068
|
+
#### General
|
|
2069
|
+
|
|
2070
|
+
```tsx
|
|
2071
|
+
<HighlightSlider
|
|
2072
|
+
count={5}
|
|
2073
|
+
/>
|
|
2074
|
+
```
|
|
2075
|
+
|
|
2076
|
+
### Props
|
|
2077
|
+
|
|
2078
|
+
No prop documentation available.
|
|
2079
|
+
|
|
2080
|
+
### Types
|
|
2081
|
+
|
|
2082
|
+
No additional exported types documented.
|
|
2083
|
+
|
|
2084
|
+
### Usage Notes
|
|
2085
|
+
|
|
2086
|
+
- Import `HighlightSlider` directly from `@chayns-components/core` instead of internal source paths.
|
|
2087
|
+
- Start with one of the documented Storybook examples and adapt the props incrementally for your use case.
|
|
2088
|
+
|
|
2089
|
+
### Anti Patterns
|
|
2090
|
+
|
|
2091
|
+
- Avoid imports from internal paths such as `@chayns-components/core/src/...`; always use the public package export.
|
|
2092
|
+
## Icon
|
|
2093
|
+
|
|
2094
|
+
`Icon` is exported by `@chayns-components/core` and should be imported from the public package entry point.
|
|
2095
|
+
|
|
2096
|
+
### Import
|
|
2097
|
+
|
|
2098
|
+
```ts
|
|
2099
|
+
import { Icon } from '@chayns-components/core';
|
|
2100
|
+
```
|
|
2101
|
+
|
|
2102
|
+
### Examples
|
|
2103
|
+
|
|
2104
|
+
#### General
|
|
2105
|
+
|
|
2106
|
+
```tsx
|
|
2107
|
+
<Icon
|
|
2108
|
+
icons={['ts-chayns']}
|
|
2109
|
+
isDisabled={false}
|
|
2110
|
+
shouldStopPropagation={false}
|
|
2111
|
+
size={24}
|
|
2112
|
+
/>
|
|
2113
|
+
```
|
|
2114
|
+
|
|
2115
|
+
#### Stacked Icon
|
|
2116
|
+
|
|
2117
|
+
```tsx
|
|
2118
|
+
<Icon
|
|
2119
|
+
icons={['fa fa-circle fa-stack-2x', 'fa fa-french-fries fa-inverse']}
|
|
2120
|
+
isDisabled={false}
|
|
2121
|
+
shouldStopPropagation={false}
|
|
2122
|
+
size={64}
|
|
2123
|
+
/>
|
|
2124
|
+
```
|
|
2125
|
+
|
|
2126
|
+
### Props
|
|
2127
|
+
|
|
2128
|
+
No prop documentation available.
|
|
2129
|
+
|
|
2130
|
+
### Types
|
|
2131
|
+
|
|
2132
|
+
No additional exported types documented.
|
|
2133
|
+
|
|
2134
|
+
### Usage Notes
|
|
2135
|
+
|
|
2136
|
+
- Import `Icon` directly from `@chayns-components/core` instead of internal source paths.
|
|
2137
|
+
- Start with one of the documented Storybook examples and adapt the props incrementally for your use case.
|
|
2138
|
+
|
|
2139
|
+
### Anti Patterns
|
|
2140
|
+
|
|
2141
|
+
- Avoid imports from internal paths such as `@chayns-components/core/src/...`; always use the public package export.
|
|
2142
|
+
## Input
|
|
2143
|
+
|
|
2144
|
+
`Input` is exported by `@chayns-components/core` and should be imported from the public package entry point.
|
|
2145
|
+
|
|
2146
|
+
### Import
|
|
2147
|
+
|
|
2148
|
+
```ts
|
|
2149
|
+
import { Input } from '@chayns-components/core';
|
|
2150
|
+
```
|
|
2151
|
+
|
|
2152
|
+
### Examples
|
|
2153
|
+
|
|
2154
|
+
#### General
|
|
2155
|
+
|
|
2156
|
+
```tsx
|
|
2157
|
+
<Input
|
|
2158
|
+
placeholder={'Try me out'}
|
|
2159
|
+
/>
|
|
2160
|
+
```
|
|
2161
|
+
|
|
2162
|
+
#### With Right Element
|
|
2163
|
+
|
|
2164
|
+
```tsx
|
|
2165
|
+
<Input
|
|
2166
|
+
placeholder={'Try me out'}
|
|
2167
|
+
rightElement={<div
|
|
2168
|
+
style={{
|
|
2169
|
+
backgroundColor: '#3377b6',
|
|
2170
|
+
height: '42px',
|
|
2171
|
+
width: '42px',
|
|
2172
|
+
display: 'flex',
|
|
2173
|
+
alignItems: 'center',
|
|
2174
|
+
justifyContent: 'center',
|
|
2175
|
+
}}
|
|
2176
|
+
>
|
|
2177
|
+
<Icon icons={['ts-calling-code']} size={25} color={'white'} />
|
|
2178
|
+
</div>}
|
|
2179
|
+
/>
|
|
2180
|
+
```
|
|
2181
|
+
|
|
2182
|
+
#### With Dynamic Placeholders
|
|
2183
|
+
|
|
2184
|
+
```tsx
|
|
2185
|
+
<Input
|
|
2186
|
+
placeholder={<Typewriter
|
|
2187
|
+
children={[
|
|
2188
|
+
'Erstelle mir einen Bericht über...',
|
|
2189
|
+
'Erkläre mir die Photosynthese.',
|
|
2190
|
+
'Wie sage ich auf englisch...',
|
|
2191
|
+
]}
|
|
2192
|
+
shouldHideCursor
|
|
2193
|
+
/>}
|
|
2194
|
+
/>
|
|
2195
|
+
```
|
|
2196
|
+
|
|
2197
|
+
### Props
|
|
2198
|
+
|
|
2199
|
+
No prop documentation available.
|
|
2200
|
+
|
|
2201
|
+
### Types
|
|
2202
|
+
|
|
2203
|
+
No additional exported types documented.
|
|
2204
|
+
|
|
2205
|
+
### Usage Notes
|
|
2206
|
+
|
|
2207
|
+
- Import `Input` directly from `@chayns-components/core` instead of internal source paths.
|
|
2208
|
+
- Start with one of the documented Storybook examples and adapt the props incrementally for your use case.
|
|
2209
|
+
|
|
2210
|
+
### Anti Patterns
|
|
2211
|
+
|
|
2212
|
+
- Avoid imports from internal paths such as `@chayns-components/core/src/...`; always use the public package export.
|
|
2213
|
+
## List
|
|
2214
|
+
|
|
2215
|
+
`List` is exported by `@chayns-components/core` and should be imported from the public package entry point.
|
|
2216
|
+
|
|
2217
|
+
### Import
|
|
2218
|
+
|
|
2219
|
+
```ts
|
|
2220
|
+
import { List, ListItem } from '@chayns-components/core';
|
|
2221
|
+
```
|
|
2222
|
+
|
|
2223
|
+
### Examples
|
|
2224
|
+
|
|
2225
|
+
#### General
|
|
2226
|
+
|
|
2227
|
+
```tsx
|
|
2228
|
+
<List>
|
|
2229
|
+
{
|
|
2230
|
+
[
|
|
2231
|
+
<ListItem
|
|
2232
|
+
shouldShowTooltipOnTitleOverflow
|
|
2233
|
+
subtitle="Stet clita kasd gubergren"
|
|
2234
|
+
title="Lorem ipsum dolor sit amet, consetetur sadipscing elitr"
|
|
2235
|
+
/>,
|
|
2236
|
+
<ListItem
|
|
2237
|
+
shouldShowTooltipOnTitleOverflow
|
|
2238
|
+
subtitle="Lorem ipsum dolor sit amet"
|
|
2239
|
+
title="Stet clita kasd gubergren, no sea takimata sanctus est"
|
|
2240
|
+
/>,
|
|
2241
|
+
<ListItem
|
|
2242
|
+
shouldShowTooltipOnTitleOverflow
|
|
2243
|
+
subtitle="Consetetur sadipscing elitr"
|
|
2244
|
+
title="At vero eos et accusam et justo duo dolores et ea rebum sit amet dolor sea takimata sanctus est"
|
|
2245
|
+
/>,
|
|
2246
|
+
<ListItem
|
|
2247
|
+
shouldShowTooltipOnTitleOverflow
|
|
2248
|
+
subtitle="No sea takimata sanctus est"
|
|
2249
|
+
title="Lorem ipsum dolor sit amet, consetetur sadipscing elitr"
|
|
2250
|
+
/>,
|
|
2251
|
+
]
|
|
2252
|
+
}
|
|
2253
|
+
</List>
|
|
2254
|
+
```
|
|
2255
|
+
|
|
2256
|
+
#### List Items With Image
|
|
2257
|
+
|
|
2258
|
+
```tsx
|
|
2259
|
+
<List>
|
|
2260
|
+
{
|
|
2261
|
+
[
|
|
2262
|
+
<ListItem
|
|
2263
|
+
images={[images[0]]}
|
|
2264
|
+
subtitle="Sadipscing elitr dolor sit"
|
|
2265
|
+
shouldShowRoundImageOrIcon
|
|
2266
|
+
title="Lorem ipsum dolor sit amet, consetetur sadipscing elitr"
|
|
2267
|
+
/>,
|
|
2268
|
+
<ListItem
|
|
2269
|
+
images={[images[1]]}
|
|
2270
|
+
subtitle="Stet clita kasd gubergren"
|
|
2271
|
+
shouldShowRoundImageOrIcon
|
|
2272
|
+
title="Stet clita kasd gubergren, no sea takimata sanctus est"
|
|
2273
|
+
/>,
|
|
2274
|
+
<ListItem
|
|
2275
|
+
images={[images[2]]}
|
|
2276
|
+
subtitle="At vero eos et accusam"
|
|
2277
|
+
shouldShowRoundImageOrIcon
|
|
2278
|
+
title="At vero eos et accusam et justo duo dolores et ea rebum sit amet dolor"
|
|
2279
|
+
/>,
|
|
2280
|
+
<ListItem
|
|
2281
|
+
images={[images[3]]}
|
|
2282
|
+
subtitle="Dolor sit ipsum amet"
|
|
2283
|
+
shouldShowRoundImageOrIcon
|
|
2284
|
+
title="Lorem ipsum dolor sit amet, consetetur sadipscing elitr"
|
|
2285
|
+
/>,
|
|
2286
|
+
]
|
|
2287
|
+
}
|
|
2288
|
+
</List>
|
|
2289
|
+
```
|
|
2290
|
+
|
|
2291
|
+
#### List Items With Grid Image
|
|
2292
|
+
|
|
2293
|
+
```tsx
|
|
2294
|
+
<List>
|
|
2295
|
+
{
|
|
2296
|
+
[
|
|
2297
|
+
<ListItem
|
|
2298
|
+
images={images}
|
|
2299
|
+
subtitle="Sadipscing elitr dolor sit"
|
|
2300
|
+
shouldShowRoundImageOrIcon
|
|
2301
|
+
shouldOpenImageOnClick
|
|
2302
|
+
title="Lorem ipsum dolor sit amet, consetetur sadipscing elitr"
|
|
2303
|
+
/>,
|
|
2304
|
+
<ListItem
|
|
2305
|
+
images={otherImages}
|
|
2306
|
+
subtitle="Dolor sit ipsum amet"
|
|
2307
|
+
shouldShowRoundImageOrIcon
|
|
2308
|
+
title="Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet"
|
|
2309
|
+
/>,
|
|
2310
|
+
]
|
|
2311
|
+
}
|
|
2312
|
+
</List>
|
|
2313
|
+
```
|
|
2314
|
+
|
|
2315
|
+
#### List Items With Right Elements
|
|
2316
|
+
|
|
2317
|
+
```tsx
|
|
2318
|
+
<List>
|
|
2319
|
+
{
|
|
2320
|
+
[
|
|
2321
|
+
<ListItem
|
|
2322
|
+
images={[locationImages[0]]}
|
|
2323
|
+
rightElements={{
|
|
2324
|
+
center: <AmountControl />,
|
|
2325
|
+
}}
|
|
2326
|
+
title="Lorem ipsum dolor sit amet, consetetur sadipscing elitr consetetur"
|
|
2327
|
+
subtitle="Lorem ipsum dolor sit amet, consetetur sadipscing elitr consetetur amet dolor"
|
|
2328
|
+
/>,
|
|
2329
|
+
<ListItem
|
|
2330
|
+
images={[locationImages[1]]}
|
|
2331
|
+
rightElements={<AmountControl />}
|
|
2332
|
+
title="No sea takimata sanctus est Lorem ipsum dolor sit amet"
|
|
2333
|
+
/>,
|
|
2334
|
+
<ListItem
|
|
2335
|
+
images={[locationImages[1]]}
|
|
2336
|
+
rightElements={{
|
|
2337
|
+
center: <AmountControl />,
|
|
2338
|
+
}}
|
|
2339
|
+
subtitle="Dolor sit ipsum amet"
|
|
2340
|
+
title="gubergren, no sea takimata"
|
|
2341
|
+
>
|
|
2342
|
+
<ListItemContent>
|
|
2343
|
+
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod
|
|
2344
|
+
tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero
|
|
2345
|
+
eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea
|
|
2346
|
+
takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet,
|
|
2347
|
+
consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et
|
|
2348
|
+
dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo
|
|
2349
|
+
dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem
|
|
2350
|
+
ipsum dolor sit amet.
|
|
2351
|
+
</ListItemContent>
|
|
2352
|
+
</ListItem>,
|
|
2353
|
+
<ListItem
|
|
2354
|
+
images={[locationImages[1]]}
|
|
2355
|
+
rightElements={<AmountControl />}
|
|
2356
|
+
subtitle="Dolor sit ipsum amet"
|
|
2357
|
+
title="gubergren, no sea takimata"
|
|
2358
|
+
>
|
|
2359
|
+
<ListItemContent>
|
|
2360
|
+
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod
|
|
2361
|
+
tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero
|
|
2362
|
+
eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea
|
|
2363
|
+
takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet,
|
|
2364
|
+
consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et
|
|
2365
|
+
dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo
|
|
2366
|
+
dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem
|
|
2367
|
+
ipsum dolor sit amet.
|
|
2368
|
+
</ListItemContent>
|
|
2369
|
+
</ListItem>,
|
|
2370
|
+
<ListItem
|
|
2371
|
+
images={[locationImages[1]]}
|
|
2372
|
+
rightElements={{
|
|
2373
|
+
top: (
|
|
2374
|
+
<Badge backgroundColor="lightgreen" fontColor="white">
|
|
2375
|
+
- 13,54%
|
|
2376
|
+
</Badge>
|
|
2377
|
+
),
|
|
2378
|
+
bottom: 'Bottom',
|
|
2379
|
+
center: <Icon icons={['fa fa-star']} />,
|
|
2380
|
+
}}
|
|
2381
|
+
title="gubergren, no sea takimata"
|
|
2382
|
+
>
|
|
2383
|
+
<ListItemContent>
|
|
2384
|
+
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod
|
|
2385
|
+
tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero
|
|
2386
|
+
eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea
|
|
2387
|
+
takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet,
|
|
2388
|
+
consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et
|
|
2389
|
+
dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo
|
|
2390
|
+
dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem
|
|
2391
|
+
ipsum dolor sit amet.
|
|
2392
|
+
</ListItemContent>
|
|
2393
|
+
</ListItem>,
|
|
2394
|
+
<ListItem
|
|
2395
|
+
images={[locationImages[2]]}
|
|
2396
|
+
rightElements={{
|
|
2397
|
+
top: '08:57 Uhr',
|
|
2398
|
+
}}
|
|
2399
|
+
subtitle="Dolor sit ipsum amet"
|
|
2400
|
+
title="sanctus est lorem ipsum dolor sit amet"
|
|
2401
|
+
/>,
|
|
2402
|
+
<ListItem
|
|
2403
|
+
images={[locationImages[2]]}
|
|
2404
|
+
rightElements={{
|
|
2405
|
+
bottom: '08:57 Uhr',
|
|
2406
|
+
}}
|
|
2407
|
+
subtitle="Dolor sit ipsum amet"
|
|
2408
|
+
title="sanctus est lorem ipsum dolor sit amet"
|
|
2409
|
+
/>,
|
|
2410
|
+
<ListItem
|
|
2411
|
+
images={[locationImages[2]]}
|
|
2412
|
+
rightElements={{
|
|
2413
|
+
top: 'Top',
|
|
2414
|
+
bottom: '08:57 Uhr',
|
|
2415
|
+
topAlignment: 'start',
|
|
2416
|
+
}}
|
|
2417
|
+
subtitle="Dolor sit ipsum amet"
|
|
2418
|
+
title="sanctus est lorem ipsum dolor sit amet"
|
|
2419
|
+
/>,
|
|
2420
|
+
]
|
|
2421
|
+
}
|
|
2422
|
+
</List>
|
|
2423
|
+
```
|
|
2424
|
+
|
|
2425
|
+
#### List Items With Separator
|
|
2426
|
+
|
|
2427
|
+
```tsx
|
|
2428
|
+
<List>
|
|
2429
|
+
{
|
|
2430
|
+
[
|
|
2431
|
+
<ListItem
|
|
2432
|
+
images={[locationImages[0]]}
|
|
2433
|
+
subtitle="Sadipscing elitr dolor sit"
|
|
2434
|
+
title="Lorem ipsum dolor sit amet, consetetur sadipscing elitr"
|
|
2435
|
+
/>,
|
|
2436
|
+
<ListItem
|
|
2437
|
+
images={[locationImages[1]]}
|
|
2438
|
+
subtitle="Sadipscing elitr dolor sit"
|
|
2439
|
+
title="Lorem ipsum dolor sit amet, consetetur sadipscing elitr"
|
|
2440
|
+
/>,
|
|
2441
|
+
<ListItem
|
|
2442
|
+
images={[locationImages[2]]}
|
|
2443
|
+
shouldShowSeparatorBelow
|
|
2444
|
+
subtitle="Sadipscing elitr dolor sit"
|
|
2445
|
+
title="Lorem ipsum dolor sit amet, consetetur sadipscing elitr"
|
|
2446
|
+
/>,
|
|
2447
|
+
<ListItem
|
|
2448
|
+
images={[locationImages[0]]}
|
|
2449
|
+
subtitle="Sadipscing elitr dolor sit"
|
|
2450
|
+
title="Lorem ipsum dolor sit amet, consetetur sadipscing elitr"
|
|
2451
|
+
/>,
|
|
2452
|
+
<ListItem
|
|
2453
|
+
images={[locationImages[1]]}
|
|
2454
|
+
subtitle="Sadipscing elitr dolor sit"
|
|
2455
|
+
title="Lorem ipsum dolor sit amet, consetetur sadipscing elitr"
|
|
2456
|
+
/>,
|
|
2457
|
+
<ListItem
|
|
2458
|
+
images={[locationImages[2]]}
|
|
2459
|
+
subtitle="Sadipscing elitr dolor sit"
|
|
2460
|
+
title="Lorem ipsum dolor sit amet, consetetur sadipscing elitr"
|
|
2461
|
+
/>,
|
|
2462
|
+
]
|
|
2463
|
+
}
|
|
2464
|
+
</List>
|
|
2465
|
+
```
|
|
2466
|
+
|
|
2467
|
+
#### List Items With Button As Right Elements
|
|
2468
|
+
|
|
2469
|
+
```tsx
|
|
2470
|
+
<List>
|
|
2471
|
+
{
|
|
2472
|
+
[
|
|
2473
|
+
<ListItem images={[otherImages[0]]} subtitle="Max Mustermann" title="Ballermann Hits">
|
|
2474
|
+
<List>
|
|
2475
|
+
<ListItem
|
|
2476
|
+
images={[locationImages[0]]}
|
|
2477
|
+
subtitle="Julian Sommer"
|
|
2478
|
+
title="Oben Ohne"
|
|
2479
|
+
rightElements={{
|
|
2480
|
+
center: (
|
|
2481
|
+
<Button icon="fa fa-plus" onClick={() => {}}>
|
|
2482
|
+
Hinzufügen
|
|
2483
|
+
</Button>
|
|
2484
|
+
),
|
|
2485
|
+
}}
|
|
2486
|
+
/>
|
|
2487
|
+
<ListItem
|
|
2488
|
+
images={[locationImages[1]]}
|
|
2489
|
+
subtitle="Julian Sommer"
|
|
2490
|
+
title="Morgen kickt der Kater"
|
|
2491
|
+
rightElements={{
|
|
2492
|
+
center: (
|
|
2493
|
+
<Button icon="fa fa-plus" onClick={() => {}}>
|
|
2494
|
+
Hinzufügen
|
|
2495
|
+
</Button>
|
|
2496
|
+
),
|
|
2497
|
+
}}
|
|
2498
|
+
/>
|
|
2499
|
+
<ListItem
|
|
2500
|
+
images={[locationImages[2]]}
|
|
2501
|
+
subtitle="Bierkapitän x Eko Fresh"
|
|
2502
|
+
title="Ihr könnt mich alle"
|
|
2503
|
+
rightElements={{ center: <Badge>Hinzugefügt</Badge> }}
|
|
2504
|
+
/>
|
|
2505
|
+
</List>
|
|
2506
|
+
</ListItem>,
|
|
2507
|
+
<ListItem images={[otherImages[1]]} subtitle="Doris Musterfrau" title="Vevo Top Hits" />,
|
|
2508
|
+
]
|
|
2509
|
+
}
|
|
2510
|
+
</List>
|
|
2511
|
+
```
|
|
2512
|
+
|
|
2513
|
+
#### List Items With Hover Item
|
|
2514
|
+
|
|
2515
|
+
```tsx
|
|
2516
|
+
<List>
|
|
2517
|
+
{
|
|
2518
|
+
[
|
|
2519
|
+
<ListItem
|
|
2520
|
+
hoverItem={<Icon icons={['far fa-arrows-v']} />}
|
|
2521
|
+
images={[locationImages[0]]}
|
|
2522
|
+
subtitle="Sadipscing elitr dolor sit"
|
|
2523
|
+
title="Lorem ipsum dolor sit amet, consetetur sadipscing elitr"
|
|
2524
|
+
/>,
|
|
2525
|
+
<ListItem
|
|
2526
|
+
hoverItem={<Icon icons={['far fa-arrows-v']} />}
|
|
2527
|
+
images={[locationImages[1]]}
|
|
2528
|
+
subtitle="Dolor sit ipsum amet"
|
|
2529
|
+
title="Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet"
|
|
2530
|
+
/>,
|
|
2531
|
+
]
|
|
2532
|
+
}
|
|
2533
|
+
</List>
|
|
2534
|
+
```
|
|
2535
|
+
|
|
2536
|
+
#### List Items With Icon
|
|
2537
|
+
|
|
2538
|
+
```tsx
|
|
2539
|
+
<List>
|
|
2540
|
+
{
|
|
2541
|
+
[
|
|
2542
|
+
<ListItem
|
|
2543
|
+
icons={['ts-chayns']}
|
|
2544
|
+
subtitle="Sed diam voluptua"
|
|
2545
|
+
title="Lorem ipsum dolor sit amet, consetetur sadipscing elitr"
|
|
2546
|
+
/>,
|
|
2547
|
+
<ListItem
|
|
2548
|
+
icons={['ts-chayns']}
|
|
2549
|
+
subtitle="At vero eos et accusam"
|
|
2550
|
+
title="Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet"
|
|
2551
|
+
/>,
|
|
2552
|
+
<ListItem
|
|
2553
|
+
icons={['ts-chayns']}
|
|
2554
|
+
subtitle="Stet clita kasd gubergren"
|
|
2555
|
+
title="At vero eos et accusam et justo duo dolores et ea rebum sit amet dolor"
|
|
2556
|
+
/>,
|
|
2557
|
+
<ListItem
|
|
2558
|
+
icons={['ts-chayns']}
|
|
2559
|
+
subtitle="At vero eos et accusam et justo duo"
|
|
2560
|
+
title="Lorem ipsum dolor sit amet, consetetur sadipscing elitr"
|
|
2561
|
+
/>,
|
|
2562
|
+
]
|
|
2563
|
+
}
|
|
2564
|
+
</List>
|
|
2565
|
+
```
|
|
2566
|
+
|
|
2567
|
+
#### Expandable List Items
|
|
2568
|
+
|
|
2569
|
+
```tsx
|
|
2570
|
+
<List>
|
|
2571
|
+
{
|
|
2572
|
+
[
|
|
2573
|
+
<ListItem
|
|
2574
|
+
images={[images[0]]}
|
|
2575
|
+
shouldShowRoundImageOrIcon
|
|
2576
|
+
title="Lorem ipsum dolor sit amet, consetetur sadipscing elitr"
|
|
2577
|
+
shouldOpenImageOnClick
|
|
2578
|
+
>
|
|
2579
|
+
<ListItemContent>
|
|
2580
|
+
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod
|
|
2581
|
+
tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero
|
|
2582
|
+
eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea
|
|
2583
|
+
takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet,
|
|
2584
|
+
consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et
|
|
2585
|
+
dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo
|
|
2586
|
+
dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem
|
|
2587
|
+
ipsum dolor sit amet.
|
|
2588
|
+
</ListItemContent>
|
|
2589
|
+
</ListItem>,
|
|
2590
|
+
<ListItem
|
|
2591
|
+
images={[images[1]]}
|
|
2592
|
+
shouldShowRoundImageOrIcon
|
|
2593
|
+
title="Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet"
|
|
2594
|
+
>
|
|
2595
|
+
<ListItemContent>
|
|
2596
|
+
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod
|
|
2597
|
+
tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero
|
|
2598
|
+
eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea
|
|
2599
|
+
takimata sanctus est Lorem ipsum dolor sit amet.
|
|
2600
|
+
</ListItemContent>
|
|
2601
|
+
</ListItem>,
|
|
2602
|
+
<ListItem
|
|
2603
|
+
images={[images[2]]}
|
|
2604
|
+
subtitle="Stet clita kasd gubergren, no sea takimata sanctus"
|
|
2605
|
+
shouldShowRoundImageOrIcon
|
|
2606
|
+
title="At vero eos et accusam et justo duo dolores et ea rebum sit amet dolor"
|
|
2607
|
+
>
|
|
2608
|
+
<ListItemContent>
|
|
2609
|
+
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod
|
|
2610
|
+
tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero
|
|
2611
|
+
eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea
|
|
2612
|
+
takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet,
|
|
2613
|
+
consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et
|
|
2614
|
+
dolore magna aliquyam erat, sed diam voluptua.
|
|
2615
|
+
</ListItemContent>
|
|
2616
|
+
</ListItem>,
|
|
2617
|
+
<ListItem
|
|
2618
|
+
images={[images[3]]}
|
|
2619
|
+
subtitle="Labore et dolore magna aliquyam erat"
|
|
2620
|
+
shouldShowRoundImageOrIcon
|
|
2621
|
+
title="Lorem ipsum dolor sit amet, consetetur sadipscing elitr"
|
|
2622
|
+
>
|
|
2623
|
+
<ListItemContent>
|
|
2624
|
+
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod
|
|
2625
|
+
tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero
|
|
2626
|
+
eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea
|
|
2627
|
+
takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet,
|
|
2628
|
+
consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et
|
|
2629
|
+
dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo
|
|
2630
|
+
dolores et ea rebum.
|
|
2631
|
+
</ListItemContent>
|
|
2632
|
+
</ListItem>,
|
|
2633
|
+
]
|
|
2634
|
+
}
|
|
2635
|
+
</List>
|
|
2636
|
+
```
|
|
2637
|
+
|
|
2638
|
+
#### Mixed List Items
|
|
2639
|
+
|
|
2640
|
+
```tsx
|
|
2641
|
+
<List>
|
|
2642
|
+
{
|
|
2643
|
+
[
|
|
2644
|
+
<ListItem
|
|
2645
|
+
icons={['ts-chayns']}
|
|
2646
|
+
subtitle="Stet clita kasd gubergren, no sea"
|
|
2647
|
+
title="Lorem ipsum dolor sit amet, consetetur sadipscing elitr"
|
|
2648
|
+
/>,
|
|
2649
|
+
<ListItem
|
|
2650
|
+
icons={['fa fa-rocket']}
|
|
2651
|
+
subtitle="Lorem ipsum dolor sit amet, consetetur sadipscing elitr"
|
|
2652
|
+
title="Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet"
|
|
2653
|
+
>
|
|
2654
|
+
<ListItemContent>
|
|
2655
|
+
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod
|
|
2656
|
+
tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero
|
|
2657
|
+
eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea
|
|
2658
|
+
takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet,
|
|
2659
|
+
consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et
|
|
2660
|
+
dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo
|
|
2661
|
+
dolores et ea rebum.
|
|
2662
|
+
</ListItemContent>
|
|
2663
|
+
</ListItem>,
|
|
2664
|
+
<ListItem
|
|
2665
|
+
icons={['ts-chayns']}
|
|
2666
|
+
subtitle="Consetetur sadipscing elitr, sed diam nonumy eirmod"
|
|
2667
|
+
title="At vero eos et accusam et justo duo dolores et ea rebum sit amet dolor"
|
|
2668
|
+
/>,
|
|
2669
|
+
<ListItem
|
|
2670
|
+
icons={['fa fa-rocket']}
|
|
2671
|
+
subtitle="Et justo duo dolores et ea rebum"
|
|
2672
|
+
title="Lorem ipsum dolor sit amet, consetetur sadipscing elitr"
|
|
2673
|
+
>
|
|
2674
|
+
<ListItemContent>
|
|
2675
|
+
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod
|
|
2676
|
+
tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero
|
|
2677
|
+
eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea
|
|
2678
|
+
takimata sanctus est Lorem ipsum dolor sit amet.
|
|
2679
|
+
</ListItemContent>
|
|
2680
|
+
</ListItem>,
|
|
2681
|
+
]
|
|
2682
|
+
}
|
|
2683
|
+
</List>
|
|
2684
|
+
```
|
|
2685
|
+
|
|
2686
|
+
#### List Items With Element As Subtitle
|
|
2687
|
+
|
|
2688
|
+
```tsx
|
|
2689
|
+
<List>
|
|
2690
|
+
{
|
|
2691
|
+
[
|
|
2692
|
+
<ListItem subtitle={<FirstSubtitleElement />} title="Chicken Burger">
|
|
2693
|
+
<ListItemContent>
|
|
2694
|
+
<FirstSubtitleElement />
|
|
2695
|
+
</ListItemContent>
|
|
2696
|
+
</ListItem>,
|
|
2697
|
+
<ListItem subtitle={<SecondSubtitleElement />} title="BamBoo! Prime Steak">
|
|
2698
|
+
<ListItemContent>
|
|
2699
|
+
<SecondSubtitleElement />
|
|
2700
|
+
</ListItemContent>
|
|
2701
|
+
</ListItem>,
|
|
2702
|
+
]
|
|
2703
|
+
}
|
|
2704
|
+
</List>
|
|
2705
|
+
```
|
|
2706
|
+
|
|
2707
|
+
#### List Item With Title Element
|
|
2708
|
+
|
|
2709
|
+
```tsx
|
|
2710
|
+
<List>
|
|
2711
|
+
{
|
|
2712
|
+
[
|
|
2713
|
+
<ListItem
|
|
2714
|
+
icons={['ts-chayns']}
|
|
2715
|
+
subtitle="Stet clita kasd gubergren, no sea"
|
|
2716
|
+
title="Lorem ipsum dolor sit amet, consetetur sadipscing elitr"
|
|
2717
|
+
titleElement={<Icon icons={['fa fa-rocket']} />}
|
|
2718
|
+
/>,
|
|
2719
|
+
<ListItem
|
|
2720
|
+
icons={['fa fa-rocket']}
|
|
2721
|
+
subtitle="Lorem ipsum dolor sit amet, consetetur sadipscing elitr"
|
|
2722
|
+
title="Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet"
|
|
2723
|
+
titleElement={<Icon icons={['ts-chayns']} />}
|
|
2724
|
+
/>,
|
|
2725
|
+
<ListItem
|
|
2726
|
+
icons={['ts-chayns']}
|
|
2727
|
+
subtitle="Consetetur sadipscing elitr, sed diam nonumy eirmod"
|
|
2728
|
+
title="At vero eos et accusam et justo duo dolores et ea rebum sit amet dolor"
|
|
2729
|
+
titleElement={<Icon icons={['fa fa-rocket']} />}
|
|
2730
|
+
/>,
|
|
2731
|
+
<ListItem
|
|
2732
|
+
icons={['fa fa-rocket']}
|
|
2733
|
+
subtitle="Et justo duo dolores et ea rebum"
|
|
2734
|
+
title="Lorem ipsum dolor sit amet, consetetur sadipscing elitr"
|
|
2735
|
+
titleElement={<Icon icons={['ts-chayns']} />}
|
|
2736
|
+
/>,
|
|
2737
|
+
]
|
|
2738
|
+
}
|
|
2739
|
+
</List>
|
|
2740
|
+
```
|
|
2741
|
+
|
|
2742
|
+
#### List Item With Greyed Title
|
|
2743
|
+
|
|
2744
|
+
```tsx
|
|
2745
|
+
<List>
|
|
2746
|
+
{
|
|
2747
|
+
[
|
|
2748
|
+
<ListItem
|
|
2749
|
+
images={[locationImages[0]]}
|
|
2750
|
+
subtitle="Sadipscing elitr dolor sit"
|
|
2751
|
+
title="Lorem ipsum dolor sit amet, consetetur sadipscing elitr"
|
|
2752
|
+
isTitleGreyed
|
|
2753
|
+
shouldRenderClosed
|
|
2754
|
+
>
|
|
2755
|
+
<ListItemContent>
|
|
2756
|
+
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod
|
|
2757
|
+
tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero
|
|
2758
|
+
eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea
|
|
2759
|
+
takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet,
|
|
2760
|
+
consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et
|
|
2761
|
+
dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo
|
|
2762
|
+
dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem
|
|
2763
|
+
ipsum dolor sit amet.
|
|
2764
|
+
</ListItemContent>
|
|
2765
|
+
</ListItem>,
|
|
2766
|
+
<ListItem
|
|
2767
|
+
images={[locationImages[1]]}
|
|
2768
|
+
subtitle="Sadipscing elitr dolor sit"
|
|
2769
|
+
title="Lorem ipsum dolor sit amet, consetetur sadipscing elitr"
|
|
2770
|
+
>
|
|
2771
|
+
<ListItemContent>
|
|
2772
|
+
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod
|
|
2773
|
+
tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero
|
|
2774
|
+
eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea
|
|
2775
|
+
takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet,
|
|
2776
|
+
consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et
|
|
2777
|
+
dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo
|
|
2778
|
+
dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem
|
|
2779
|
+
ipsum dolor sit amet.
|
|
2780
|
+
</ListItemContent>
|
|
2781
|
+
</ListItem>,
|
|
2782
|
+
<ListItem
|
|
2783
|
+
images={[locationImages[2]]}
|
|
2784
|
+
subtitle="Sadipscing elitr dolor sit"
|
|
2785
|
+
title="Lorem ipsum dolor sit amet, consetetur sadipscing elitr"
|
|
2786
|
+
isTitleGreyed
|
|
2787
|
+
>
|
|
2788
|
+
<ListItemContent>
|
|
2789
|
+
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod
|
|
2790
|
+
tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero
|
|
2791
|
+
eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea
|
|
2792
|
+
takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet,
|
|
2793
|
+
consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et
|
|
2794
|
+
dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo
|
|
2795
|
+
dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem
|
|
2796
|
+
ipsum dolor sit amet.
|
|
2797
|
+
</ListItemContent>
|
|
2798
|
+
</ListItem>,
|
|
2799
|
+
<ListItem
|
|
2800
|
+
images={[locationImages[0]]}
|
|
2801
|
+
subtitle="Sadipscing elitr dolor sit"
|
|
2802
|
+
title="Lorem ipsum dolor sit amet, consetetur sadipscing elitr"
|
|
2803
|
+
>
|
|
2804
|
+
<ListItemContent>
|
|
2805
|
+
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod
|
|
2806
|
+
tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero
|
|
2807
|
+
eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea
|
|
2808
|
+
takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet,
|
|
2809
|
+
consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et
|
|
2810
|
+
dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo
|
|
2811
|
+
dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem
|
|
2812
|
+
ipsum dolor sit amet.
|
|
2813
|
+
</ListItemContent>
|
|
2814
|
+
</ListItem>,
|
|
2815
|
+
<ListItem
|
|
2816
|
+
images={[locationImages[1]]}
|
|
2817
|
+
subtitle="Sadipscing elitr dolor sit"
|
|
2818
|
+
title="Lorem ipsum dolor sit amet, consetetur sadipscing elitr"
|
|
2819
|
+
isTitleGreyed
|
|
2820
|
+
>
|
|
2821
|
+
<ListItemContent>
|
|
2822
|
+
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod
|
|
2823
|
+
tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero
|
|
2824
|
+
eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea
|
|
2825
|
+
takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet,
|
|
2826
|
+
consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et
|
|
2827
|
+
dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo
|
|
2828
|
+
dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem
|
|
2829
|
+
ipsum dolor sit amet.
|
|
2830
|
+
</ListItemContent>
|
|
2831
|
+
</ListItem>,
|
|
2832
|
+
<ListItem
|
|
2833
|
+
images={[locationImages[2]]}
|
|
2834
|
+
subtitle="Sadipscing elitr dolor sit"
|
|
2835
|
+
title="Lorem ipsum dolor sit amet, consetetur sadipscing elitr"
|
|
2836
|
+
>
|
|
2837
|
+
<ListItemContent>
|
|
2838
|
+
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod
|
|
2839
|
+
tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero
|
|
2840
|
+
eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea
|
|
2841
|
+
takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet,
|
|
2842
|
+
consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et
|
|
2843
|
+
dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo
|
|
2844
|
+
dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem
|
|
2845
|
+
ipsum dolor sit amet.
|
|
2846
|
+
</ListItemContent>
|
|
2847
|
+
</ListItem>,
|
|
2848
|
+
]
|
|
2849
|
+
}
|
|
2850
|
+
</List>
|
|
2851
|
+
```
|
|
2852
|
+
|
|
2853
|
+
#### List Item With Hidden Bottom Lines
|
|
2854
|
+
|
|
2855
|
+
```tsx
|
|
2856
|
+
<List>
|
|
2857
|
+
{
|
|
2858
|
+
[
|
|
2859
|
+
<ListItem
|
|
2860
|
+
images={[images[0]]}
|
|
2861
|
+
subtitle="Sadipscing elitr dolor sit"
|
|
2862
|
+
shouldHideBottomLine
|
|
2863
|
+
title="Lorem ipsum dolor sit amet, consetetur sadipscing elitr"
|
|
2864
|
+
/>,
|
|
2865
|
+
<ListItem
|
|
2866
|
+
images={[images[1]]}
|
|
2867
|
+
subtitle="Stet clita kasd gubergren"
|
|
2868
|
+
shouldHideBottomLine
|
|
2869
|
+
title="Stet clita kasd gubergren, no sea takimata sanctus est"
|
|
2870
|
+
/>,
|
|
2871
|
+
<ListItem
|
|
2872
|
+
images={[images[2]]}
|
|
2873
|
+
subtitle="At vero eos et accusam"
|
|
2874
|
+
shouldHideBottomLine
|
|
2875
|
+
title="At vero eos et accusam et justo duo dolores et ea rebum sit amet dolor"
|
|
2876
|
+
/>,
|
|
2877
|
+
<ListItem
|
|
2878
|
+
images={[images[3]]}
|
|
2879
|
+
subtitle="Dolor sit ipsum amet"
|
|
2880
|
+
shouldHideBottomLine
|
|
2881
|
+
title="Lorem ipsum dolor sit amet, consetetur sadipscing elitr"
|
|
2882
|
+
/>,
|
|
2883
|
+
]
|
|
2884
|
+
}
|
|
2885
|
+
</List>
|
|
2886
|
+
```
|
|
2887
|
+
|
|
2888
|
+
#### Intercom List Items
|
|
2889
|
+
|
|
2890
|
+
```tsx
|
|
2891
|
+
<List>
|
|
2892
|
+
{
|
|
2893
|
+
[
|
|
2894
|
+
<ListItem
|
|
2895
|
+
subtitle="Stet clita kasd gubergren"
|
|
2896
|
+
title="Lorem ipsum dolor sit amet, consetetur sadipscing elitr"
|
|
2897
|
+
images={[images[0], images[1]]}
|
|
2898
|
+
shouldShowRoundImageOrIcon
|
|
2899
|
+
/>,
|
|
2900
|
+
<ListItem
|
|
2901
|
+
subtitle="Lorem ipsum dolor sit amet"
|
|
2902
|
+
title="Stet clita kasd gubergren, no sea takimata sanctus est"
|
|
2903
|
+
images={[images[0]]}
|
|
2904
|
+
shouldShowRoundImageOrIcon
|
|
2905
|
+
/>,
|
|
2906
|
+
<ListItem
|
|
2907
|
+
subtitle="Consetetur sadipscing elitr"
|
|
2908
|
+
title="At vero eos et accusam et justo duo dolores et ea rebum sit amet dolor sea takimata sanctus est"
|
|
2909
|
+
images={[images[3], images[2]]}
|
|
2910
|
+
careOfLocationId={185043}
|
|
2911
|
+
shouldShowRoundImageOrIcon
|
|
2912
|
+
/>,
|
|
2913
|
+
<ListItem
|
|
2914
|
+
subtitle="No sea takimata sanctus est"
|
|
2915
|
+
title="Lorem ipsum dolor sit amet, consetetur sadipscing elitr"
|
|
2916
|
+
images={[images[3]]}
|
|
2917
|
+
careOfLocationId={1214}
|
|
2918
|
+
shouldShowRoundImageOrIcon
|
|
2919
|
+
/>,
|
|
2920
|
+
]
|
|
2921
|
+
}
|
|
2922
|
+
</List>
|
|
2923
|
+
```
|
|
2924
|
+
|
|
2925
|
+
### Props
|
|
2926
|
+
|
|
2927
|
+
No prop documentation available.
|
|
2928
|
+
|
|
2929
|
+
### Types
|
|
2930
|
+
|
|
2931
|
+
No additional exported types documented.
|
|
2932
|
+
|
|
2933
|
+
### Usage Notes
|
|
2934
|
+
|
|
2935
|
+
- Import `List` directly from `@chayns-components/core` instead of internal source paths.
|
|
2936
|
+
- Start with one of the documented Storybook examples and adapt the props incrementally for your use case.
|
|
2937
|
+
|
|
2938
|
+
### Anti Patterns
|
|
2939
|
+
|
|
2940
|
+
- Avoid imports from internal paths such as `@chayns-components/core/src/...`; always use the public package export.
|
|
2941
|
+
## MentionFinder
|
|
2942
|
+
|
|
2943
|
+
`MentionFinder` is exported by `@chayns-components/core` and should be imported from the public package entry point.
|
|
2944
|
+
|
|
2945
|
+
### Import
|
|
2946
|
+
|
|
2947
|
+
```ts
|
|
2948
|
+
import { MentionFinder } from '@chayns-components/core';
|
|
2949
|
+
```
|
|
2950
|
+
|
|
2951
|
+
### Examples
|
|
2952
|
+
|
|
2953
|
+
#### General
|
|
2954
|
+
|
|
2955
|
+
```tsx
|
|
2956
|
+
<MentionFinder
|
|
2957
|
+
inputValue={'Kannst Du @j'}
|
|
2958
|
+
members={[
|
|
2959
|
+
{
|
|
2960
|
+
id: 'JAN-NIK96',
|
|
2961
|
+
imageUrl: 'https://sub60.tobit.com/u/JAN-NIK96',
|
|
2962
|
+
name: 'Jannik Weise',
|
|
2963
|
+
shouldShowRoundImage: true,
|
|
2964
|
+
},
|
|
2965
|
+
{
|
|
2966
|
+
id: '132-22953',
|
|
2967
|
+
imageUrl: 'https://sub60.tobit.com/u/132-22953',
|
|
2968
|
+
name: 'Jakob Wensing',
|
|
2969
|
+
shouldShowRoundImage: true,
|
|
2970
|
+
},
|
|
2971
|
+
{
|
|
2972
|
+
id: '131-31077',
|
|
2973
|
+
imageUrl: 'https://sub60.tobit.com/u/131-31077',
|
|
2974
|
+
name: 'Jegor Schweizer',
|
|
2975
|
+
shouldShowRoundImage: true,
|
|
2976
|
+
},
|
|
2977
|
+
{
|
|
2978
|
+
id: '133-46566',
|
|
2979
|
+
imageUrl: 'https://sub60.tobit.com/u/133-46566',
|
|
2980
|
+
name: 'Leon Dankbar',
|
|
2981
|
+
shouldShowRoundImage: true,
|
|
2982
|
+
},
|
|
2983
|
+
{
|
|
2984
|
+
id: '368-48669',
|
|
2985
|
+
imageUrl: 'https://sub60.tobit.com/u/368-48669',
|
|
2986
|
+
name: 'Patrick Janning',
|
|
2987
|
+
shouldShowRoundImage: true,
|
|
2988
|
+
},
|
|
2989
|
+
{
|
|
2990
|
+
id: '126-52360',
|
|
2991
|
+
imageUrl: 'https://sub60.tobit.com/u/126-52360',
|
|
2992
|
+
name: 'Jannik Test',
|
|
2993
|
+
shouldShowRoundImage: true,
|
|
2994
|
+
},
|
|
2995
|
+
{
|
|
2996
|
+
id: '132-50444',
|
|
2997
|
+
imageUrl: 'https://sub60.tobit.com/u/132-50444',
|
|
2998
|
+
name: 'Günther Grütze',
|
|
2999
|
+
shouldShowRoundImage: true,
|
|
3000
|
+
},
|
|
3001
|
+
{
|
|
3002
|
+
id: 'CHA-YNSAI',
|
|
3003
|
+
imageUrl: 'https://sub60.tobit.com/u/CHA-YNSAI',
|
|
3004
|
+
name: 'chayns Assistant',
|
|
3005
|
+
shouldShowRoundImage: true,
|
|
3006
|
+
},
|
|
3007
|
+
]}
|
|
3008
|
+
popupAlignment={MentionFinderPopupAlignment.Bottom}
|
|
3009
|
+
/>
|
|
3010
|
+
```
|
|
3011
|
+
|
|
3012
|
+
#### Top Aligned With Drag
|
|
3013
|
+
|
|
3014
|
+
```tsx
|
|
3015
|
+
<MentionFinder
|
|
3016
|
+
inputValue={'Kannst Du @j'}
|
|
3017
|
+
members={[
|
|
3018
|
+
{
|
|
3019
|
+
id: 'JAN-NIK96',
|
|
3020
|
+
imageUrl: 'https://sub60.tobit.com/u/JAN-NIK96',
|
|
3021
|
+
name: 'Jannik Weise',
|
|
3022
|
+
shouldShowRoundImage: true,
|
|
3023
|
+
},
|
|
3024
|
+
{
|
|
3025
|
+
id: '132-22953',
|
|
3026
|
+
imageUrl: 'https://sub60.tobit.com/u/132-22953',
|
|
3027
|
+
name: 'Jakob Wensing',
|
|
3028
|
+
shouldShowRoundImage: true,
|
|
3029
|
+
},
|
|
3030
|
+
{
|
|
3031
|
+
id: '131-31077',
|
|
3032
|
+
imageUrl: 'https://sub60.tobit.com/u/131-31077',
|
|
3033
|
+
name: 'Jegor Schweizer',
|
|
3034
|
+
shouldShowRoundImage: true,
|
|
3035
|
+
},
|
|
3036
|
+
{
|
|
3037
|
+
id: '133-46566',
|
|
3038
|
+
imageUrl: 'https://sub60.tobit.com/u/133-46566',
|
|
3039
|
+
name: 'Leon Dankbar',
|
|
3040
|
+
shouldShowRoundImage: true,
|
|
3041
|
+
},
|
|
3042
|
+
{
|
|
3043
|
+
id: '368-48669',
|
|
3044
|
+
imageUrl: 'https://sub60.tobit.com/u/368-48669',
|
|
3045
|
+
name: 'Patrick Janning',
|
|
3046
|
+
shouldShowRoundImage: true,
|
|
3047
|
+
},
|
|
3048
|
+
{
|
|
3049
|
+
id: '126-52360',
|
|
3050
|
+
imageUrl: 'https://sub60.tobit.com/u/126-52360',
|
|
3051
|
+
name: 'Jannik Test',
|
|
3052
|
+
shouldShowRoundImage: true,
|
|
3053
|
+
},
|
|
3054
|
+
{
|
|
3055
|
+
id: '132-50444',
|
|
3056
|
+
imageUrl: 'https://sub60.tobit.com/u/132-50444',
|
|
3057
|
+
name: 'Günther Grütze',
|
|
3058
|
+
shouldShowRoundImage: true,
|
|
3059
|
+
},
|
|
3060
|
+
{
|
|
3061
|
+
id: 'CHA-YNSAI',
|
|
3062
|
+
imageUrl: 'https://sub60.tobit.com/u/CHA-YNSAI',
|
|
3063
|
+
name: 'chayns Assistant',
|
|
3064
|
+
shouldShowRoundImage: true,
|
|
3065
|
+
},
|
|
3066
|
+
]}
|
|
3067
|
+
popupAlignment={MentionFinderPopupAlignment.Bottom}
|
|
3068
|
+
enableDragHandle
|
|
3069
|
+
/>
|
|
3070
|
+
```
|
|
3071
|
+
|
|
3072
|
+
### Props
|
|
3073
|
+
|
|
3074
|
+
No prop documentation available.
|
|
3075
|
+
|
|
3076
|
+
### Types
|
|
3077
|
+
|
|
3078
|
+
No additional exported types documented.
|
|
3079
|
+
|
|
3080
|
+
### Usage Notes
|
|
3081
|
+
|
|
3082
|
+
- Import `MentionFinder` directly from `@chayns-components/core` instead of internal source paths.
|
|
3083
|
+
- Start with one of the documented Storybook examples and adapt the props incrementally for your use case.
|
|
3084
|
+
|
|
3085
|
+
### Anti Patterns
|
|
3086
|
+
|
|
3087
|
+
- Avoid imports from internal paths such as `@chayns-components/core/src/...`; always use the public package export.
|
|
3088
|
+
## MultiActionButton
|
|
3089
|
+
|
|
3090
|
+
`MultiActionButton` is exported by `@chayns-components/core` and should be imported from the public package entry point.
|
|
3091
|
+
|
|
3092
|
+
### Import
|
|
3093
|
+
|
|
3094
|
+
```ts
|
|
3095
|
+
import { MultiActionButton } from '@chayns-components/core';
|
|
3096
|
+
```
|
|
3097
|
+
|
|
3098
|
+
### Examples
|
|
3099
|
+
|
|
3100
|
+
#### Default
|
|
3101
|
+
|
|
3102
|
+
```tsx
|
|
3103
|
+
<MultiActionButton
|
|
3104
|
+
isDisabled={false}
|
|
3105
|
+
extendedTimeoutMs={2000}
|
|
3106
|
+
primaryAction={{
|
|
3107
|
+
icon: 'fa fa-pen',
|
|
3108
|
+
label: 'Chatten',
|
|
3109
|
+
}}
|
|
3110
|
+
secondaryAction={{
|
|
3111
|
+
icon: 'fa fa-microphone',
|
|
3112
|
+
label: 'Mitschnitt starten',
|
|
3113
|
+
}}
|
|
3114
|
+
/>
|
|
3115
|
+
```
|
|
3116
|
+
|
|
3117
|
+
#### Width Override
|
|
3118
|
+
|
|
3119
|
+
```tsx
|
|
3120
|
+
<MultiActionButton
|
|
3121
|
+
isDisabled={false}
|
|
3122
|
+
extendedTimeoutMs={2000}
|
|
3123
|
+
primaryAction={{
|
|
3124
|
+
icon: 'fa fa-pen',
|
|
3125
|
+
label: 'Chatten',
|
|
3126
|
+
}}
|
|
3127
|
+
secondaryAction={{
|
|
3128
|
+
icon: 'fa fa-microphone',
|
|
3129
|
+
label: 'Mitschnitt starten',
|
|
3130
|
+
}}
|
|
3131
|
+
width={260}
|
|
3132
|
+
/>
|
|
3133
|
+
```
|
|
3134
|
+
|
|
3135
|
+
#### Full Width
|
|
3136
|
+
|
|
3137
|
+
```tsx
|
|
3138
|
+
<MultiActionButton
|
|
3139
|
+
isDisabled={false}
|
|
3140
|
+
extendedTimeoutMs={2000}
|
|
3141
|
+
primaryAction={{
|
|
3142
|
+
icon: 'fa fa-pen',
|
|
3143
|
+
label: 'Chatten',
|
|
3144
|
+
}}
|
|
3145
|
+
secondaryAction={{
|
|
3146
|
+
icon: 'fa fa-microphone',
|
|
3147
|
+
label: 'Mitschnitt starten',
|
|
3148
|
+
}}
|
|
3149
|
+
shouldUseFullWidth
|
|
3150
|
+
/>
|
|
3151
|
+
```
|
|
3152
|
+
|
|
3153
|
+
#### Long Labels
|
|
3154
|
+
|
|
3155
|
+
```tsx
|
|
3156
|
+
<MultiActionButton
|
|
3157
|
+
isDisabled={false}
|
|
3158
|
+
extendedTimeoutMs={2000}
|
|
3159
|
+
primaryAction={{
|
|
3160
|
+
icon: 'fa fa-pen',
|
|
3161
|
+
label: 'Ein langes Label für den Test der Ellipsis',
|
|
3162
|
+
}}
|
|
3163
|
+
secondaryAction={{
|
|
3164
|
+
icon: 'fa fa-microphone',
|
|
3165
|
+
label: 'Ein noch viel längeres Label das mit Sicherheit gekürzt werden muss!',
|
|
3166
|
+
}}
|
|
3167
|
+
/>
|
|
3168
|
+
```
|
|
3169
|
+
|
|
3170
|
+
#### Custom Background
|
|
3171
|
+
|
|
3172
|
+
```tsx
|
|
3173
|
+
<MultiActionButton
|
|
3174
|
+
isDisabled={false}
|
|
3175
|
+
extendedTimeoutMs={2000}
|
|
3176
|
+
primaryAction={{
|
|
3177
|
+
icon: 'fa fa-pen',
|
|
3178
|
+
label: 'Chatten',
|
|
3179
|
+
}}
|
|
3180
|
+
secondaryAction={{
|
|
3181
|
+
icon: 'fa fa-microphone',
|
|
3182
|
+
label: 'Mitschnitt starten',
|
|
3183
|
+
}}
|
|
3184
|
+
backgroundColor={'#0f6d7e'}
|
|
3185
|
+
/>
|
|
3186
|
+
```
|
|
3187
|
+
|
|
3188
|
+
#### Action Specific Backgrounds
|
|
3189
|
+
|
|
3190
|
+
```tsx
|
|
3191
|
+
<MultiActionButton
|
|
3192
|
+
isDisabled={false}
|
|
3193
|
+
extendedTimeoutMs={2000}
|
|
3194
|
+
primaryAction={{
|
|
3195
|
+
icon: 'fa fa-pen',
|
|
3196
|
+
label: 'Chatten',
|
|
3197
|
+
backgroundColor: '#0f6d7e',
|
|
3198
|
+
}}
|
|
3199
|
+
secondaryAction={{
|
|
3200
|
+
icon: 'fa fa-microphone',
|
|
3201
|
+
label: 'Mitschnitt starten',
|
|
3202
|
+
backgroundColor: '#8c1c13',
|
|
3203
|
+
}}
|
|
3204
|
+
/>
|
|
3205
|
+
```
|
|
3206
|
+
|
|
3207
|
+
#### Only Primary
|
|
3208
|
+
|
|
3209
|
+
```tsx
|
|
3210
|
+
<MultiActionButton
|
|
3211
|
+
isDisabled={false}
|
|
3212
|
+
extendedTimeoutMs={2000}
|
|
3213
|
+
primaryAction={{
|
|
3214
|
+
icon: 'fa fa-pen',
|
|
3215
|
+
label: 'Chatten',
|
|
3216
|
+
}}
|
|
3217
|
+
secondaryAction={undefined}
|
|
3218
|
+
/>
|
|
3219
|
+
```
|
|
3220
|
+
|
|
3221
|
+
#### Pulsing Secondary
|
|
3222
|
+
|
|
3223
|
+
```tsx
|
|
3224
|
+
<MultiActionButton
|
|
3225
|
+
isDisabled={false}
|
|
3226
|
+
extendedTimeoutMs={2000}
|
|
3227
|
+
primaryAction={{
|
|
3228
|
+
icon: 'fa fa-pen',
|
|
3229
|
+
label: 'Chatten',
|
|
3230
|
+
}}
|
|
3231
|
+
secondaryAction={{
|
|
3232
|
+
icon: 'fa fa-microphone',
|
|
3233
|
+
label: 'Mitschnitt starten',
|
|
3234
|
+
status: {
|
|
3235
|
+
type: MultiActionButtonStatusType.Pulse,
|
|
3236
|
+
pulseColors: ['#A50000', '#630000'],
|
|
3237
|
+
},
|
|
3238
|
+
}}
|
|
3239
|
+
/>
|
|
3240
|
+
```
|
|
3241
|
+
|
|
3242
|
+
#### Pulsing Secondary Custom Colors
|
|
3243
|
+
|
|
3244
|
+
```tsx
|
|
3245
|
+
<MultiActionButton
|
|
3246
|
+
isDisabled={false}
|
|
3247
|
+
extendedTimeoutMs={2000}
|
|
3248
|
+
primaryAction={{
|
|
3249
|
+
icon: 'fa fa-pen',
|
|
3250
|
+
label: 'Chatten',
|
|
3251
|
+
}}
|
|
3252
|
+
secondaryAction={{
|
|
3253
|
+
icon: 'fa fa-microphone',
|
|
3254
|
+
label: 'Mitschnitt starten',
|
|
3255
|
+
status: {
|
|
3256
|
+
type: MultiActionButtonStatusType.Pulse,
|
|
3257
|
+
pulseColors: ['#00A500', '#006300'],
|
|
3258
|
+
},
|
|
3259
|
+
}}
|
|
3260
|
+
/>
|
|
3261
|
+
```
|
|
3262
|
+
|
|
3263
|
+
#### Large Size
|
|
3264
|
+
|
|
3265
|
+
```tsx
|
|
3266
|
+
<MultiActionButton
|
|
3267
|
+
isDisabled={false}
|
|
3268
|
+
extendedTimeoutMs={2000}
|
|
3269
|
+
primaryAction={{
|
|
3270
|
+
icon: 'fa fa-pen',
|
|
3271
|
+
label: 'Chatten',
|
|
3272
|
+
}}
|
|
3273
|
+
secondaryAction={{
|
|
3274
|
+
icon: 'fa fa-microphone',
|
|
3275
|
+
label: 'Mitschnitt starten',
|
|
3276
|
+
}}
|
|
3277
|
+
height={MultiActionButtonHeight.Large}
|
|
3278
|
+
/>
|
|
3279
|
+
```
|
|
3280
|
+
|
|
3281
|
+
#### Disabled Action With Reason
|
|
3282
|
+
|
|
3283
|
+
```tsx
|
|
3284
|
+
<MultiActionButton
|
|
3285
|
+
isDisabled={false}
|
|
3286
|
+
extendedTimeoutMs={2000}
|
|
3287
|
+
primaryAction={{
|
|
3288
|
+
icon: 'fa fa-pen',
|
|
3289
|
+
label: 'Chatten',
|
|
3290
|
+
}}
|
|
3291
|
+
secondaryAction={{
|
|
3292
|
+
icon: 'fa fa-microphone',
|
|
3293
|
+
label: 'Mitschnitt starten',
|
|
3294
|
+
isDisabled: true,
|
|
3295
|
+
disabledReason:
|
|
3296
|
+
'Verwende die Sidekick™ App oder den Sidekick™ Desktop Client, um Mitschnitte zu erstellen.',
|
|
3297
|
+
}}
|
|
3298
|
+
/>
|
|
3299
|
+
```
|
|
3300
|
+
|
|
3301
|
+
#### React Element Icons
|
|
3302
|
+
|
|
3303
|
+
```tsx
|
|
3304
|
+
<MultiActionButton
|
|
3305
|
+
isDisabled={false}
|
|
3306
|
+
extendedTimeoutMs={2000}
|
|
3307
|
+
primaryAction={{
|
|
3308
|
+
icon: (
|
|
3309
|
+
<svg viewBox="0 0 24 24" fill="currentColor">
|
|
3310
|
+
<path d="M12 2 14.7 9.3 22 12l-7.3 2.7L12 22l-2.7-7.3L2 12l7.3-2.7L12 2z" />
|
|
3311
|
+
</svg>
|
|
3312
|
+
),
|
|
3313
|
+
label: 'Chatten',
|
|
3314
|
+
}}
|
|
3315
|
+
secondaryAction={{
|
|
3316
|
+
icon: (
|
|
3317
|
+
<svg viewBox="0 0 24 24" fill="currentColor">
|
|
3318
|
+
<path d="M12 3a4 4 0 0 1 4 4v5a4 4 0 1 1-8 0V7a4 4 0 0 1 4-4zm-6 9a1 1 0 1 1 2 0 4 4 0 0 0 8 0 1 1 0 1 1 2 0 6 6 0 0 1-5 5.91V21h2a1 1 0 1 1 0 2H9a1 1 0 1 1 0-2h2v-3.09A6 6 0 0 1 6 12z" />
|
|
3319
|
+
</svg>
|
|
3320
|
+
),
|
|
3321
|
+
label: 'Mitschnitt starten',
|
|
3322
|
+
}}
|
|
3323
|
+
/>
|
|
3324
|
+
```
|
|
3325
|
+
|
|
3326
|
+
#### Recording Flow
|
|
3327
|
+
|
|
3328
|
+
```tsx
|
|
3329
|
+
<MultiActionButton
|
|
3330
|
+
isDisabled={false}
|
|
3331
|
+
extendedTimeoutMs={2000}
|
|
3332
|
+
primaryAction={{
|
|
3333
|
+
icon: 'fa fa-pen',
|
|
3334
|
+
label: 'Chatten',
|
|
3335
|
+
}}
|
|
3336
|
+
secondaryAction={{
|
|
3337
|
+
icon: 'fa fa-microphone',
|
|
3338
|
+
label: 'Mitschnitt starten',
|
|
3339
|
+
}}
|
|
3340
|
+
/>
|
|
3341
|
+
```
|
|
3342
|
+
|
|
3343
|
+
### Props
|
|
3344
|
+
|
|
3345
|
+
No prop documentation available.
|
|
3346
|
+
|
|
3347
|
+
### Types
|
|
3348
|
+
|
|
3349
|
+
No additional exported types documented.
|
|
3350
|
+
|
|
3351
|
+
### Usage Notes
|
|
3352
|
+
|
|
3353
|
+
- Import `MultiActionButton` directly from `@chayns-components/core` instead of internal source paths.
|
|
3354
|
+
- Start with one of the documented Storybook examples and adapt the props incrementally for your use case.
|
|
3355
|
+
|
|
3356
|
+
### Anti Patterns
|
|
3357
|
+
|
|
3358
|
+
- Avoid imports from internal paths such as `@chayns-components/core/src/...`; always use the public package export.
|
|
3359
|
+
## NumberInput
|
|
3360
|
+
|
|
3361
|
+
`NumberInput` is exported by `@chayns-components/core` and should be imported from the public package entry point.
|
|
3362
|
+
|
|
3363
|
+
### Import
|
|
3364
|
+
|
|
3365
|
+
```ts
|
|
3366
|
+
import { NumberInput } from '@chayns-components/core';
|
|
3367
|
+
```
|
|
3368
|
+
|
|
3369
|
+
### Examples
|
|
3370
|
+
|
|
3371
|
+
#### General
|
|
3372
|
+
|
|
3373
|
+
```tsx
|
|
3374
|
+
<NumberInput />
|
|
3375
|
+
```
|
|
3376
|
+
|
|
3377
|
+
### Props
|
|
3378
|
+
|
|
3379
|
+
No prop documentation available.
|
|
3380
|
+
|
|
3381
|
+
### Types
|
|
3382
|
+
|
|
3383
|
+
No additional exported types documented.
|
|
3384
|
+
|
|
3385
|
+
### Usage Notes
|
|
3386
|
+
|
|
3387
|
+
- Import `NumberInput` directly from `@chayns-components/core` instead of internal source paths.
|
|
3388
|
+
- Start with one of the documented Storybook examples and adapt the props incrementally for your use case.
|
|
3389
|
+
|
|
3390
|
+
### Anti Patterns
|
|
3391
|
+
|
|
3392
|
+
- Avoid imports from internal paths such as `@chayns-components/core/src/...`; always use the public package export.
|
|
3393
|
+
## Popup
|
|
3394
|
+
|
|
3395
|
+
`Popup` is exported by `@chayns-components/core` and should be imported from the public package entry point.
|
|
3396
|
+
|
|
3397
|
+
### Import
|
|
3398
|
+
|
|
3399
|
+
```ts
|
|
3400
|
+
import { Popup } from '@chayns-components/core';
|
|
3401
|
+
```
|
|
3402
|
+
|
|
3403
|
+
### Examples
|
|
3404
|
+
|
|
3405
|
+
#### General
|
|
3406
|
+
|
|
3407
|
+
```tsx
|
|
3408
|
+
<Popup
|
|
3409
|
+
content={<span style={{ display: 'block' }}>
|
|
3410
|
+
<h1 style={{ margin: 0 }}>Popup</h1>
|
|
3411
|
+
<p>Das ist ein Popup!</p>
|
|
3412
|
+
</span>}
|
|
3413
|
+
/>
|
|
3414
|
+
```
|
|
3415
|
+
|
|
3416
|
+
#### Long Content
|
|
3417
|
+
|
|
3418
|
+
```tsx
|
|
3419
|
+
<Popup
|
|
3420
|
+
content={<div
|
|
3421
|
+
style={{
|
|
3422
|
+
padding: 4,
|
|
3423
|
+
display: 'flex',
|
|
3424
|
+
flexDirection: 'column',
|
|
3425
|
+
gap: 4,
|
|
3426
|
+
whiteSpace: 'nowrap',
|
|
3427
|
+
}}
|
|
3428
|
+
>
|
|
3429
|
+
<div>A - Apfel</div>
|
|
3430
|
+
<div>B - Baum</div>
|
|
3431
|
+
<div>C - Computer</div>
|
|
3432
|
+
<div>D - Dach</div>
|
|
3433
|
+
<div>E - Elefant</div>
|
|
3434
|
+
<div>F - Fahrrad</div>
|
|
3435
|
+
<div>G - Gitarre</div>
|
|
3436
|
+
<div>H - Haus</div>
|
|
3437
|
+
<div>I - Insel</div>
|
|
3438
|
+
<div>J - Jaguar</div>
|
|
3439
|
+
<div>K - Känguru</div>
|
|
3440
|
+
<div>L - Lampe</div>
|
|
3441
|
+
<div>M - Mond</div>
|
|
3442
|
+
<div>N - Nase</div>
|
|
3443
|
+
<div>O - Orange</div>
|
|
3444
|
+
<div>P - Papier</div>
|
|
3445
|
+
<div>Q - Quelle</div>
|
|
3446
|
+
<div>R - Rakete</div>
|
|
3447
|
+
<div>S - Sonne</div>
|
|
3448
|
+
<div>T - Tiger</div>
|
|
3449
|
+
<div>U - Uhr</div>
|
|
3450
|
+
<div>V - Vogel</div>
|
|
3451
|
+
<div>W - Wasser</div>
|
|
3452
|
+
<div>X - Xylophon</div>
|
|
3453
|
+
<div>Y - Yacht</div>
|
|
3454
|
+
<div>Z - Zitrone</div>
|
|
3455
|
+
</div>}
|
|
3456
|
+
/>
|
|
3457
|
+
```
|
|
3458
|
+
|
|
3459
|
+
### Props
|
|
3460
|
+
|
|
3461
|
+
No prop documentation available.
|
|
3462
|
+
|
|
3463
|
+
### Types
|
|
3464
|
+
|
|
3465
|
+
No additional exported types documented.
|
|
3466
|
+
|
|
3467
|
+
### Usage Notes
|
|
3468
|
+
|
|
3469
|
+
- Import `Popup` directly from `@chayns-components/core` instead of internal source paths.
|
|
3470
|
+
- Start with one of the documented Storybook examples and adapt the props incrementally for your use case.
|
|
3471
|
+
|
|
3472
|
+
### Anti Patterns
|
|
3473
|
+
|
|
3474
|
+
- Avoid imports from internal paths such as `@chayns-components/core/src/...`; always use the public package export.
|
|
3475
|
+
## ProgressBar
|
|
3476
|
+
|
|
3477
|
+
`ProgressBar` is exported by `@chayns-components/core` and should be imported from the public package entry point.
|
|
3478
|
+
|
|
3479
|
+
### Import
|
|
3480
|
+
|
|
3481
|
+
```ts
|
|
3482
|
+
import { ProgressBar } from '@chayns-components/core';
|
|
3483
|
+
```
|
|
3484
|
+
|
|
3485
|
+
### Examples
|
|
3486
|
+
|
|
3487
|
+
#### General
|
|
3488
|
+
|
|
3489
|
+
```tsx
|
|
3490
|
+
<ProgressBar
|
|
3491
|
+
percentage={34}
|
|
3492
|
+
label={'Uploading...'}
|
|
3493
|
+
/>
|
|
3494
|
+
```
|
|
3495
|
+
|
|
3496
|
+
#### Infinity Progress Bar
|
|
3497
|
+
|
|
3498
|
+
```tsx
|
|
3499
|
+
<ProgressBar
|
|
3500
|
+
percentage={undefined}
|
|
3501
|
+
label={'Uploading...'}
|
|
3502
|
+
/>
|
|
3503
|
+
```
|
|
3504
|
+
|
|
3505
|
+
#### AIService Progress
|
|
3506
|
+
|
|
3507
|
+
```tsx
|
|
3508
|
+
<ProgressBar
|
|
3509
|
+
percentage={34}
|
|
3510
|
+
label={'34% verbraucht'}
|
|
3511
|
+
steps={[25, 50, 75, 95]}
|
|
3512
|
+
shouldShowLabelInline
|
|
3513
|
+
/>
|
|
3514
|
+
```
|
|
3515
|
+
|
|
3516
|
+
#### Moving Thumb Label
|
|
3517
|
+
|
|
3518
|
+
```tsx
|
|
3519
|
+
<ProgressBar
|
|
3520
|
+
percentage={34}
|
|
3521
|
+
label={'Uploading...'}
|
|
3522
|
+
thumbLabel={'Beispiel Thumblabel'}
|
|
3523
|
+
/>
|
|
3524
|
+
```
|
|
3525
|
+
|
|
3526
|
+
#### Shine Animation
|
|
3527
|
+
|
|
3528
|
+
```tsx
|
|
3529
|
+
<ProgressBar
|
|
3530
|
+
percentage={100}
|
|
3531
|
+
label={'Uploading...'}
|
|
3532
|
+
showShine
|
|
3533
|
+
/>
|
|
3534
|
+
```
|
|
3535
|
+
|
|
3536
|
+
### Props
|
|
3537
|
+
|
|
3538
|
+
No prop documentation available.
|
|
3539
|
+
|
|
3540
|
+
### Types
|
|
3541
|
+
|
|
3542
|
+
No additional exported types documented.
|
|
3543
|
+
|
|
3544
|
+
### Usage Notes
|
|
3545
|
+
|
|
3546
|
+
- Import `ProgressBar` directly from `@chayns-components/core` instead of internal source paths.
|
|
3547
|
+
- Start with one of the documented Storybook examples and adapt the props incrementally for your use case.
|
|
3548
|
+
|
|
3549
|
+
### Anti Patterns
|
|
3550
|
+
|
|
3551
|
+
- Avoid imports from internal paths such as `@chayns-components/core/src/...`; always use the public package export.
|
|
3552
|
+
## RadioButton
|
|
3553
|
+
|
|
3554
|
+
`RadioButton` is exported by `@chayns-components/core` and should be imported from the public package entry point.
|
|
3555
|
+
|
|
3556
|
+
### Import
|
|
3557
|
+
|
|
3558
|
+
```ts
|
|
3559
|
+
import { RadioButton } from '@chayns-components/core';
|
|
3560
|
+
```
|
|
3561
|
+
|
|
3562
|
+
### Examples
|
|
3563
|
+
|
|
3564
|
+
#### General
|
|
3565
|
+
|
|
3566
|
+
```tsx
|
|
3567
|
+
<RadioButton
|
|
3568
|
+
label={'Test'}
|
|
3569
|
+
/>
|
|
3570
|
+
```
|
|
3571
|
+
|
|
3572
|
+
#### With Right Element
|
|
3573
|
+
|
|
3574
|
+
```tsx
|
|
3575
|
+
<RadioButton
|
|
3576
|
+
label={'Bestellung zum Tisch (Beach)'}
|
|
3577
|
+
rightElement={<Button onClick={() => {}}>ca. 10 Min</Button>}
|
|
3578
|
+
>
|
|
3579
|
+
{
|
|
3580
|
+
<>
|
|
3581
|
+
<p style={{ margin: '12px 0' }}>
|
|
3582
|
+
Sag uns bitte noch wo Du sitzt. Wir bringen Dir Deine Bestellung dann zum Tisch.
|
|
3583
|
+
</p>
|
|
3584
|
+
<div style={{ display: 'flex', width: '100%', justifyContent: 'space-between' }}>
|
|
3585
|
+
<div style={{ width: '80%' }}>
|
|
3586
|
+
<Input placeholder="Tischnummer" />
|
|
3587
|
+
</div>
|
|
3588
|
+
<Button onClick={() => {}}>Scannen</Button>
|
|
3589
|
+
</div>
|
|
3590
|
+
</>
|
|
3591
|
+
}
|
|
3592
|
+
</RadioButton>
|
|
3593
|
+
```
|
|
3594
|
+
|
|
3595
|
+
#### Multiple Radio Buttons
|
|
3596
|
+
|
|
3597
|
+
```tsx
|
|
3598
|
+
<RadioButton
|
|
3599
|
+
label={'Test'}
|
|
3600
|
+
/>
|
|
3601
|
+
```
|
|
3602
|
+
|
|
3603
|
+
#### Disabled Radio Buttons
|
|
3604
|
+
|
|
3605
|
+
```tsx
|
|
3606
|
+
<RadioButton
|
|
3607
|
+
label={'Test'}
|
|
3608
|
+
/>
|
|
3609
|
+
```
|
|
3610
|
+
|
|
3611
|
+
#### With Children
|
|
3612
|
+
|
|
3613
|
+
```tsx
|
|
3614
|
+
<RadioButton
|
|
3615
|
+
label={'Test'}
|
|
3616
|
+
/>
|
|
3617
|
+
```
|
|
3618
|
+
|
|
3619
|
+
### Props
|
|
3620
|
+
|
|
3621
|
+
No prop documentation available.
|
|
3622
|
+
|
|
3623
|
+
### Types
|
|
3624
|
+
|
|
3625
|
+
No additional exported types documented.
|
|
3626
|
+
|
|
3627
|
+
### Usage Notes
|
|
3628
|
+
|
|
3629
|
+
- Import `RadioButton` directly from `@chayns-components/core` instead of internal source paths.
|
|
3630
|
+
- Start with one of the documented Storybook examples and adapt the props incrementally for your use case.
|
|
3631
|
+
|
|
3632
|
+
### Anti Patterns
|
|
3633
|
+
|
|
3634
|
+
- Avoid imports from internal paths such as `@chayns-components/core/src/...`; always use the public package export.
|
|
3635
|
+
## ScrollView
|
|
3636
|
+
|
|
3637
|
+
`ScrollView` is exported by `@chayns-components/core` and should be imported from the public package entry point.
|
|
3638
|
+
|
|
3639
|
+
### Import
|
|
3640
|
+
|
|
3641
|
+
```ts
|
|
3642
|
+
import { ScrollView } from '@chayns-components/core';
|
|
3643
|
+
```
|
|
3644
|
+
|
|
3645
|
+
### Examples
|
|
3646
|
+
|
|
3647
|
+
#### General
|
|
3648
|
+
|
|
3649
|
+
```tsx
|
|
3650
|
+
<ScrollView />
|
|
3651
|
+
```
|
|
3652
|
+
|
|
3653
|
+
### Props
|
|
3654
|
+
|
|
3655
|
+
No prop documentation available.
|
|
3656
|
+
|
|
3657
|
+
### Types
|
|
3658
|
+
|
|
3659
|
+
No additional exported types documented.
|
|
3660
|
+
|
|
3661
|
+
### Usage Notes
|
|
3662
|
+
|
|
3663
|
+
- Import `ScrollView` directly from `@chayns-components/core` instead of internal source paths.
|
|
3664
|
+
- Start with one of the documented Storybook examples and adapt the props incrementally for your use case.
|
|
3665
|
+
|
|
3666
|
+
### Anti Patterns
|
|
3667
|
+
|
|
3668
|
+
- Avoid imports from internal paths such as `@chayns-components/core/src/...`; always use the public package export.
|
|
3669
|
+
## SearchBox
|
|
3670
|
+
|
|
3671
|
+
`SearchBox` is exported by `@chayns-components/core` and should be imported from the public package entry point.
|
|
3672
|
+
|
|
3673
|
+
### Import
|
|
3674
|
+
|
|
3675
|
+
```ts
|
|
3676
|
+
import { SearchBox } from '@chayns-components/core';
|
|
3677
|
+
```
|
|
3678
|
+
|
|
3679
|
+
### Examples
|
|
3680
|
+
|
|
3681
|
+
#### General
|
|
3682
|
+
|
|
3683
|
+
```tsx
|
|
3684
|
+
<SearchBox
|
|
3685
|
+
placeholder={'Essen holen'}
|
|
3686
|
+
lists={[
|
|
3687
|
+
{
|
|
3688
|
+
groupName: undefined,
|
|
3689
|
+
list: ITEMS,
|
|
3690
|
+
},
|
|
3691
|
+
]}
|
|
3692
|
+
/>
|
|
3693
|
+
```
|
|
3694
|
+
|
|
3695
|
+
#### With Images
|
|
3696
|
+
|
|
3697
|
+
```tsx
|
|
3698
|
+
<SearchBox
|
|
3699
|
+
placeholder={'Essen holen'}
|
|
3700
|
+
lists={[
|
|
3701
|
+
{
|
|
3702
|
+
groupName: undefined,
|
|
3703
|
+
list: [
|
|
3704
|
+
{
|
|
3705
|
+
imageUrl: 'https://picsum.photos/200',
|
|
3706
|
+
id: '1',
|
|
3707
|
+
text: 'Pizza',
|
|
3708
|
+
},
|
|
3709
|
+
{ imageUrl: 'https://picsum.photos/200', id: '2', text: 'Burger' },
|
|
3710
|
+
{ imageUrl: 'https://picsum.photos/200', id: '3', text: 'Nudeln' },
|
|
3711
|
+
{ imageUrl: 'https://picsum.photos/200', id: '4', text: 'Steak' },
|
|
3712
|
+
{ imageUrl: 'https://picsum.photos/200', id: '5', text: 'Pommes' },
|
|
3713
|
+
{ imageUrl: 'https://picsum.photos/200', id: '6', text: 'Reis' },
|
|
3714
|
+
],
|
|
3715
|
+
},
|
|
3716
|
+
]}
|
|
3717
|
+
/>
|
|
3718
|
+
```
|
|
3719
|
+
|
|
3720
|
+
#### With Groups
|
|
3721
|
+
|
|
3722
|
+
```tsx
|
|
3723
|
+
<SearchBox
|
|
3724
|
+
placeholder={'Essen holen'}
|
|
3725
|
+
lists={[
|
|
3726
|
+
{
|
|
3727
|
+
groupName: 'Essbar',
|
|
3728
|
+
list: [
|
|
3729
|
+
{ id: '1', text: 'Pizza' },
|
|
3730
|
+
{ id: '2', text: 'Burger' },
|
|
3731
|
+
{ id: '3', text: 'Nudeln' },
|
|
3732
|
+
{ id: '4', text: 'Steak' },
|
|
3733
|
+
{ id: '5', text: 'Pommes' },
|
|
3734
|
+
{ id: '6', text: 'Reis' },
|
|
3735
|
+
],
|
|
3736
|
+
},
|
|
3737
|
+
{
|
|
3738
|
+
groupName: 'Nicht essbar',
|
|
3739
|
+
list: [
|
|
3740
|
+
{ id: '7', text: 'Baum' },
|
|
3741
|
+
{ id: '8', text: 'Stein' },
|
|
3742
|
+
{ id: '9', text: 'Ziegelstein' },
|
|
3743
|
+
{ id: '10', text: 'Tastatur' },
|
|
3744
|
+
{ id: '11', text: 'Hosen' },
|
|
3745
|
+
{ id: '12', text: 'Luft' },
|
|
3746
|
+
],
|
|
3747
|
+
},
|
|
3748
|
+
]}
|
|
3749
|
+
/>
|
|
3750
|
+
```
|
|
3751
|
+
|
|
3752
|
+
#### With Delayed Items
|
|
3753
|
+
|
|
3754
|
+
```tsx
|
|
3755
|
+
<SearchBox
|
|
3756
|
+
placeholder={'Essen holen'}
|
|
3757
|
+
lists={[
|
|
3758
|
+
{
|
|
3759
|
+
groupName: undefined,
|
|
3760
|
+
list: ITEMS,
|
|
3761
|
+
},
|
|
3762
|
+
]}
|
|
3763
|
+
shouldAddInputToList={false}
|
|
3764
|
+
shouldHideFilterButtons
|
|
3765
|
+
shouldShowContentOnEmptyInput={false}
|
|
3766
|
+
/>
|
|
3767
|
+
```
|
|
3768
|
+
|
|
3769
|
+
#### With Tag Input
|
|
3770
|
+
|
|
3771
|
+
```tsx
|
|
3772
|
+
<SearchBox
|
|
3773
|
+
placeholder={'Essen holen'}
|
|
3774
|
+
lists={[
|
|
3775
|
+
{
|
|
3776
|
+
groupName: undefined,
|
|
3777
|
+
list: ITEMS,
|
|
3778
|
+
},
|
|
3779
|
+
]}
|
|
3780
|
+
tagInputSettings={{
|
|
3781
|
+
tags: [
|
|
3782
|
+
{
|
|
3783
|
+
id: '1',
|
|
3784
|
+
text: 'Pizza',
|
|
3785
|
+
},
|
|
3786
|
+
],
|
|
3787
|
+
}}
|
|
3788
|
+
/>
|
|
3789
|
+
```
|
|
3790
|
+
|
|
3791
|
+
### Props
|
|
3792
|
+
|
|
3793
|
+
No prop documentation available.
|
|
3794
|
+
|
|
3795
|
+
### Types
|
|
3796
|
+
|
|
3797
|
+
No additional exported types documented.
|
|
3798
|
+
|
|
3799
|
+
### Usage Notes
|
|
3800
|
+
|
|
3801
|
+
- Import `SearchBox` directly from `@chayns-components/core` instead of internal source paths.
|
|
3802
|
+
- Start with one of the documented Storybook examples and adapt the props incrementally for your use case.
|
|
3803
|
+
|
|
3804
|
+
### Anti Patterns
|
|
3805
|
+
|
|
3806
|
+
- Avoid imports from internal paths such as `@chayns-components/core/src/...`; always use the public package export.
|
|
3807
|
+
## SearchInput
|
|
3808
|
+
|
|
3809
|
+
`SearchInput` is exported by `@chayns-components/core` and should be imported from the public package entry point.
|
|
3810
|
+
|
|
3811
|
+
### Import
|
|
3812
|
+
|
|
3813
|
+
```ts
|
|
3814
|
+
import { SearchInput } from '@chayns-components/core';
|
|
3815
|
+
```
|
|
3816
|
+
|
|
3817
|
+
### Examples
|
|
3818
|
+
|
|
3819
|
+
#### General
|
|
3820
|
+
|
|
3821
|
+
```tsx
|
|
3822
|
+
<SearchInput
|
|
3823
|
+
placeholder={'Finden'}
|
|
3824
|
+
/>
|
|
3825
|
+
```
|
|
3826
|
+
|
|
3827
|
+
### Props
|
|
3828
|
+
|
|
3829
|
+
No prop documentation available.
|
|
3830
|
+
|
|
3831
|
+
### Types
|
|
3832
|
+
|
|
3833
|
+
No additional exported types documented.
|
|
3834
|
+
|
|
3835
|
+
### Usage Notes
|
|
3836
|
+
|
|
3837
|
+
- Import `SearchInput` directly from `@chayns-components/core` instead of internal source paths.
|
|
3838
|
+
- Start with one of the documented Storybook examples and adapt the props incrementally for your use case.
|
|
3839
|
+
|
|
3840
|
+
### Anti Patterns
|
|
3841
|
+
|
|
3842
|
+
- Avoid imports from internal paths such as `@chayns-components/core/src/...`; always use the public package export.
|
|
3843
|
+
## SelectButton
|
|
3844
|
+
|
|
3845
|
+
`SelectButton` is exported by `@chayns-components/core` and should be imported from the public package entry point.
|
|
3846
|
+
|
|
3847
|
+
### Import
|
|
3848
|
+
|
|
3849
|
+
```ts
|
|
3850
|
+
import { SelectButton } from '@chayns-components/core';
|
|
3851
|
+
```
|
|
3852
|
+
|
|
3853
|
+
### Examples
|
|
3854
|
+
|
|
3855
|
+
#### General
|
|
3856
|
+
|
|
3857
|
+
```tsx
|
|
3858
|
+
<SelectButton
|
|
3859
|
+
buttonText={'Pizza auswählen'}
|
|
3860
|
+
list={[
|
|
3861
|
+
{ text: 'Salami', id: 1 },
|
|
3862
|
+
{ text: 'Thunfisch', id: 2 },
|
|
3863
|
+
{ text: 'Döner', id: 3 },
|
|
3864
|
+
]}
|
|
3865
|
+
selectedItemIds={[1]}
|
|
3866
|
+
/>
|
|
3867
|
+
```
|
|
3868
|
+
|
|
3869
|
+
### Props
|
|
3870
|
+
|
|
3871
|
+
No prop documentation available.
|
|
3872
|
+
|
|
3873
|
+
### Types
|
|
3874
|
+
|
|
3875
|
+
No additional exported types documented.
|
|
3876
|
+
|
|
3877
|
+
### Usage Notes
|
|
3878
|
+
|
|
3879
|
+
- Import `SelectButton` directly from `@chayns-components/core` instead of internal source paths.
|
|
3880
|
+
- Start with one of the documented Storybook examples and adapt the props incrementally for your use case.
|
|
3881
|
+
|
|
3882
|
+
### Anti Patterns
|
|
3883
|
+
|
|
3884
|
+
- Avoid imports from internal paths such as `@chayns-components/core/src/...`; always use the public package export.
|
|
3885
|
+
## SetupWizard
|
|
3886
|
+
|
|
3887
|
+
`SetupWizard` is exported by `@chayns-components/core` and should be imported from the public package entry point.
|
|
3888
|
+
|
|
3889
|
+
### Import
|
|
3890
|
+
|
|
3891
|
+
```ts
|
|
3892
|
+
import { SetupWizard } from '@chayns-components/core';
|
|
3893
|
+
```
|
|
3894
|
+
|
|
3895
|
+
### Examples
|
|
3896
|
+
|
|
3897
|
+
#### General
|
|
3898
|
+
|
|
3899
|
+
```tsx
|
|
3900
|
+
<SetupWizard />
|
|
3901
|
+
```
|
|
3902
|
+
|
|
3903
|
+
#### Setup Wizard Inside Accordion
|
|
3904
|
+
|
|
3905
|
+
```tsx
|
|
3906
|
+
<SetupWizard />
|
|
3907
|
+
```
|
|
3908
|
+
|
|
3909
|
+
### Props
|
|
3910
|
+
|
|
3911
|
+
No prop documentation available.
|
|
3912
|
+
|
|
3913
|
+
### Types
|
|
3914
|
+
|
|
3915
|
+
No additional exported types documented.
|
|
3916
|
+
|
|
3917
|
+
### Usage Notes
|
|
3918
|
+
|
|
3919
|
+
- Import `SetupWizard` directly from `@chayns-components/core` instead of internal source paths.
|
|
3920
|
+
- Start with one of the documented Storybook examples and adapt the props incrementally for your use case.
|
|
3921
|
+
|
|
3922
|
+
### Anti Patterns
|
|
3923
|
+
|
|
3924
|
+
- Avoid imports from internal paths such as `@chayns-components/core/src/...`; always use the public package export.
|
|
3925
|
+
## SetupWizardItem
|
|
3926
|
+
|
|
3927
|
+
`SetupWizardItem` is exported by `@chayns-components/core` and should be imported from the public package entry point.
|
|
3928
|
+
|
|
3929
|
+
### Import
|
|
3930
|
+
|
|
3931
|
+
```ts
|
|
3932
|
+
import { Input, RadioButton, RadioButtonGroup, SetupWizardItem } from '@chayns-components/core';
|
|
3933
|
+
```
|
|
3934
|
+
|
|
3935
|
+
### Examples
|
|
3936
|
+
|
|
3937
|
+
#### General
|
|
3938
|
+
|
|
3939
|
+
```tsx
|
|
3940
|
+
<SetupWizardItem
|
|
3941
|
+
step={1}
|
|
3942
|
+
id={0}
|
|
3943
|
+
title={'Dein Essen'}
|
|
3944
|
+
shouldEnableButton
|
|
3945
|
+
>
|
|
3946
|
+
{
|
|
3947
|
+
<>
|
|
3948
|
+
<h3>Teile uns dein Lieblingsessen mit</h3>
|
|
3949
|
+
<RadioButtonGroup>
|
|
3950
|
+
<RadioButton id="0" label="Nudeln" />
|
|
3951
|
+
<RadioButton id="1" label="Pizza" />
|
|
3952
|
+
<RadioButton id="2" label="Pommes" />
|
|
3953
|
+
<RadioButton id="3" label="Salat" />
|
|
3954
|
+
</RadioButtonGroup>
|
|
3955
|
+
<h5>Dein Essen ist nicht dabei? Kein Problem, schreibe es uns einfach.</h5>
|
|
3956
|
+
<Input placeholder="Essen eingeben" />
|
|
3957
|
+
</>
|
|
3958
|
+
}
|
|
3959
|
+
</SetupWizardItem>
|
|
3960
|
+
```
|
|
3961
|
+
|
|
3962
|
+
### Props
|
|
3963
|
+
|
|
3964
|
+
No prop documentation available.
|
|
3965
|
+
|
|
3966
|
+
### Types
|
|
3967
|
+
|
|
3968
|
+
No additional exported types documented.
|
|
3969
|
+
|
|
3970
|
+
### Usage Notes
|
|
3971
|
+
|
|
3972
|
+
- Import `SetupWizardItem` directly from `@chayns-components/core` instead of internal source paths.
|
|
3973
|
+
- Start with one of the documented Storybook examples and adapt the props incrementally for your use case.
|
|
3974
|
+
|
|
3975
|
+
### Anti Patterns
|
|
3976
|
+
|
|
3977
|
+
- Avoid imports from internal paths such as `@chayns-components/core/src/...`; always use the public package export.
|
|
3978
|
+
## SharingBar
|
|
3979
|
+
|
|
3980
|
+
`SharingBar` is exported by `@chayns-components/core` and should be imported from the public package entry point.
|
|
3981
|
+
|
|
3982
|
+
### Import
|
|
3983
|
+
|
|
3984
|
+
```ts
|
|
3985
|
+
import { SharingBar } from '@chayns-components/core';
|
|
3986
|
+
```
|
|
3987
|
+
|
|
3988
|
+
### Examples
|
|
3989
|
+
|
|
3990
|
+
#### General
|
|
3991
|
+
|
|
3992
|
+
```tsx
|
|
3993
|
+
<SharingBar
|
|
3994
|
+
label={'Teilen'}
|
|
3995
|
+
link={'https://components.chayns.net/'}
|
|
3996
|
+
popupAlignment={ContextMenuAlignment.BottomRight}
|
|
3997
|
+
/>
|
|
3998
|
+
```
|
|
3999
|
+
|
|
4000
|
+
### Props
|
|
4001
|
+
|
|
4002
|
+
No prop documentation available.
|
|
4003
|
+
|
|
4004
|
+
### Types
|
|
4005
|
+
|
|
4006
|
+
No additional exported types documented.
|
|
4007
|
+
|
|
4008
|
+
### Usage Notes
|
|
4009
|
+
|
|
4010
|
+
- Import `SharingBar` directly from `@chayns-components/core` instead of internal source paths.
|
|
4011
|
+
- Start with one of the documented Storybook examples and adapt the props incrementally for your use case.
|
|
4012
|
+
|
|
4013
|
+
### Anti Patterns
|
|
4014
|
+
|
|
4015
|
+
- Avoid imports from internal paths such as `@chayns-components/core/src/...`; always use the public package export.
|
|
4016
|
+
## SharingButton
|
|
4017
|
+
|
|
4018
|
+
`SharingButton` is exported by `@chayns-components/core` and should be imported from the public package entry point.
|
|
4019
|
+
|
|
4020
|
+
### Import
|
|
4021
|
+
|
|
4022
|
+
```ts
|
|
4023
|
+
import { SharingButton } from '@chayns-components/core';
|
|
4024
|
+
```
|
|
4025
|
+
|
|
4026
|
+
### Examples
|
|
4027
|
+
|
|
4028
|
+
#### General
|
|
4029
|
+
|
|
4030
|
+
```tsx
|
|
4031
|
+
<SharingButton
|
|
4032
|
+
link={'https://components.chayns.net/'}
|
|
4033
|
+
alignment={ContextMenuAlignment.BottomRight}
|
|
4034
|
+
>
|
|
4035
|
+
{'Teilen'}
|
|
4036
|
+
</SharingButton>
|
|
4037
|
+
```
|
|
4038
|
+
|
|
4039
|
+
#### Top Alignment
|
|
4040
|
+
|
|
4041
|
+
```tsx
|
|
4042
|
+
<SharingButton
|
|
4043
|
+
link={'https://components.chayns.net/'}
|
|
4044
|
+
alignment={ContextMenuAlignment.TopCenter}
|
|
4045
|
+
>
|
|
4046
|
+
{'Teilen'}
|
|
4047
|
+
</SharingButton>
|
|
4048
|
+
```
|
|
4049
|
+
|
|
4050
|
+
#### Bottom Right Alignment
|
|
4051
|
+
|
|
4052
|
+
```tsx
|
|
4053
|
+
<SharingButton
|
|
4054
|
+
link={'https://components.chayns.net/'}
|
|
4055
|
+
alignment={ContextMenuAlignment.BottomRight}
|
|
4056
|
+
>
|
|
4057
|
+
{'Teilen'}
|
|
4058
|
+
</SharingButton>
|
|
4059
|
+
```
|
|
4060
|
+
|
|
4061
|
+
#### Custom Link
|
|
4062
|
+
|
|
4063
|
+
```tsx
|
|
4064
|
+
<SharingButton
|
|
4065
|
+
link={'https://github.com/TobitSoftware/chayns-components'}
|
|
4066
|
+
alignment={ContextMenuAlignment.BottomLeft}
|
|
4067
|
+
>
|
|
4068
|
+
{'Teilen'}
|
|
4069
|
+
</SharingButton>
|
|
4070
|
+
```
|
|
4071
|
+
|
|
4072
|
+
#### Disabled
|
|
4073
|
+
|
|
4074
|
+
```tsx
|
|
4075
|
+
<SharingButton
|
|
4076
|
+
link={'https://components.chayns.net/'}
|
|
4077
|
+
alignment={ContextMenuAlignment.BottomRight}
|
|
4078
|
+
isDisabled
|
|
4079
|
+
>
|
|
4080
|
+
{'Teilen'}
|
|
4081
|
+
</SharingButton>
|
|
4082
|
+
```
|
|
4083
|
+
|
|
4084
|
+
### Props
|
|
4085
|
+
|
|
4086
|
+
No prop documentation available.
|
|
4087
|
+
|
|
4088
|
+
### Types
|
|
4089
|
+
|
|
4090
|
+
No additional exported types documented.
|
|
4091
|
+
|
|
4092
|
+
### Usage Notes
|
|
4093
|
+
|
|
4094
|
+
- Import `SharingButton` directly from `@chayns-components/core` instead of internal source paths.
|
|
4095
|
+
- Start with one of the documented Storybook examples and adapt the props incrementally for your use case.
|
|
4096
|
+
|
|
4097
|
+
### Anti Patterns
|
|
4098
|
+
|
|
4099
|
+
- Avoid imports from internal paths such as `@chayns-components/core/src/...`; always use the public package export.
|
|
4100
|
+
## Signature
|
|
4101
|
+
|
|
4102
|
+
`Signature` is exported by `@chayns-components/core` and should be imported from the public package entry point.
|
|
4103
|
+
|
|
4104
|
+
### Import
|
|
4105
|
+
|
|
4106
|
+
```ts
|
|
4107
|
+
import { Signature } from '@chayns-components/core';
|
|
4108
|
+
```
|
|
4109
|
+
|
|
4110
|
+
### Examples
|
|
4111
|
+
|
|
4112
|
+
#### General
|
|
4113
|
+
|
|
4114
|
+
```tsx
|
|
4115
|
+
<Signature
|
|
4116
|
+
buttonText={'Unterschreiben'}
|
|
4117
|
+
/>
|
|
4118
|
+
```
|
|
4119
|
+
|
|
4120
|
+
### Props
|
|
4121
|
+
|
|
4122
|
+
No prop documentation available.
|
|
4123
|
+
|
|
4124
|
+
### Types
|
|
4125
|
+
|
|
4126
|
+
No additional exported types documented.
|
|
4127
|
+
|
|
4128
|
+
### Usage Notes
|
|
4129
|
+
|
|
4130
|
+
- Import `Signature` directly from `@chayns-components/core` instead of internal source paths.
|
|
4131
|
+
- Start with one of the documented Storybook examples and adapt the props incrementally for your use case.
|
|
4132
|
+
|
|
4133
|
+
### Anti Patterns
|
|
4134
|
+
|
|
4135
|
+
- Avoid imports from internal paths such as `@chayns-components/core/src/...`; always use the public package export.
|
|
4136
|
+
## Slider
|
|
4137
|
+
|
|
4138
|
+
`Slider` is exported by `@chayns-components/core` and should be imported from the public package entry point.
|
|
4139
|
+
|
|
4140
|
+
### Import
|
|
4141
|
+
|
|
4142
|
+
```ts
|
|
4143
|
+
import { Slider } from '@chayns-components/core';
|
|
4144
|
+
```
|
|
4145
|
+
|
|
4146
|
+
### Examples
|
|
4147
|
+
|
|
4148
|
+
#### General
|
|
4149
|
+
|
|
4150
|
+
```tsx
|
|
4151
|
+
<Slider
|
|
4152
|
+
maxValue={100}
|
|
4153
|
+
minValue={0}
|
|
4154
|
+
/>
|
|
4155
|
+
```
|
|
4156
|
+
|
|
4157
|
+
#### Range Slider
|
|
4158
|
+
|
|
4159
|
+
```tsx
|
|
4160
|
+
<Slider
|
|
4161
|
+
maxValue={100}
|
|
4162
|
+
minValue={0}
|
|
4163
|
+
interval={{
|
|
4164
|
+
maxValue: 50,
|
|
4165
|
+
minValue: 10,
|
|
4166
|
+
}}
|
|
4167
|
+
/>
|
|
4168
|
+
```
|
|
4169
|
+
|
|
4170
|
+
#### With Highlighted Steps
|
|
4171
|
+
|
|
4172
|
+
```tsx
|
|
4173
|
+
<Slider
|
|
4174
|
+
maxValue={4}
|
|
4175
|
+
minValue={0}
|
|
4176
|
+
shouldHighlightSteps
|
|
4177
|
+
step={1}
|
|
4178
|
+
value={1}
|
|
4179
|
+
/>
|
|
4180
|
+
```
|
|
4181
|
+
|
|
4182
|
+
#### With Partial Range
|
|
4183
|
+
|
|
4184
|
+
```tsx
|
|
4185
|
+
<Slider
|
|
4186
|
+
maxValue={4}
|
|
4187
|
+
minValue={0}
|
|
4188
|
+
maxEnabledValue={3}
|
|
4189
|
+
minEnabledValue={1}
|
|
4190
|
+
shouldHighlightSteps
|
|
4191
|
+
step={1}
|
|
4192
|
+
value={2}
|
|
4193
|
+
/>
|
|
4194
|
+
```
|
|
4195
|
+
|
|
4196
|
+
#### With Thumb Label Formatter
|
|
4197
|
+
|
|
4198
|
+
```tsx
|
|
4199
|
+
<Slider
|
|
4200
|
+
maxValue={13.37}
|
|
4201
|
+
minValue={0}
|
|
4202
|
+
shouldShowThumbLabel
|
|
4203
|
+
/>
|
|
4204
|
+
```
|
|
4205
|
+
|
|
4206
|
+
### Props
|
|
4207
|
+
|
|
4208
|
+
No prop documentation available.
|
|
4209
|
+
|
|
4210
|
+
### Types
|
|
4211
|
+
|
|
4212
|
+
No additional exported types documented.
|
|
4213
|
+
|
|
4214
|
+
### Usage Notes
|
|
4215
|
+
|
|
4216
|
+
- Import `Slider` directly from `@chayns-components/core` instead of internal source paths.
|
|
4217
|
+
- Start with one of the documented Storybook examples and adapt the props incrementally for your use case.
|
|
4218
|
+
|
|
4219
|
+
### Anti Patterns
|
|
4220
|
+
|
|
4221
|
+
- Avoid imports from internal paths such as `@chayns-components/core/src/...`; always use the public package export.
|
|
4222
|
+
## SliderButton
|
|
4223
|
+
|
|
4224
|
+
`SliderButton` is exported by `@chayns-components/core` and should be imported from the public package entry point.
|
|
4225
|
+
|
|
4226
|
+
### Import
|
|
4227
|
+
|
|
4228
|
+
```ts
|
|
4229
|
+
import { SliderButton } from '@chayns-components/core';
|
|
4230
|
+
```
|
|
4231
|
+
|
|
4232
|
+
### Examples
|
|
4233
|
+
|
|
4234
|
+
#### General
|
|
4235
|
+
|
|
4236
|
+
```tsx
|
|
4237
|
+
<SliderButton
|
|
4238
|
+
items={[
|
|
4239
|
+
{ id: 'montag', text: 'Mo.' },
|
|
4240
|
+
{ id: 'dienstag', text: 'Di.' },
|
|
4241
|
+
{ id: 'mittwoch', text: 'Mi.' },
|
|
4242
|
+
{ id: 'donnerstag', text: 'Do.' },
|
|
4243
|
+
{ id: 'freitag', text: 'Fr.' },
|
|
4244
|
+
{ id: 'samstag', text: 'Sa.' },
|
|
4245
|
+
{ id: 'sonntag', text: 'So.' },
|
|
4246
|
+
]}
|
|
4247
|
+
/>
|
|
4248
|
+
```
|
|
4249
|
+
|
|
4250
|
+
#### Expanded
|
|
4251
|
+
|
|
4252
|
+
```tsx
|
|
4253
|
+
<SliderButton
|
|
4254
|
+
items={[
|
|
4255
|
+
{ id: 'montag', text: 'Montag' },
|
|
4256
|
+
{ id: 'dienstag', text: 'Dienstag' },
|
|
4257
|
+
{ id: 'mittwoch', text: 'Mittwoch' },
|
|
4258
|
+
{ id: 'donnerstag', text: 'Donnerstag' },
|
|
4259
|
+
{ id: 'freitag', text: 'Freitag' },
|
|
4260
|
+
{ id: 'samstag', text: 'Samstag' },
|
|
4261
|
+
{ id: 'sonntag', text: 'Sonntag' },
|
|
4262
|
+
]}
|
|
4263
|
+
/>
|
|
4264
|
+
```
|
|
4265
|
+
|
|
4266
|
+
### Props
|
|
4267
|
+
|
|
4268
|
+
No prop documentation available.
|
|
4269
|
+
|
|
4270
|
+
### Types
|
|
4271
|
+
|
|
4272
|
+
No additional exported types documented.
|
|
4273
|
+
|
|
4274
|
+
### Usage Notes
|
|
4275
|
+
|
|
4276
|
+
- Import `SliderButton` directly from `@chayns-components/core` instead of internal source paths.
|
|
4277
|
+
- Start with one of the documented Storybook examples and adapt the props incrementally for your use case.
|
|
4278
|
+
|
|
4279
|
+
### Anti Patterns
|
|
4280
|
+
|
|
4281
|
+
- Avoid imports from internal paths such as `@chayns-components/core/src/...`; always use the public package export.
|
|
4282
|
+
## SmallWaitCursor
|
|
4283
|
+
|
|
4284
|
+
`SmallWaitCursor` is exported by `@chayns-components/core` and should be imported from the public package entry point.
|
|
4285
|
+
|
|
4286
|
+
### Import
|
|
4287
|
+
|
|
4288
|
+
```ts
|
|
4289
|
+
import { SmallWaitCursor } from '@chayns-components/core';
|
|
4290
|
+
```
|
|
4291
|
+
|
|
4292
|
+
### Examples
|
|
4293
|
+
|
|
4294
|
+
#### General
|
|
4295
|
+
|
|
4296
|
+
```tsx
|
|
4297
|
+
<SmallWaitCursor
|
|
4298
|
+
shouldHideBackground={false}
|
|
4299
|
+
shouldHideWaitCursor={false}
|
|
4300
|
+
/>
|
|
4301
|
+
```
|
|
4302
|
+
|
|
4303
|
+
### Props
|
|
4304
|
+
|
|
4305
|
+
No prop documentation available.
|
|
4306
|
+
|
|
4307
|
+
### Types
|
|
4308
|
+
|
|
4309
|
+
No additional exported types documented.
|
|
4310
|
+
|
|
4311
|
+
### Usage Notes
|
|
4312
|
+
|
|
4313
|
+
- Import `SmallWaitCursor` directly from `@chayns-components/core` instead of internal source paths.
|
|
4314
|
+
- Start with one of the documented Storybook examples and adapt the props incrementally for your use case.
|
|
4315
|
+
|
|
4316
|
+
### Anti Patterns
|
|
4317
|
+
|
|
4318
|
+
- Avoid imports from internal paths such as `@chayns-components/core/src/...`; always use the public package export.
|
|
4319
|
+
## TagInput
|
|
4320
|
+
|
|
4321
|
+
`TagInput` is exported by `@chayns-components/core` and should be imported from the public package entry point.
|
|
4322
|
+
|
|
4323
|
+
### Import
|
|
4324
|
+
|
|
4325
|
+
```ts
|
|
4326
|
+
import { TagInput } from '@chayns-components/core';
|
|
4327
|
+
```
|
|
4328
|
+
|
|
4329
|
+
### Examples
|
|
4330
|
+
|
|
4331
|
+
#### General
|
|
4332
|
+
|
|
4333
|
+
```tsx
|
|
4334
|
+
<TagInput
|
|
4335
|
+
tags={[
|
|
4336
|
+
{ id: 'pizza', text: 'Pizza' },
|
|
4337
|
+
{ id: 'nudeln', text: 'Nudeln' },
|
|
4338
|
+
]}
|
|
4339
|
+
/>
|
|
4340
|
+
```
|
|
4341
|
+
|
|
4342
|
+
### Props
|
|
4343
|
+
|
|
4344
|
+
No prop documentation available.
|
|
4345
|
+
|
|
4346
|
+
### Types
|
|
4347
|
+
|
|
4348
|
+
No additional exported types documented.
|
|
4349
|
+
|
|
4350
|
+
### Usage Notes
|
|
4351
|
+
|
|
4352
|
+
- Import `TagInput` directly from `@chayns-components/core` instead of internal source paths.
|
|
4353
|
+
- Start with one of the documented Storybook examples and adapt the props incrementally for your use case.
|
|
4354
|
+
|
|
4355
|
+
### Anti Patterns
|
|
4356
|
+
|
|
4357
|
+
- Avoid imports from internal paths such as `@chayns-components/core/src/...`; always use the public package export.
|
|
4358
|
+
## TextArea
|
|
4359
|
+
|
|
4360
|
+
`TextArea` is exported by `@chayns-components/core` and should be imported from the public package entry point.
|
|
4361
|
+
|
|
4362
|
+
### Import
|
|
4363
|
+
|
|
4364
|
+
```ts
|
|
4365
|
+
import { TextArea } from '@chayns-components/core';
|
|
4366
|
+
```
|
|
4367
|
+
|
|
4368
|
+
### Examples
|
|
4369
|
+
|
|
4370
|
+
#### General
|
|
4371
|
+
|
|
4372
|
+
```tsx
|
|
4373
|
+
<TextArea
|
|
4374
|
+
placeholder={'Nachricht schreiben'}
|
|
4375
|
+
/>
|
|
4376
|
+
```
|
|
4377
|
+
|
|
4378
|
+
#### Disabled
|
|
4379
|
+
|
|
4380
|
+
```tsx
|
|
4381
|
+
<TextArea
|
|
4382
|
+
placeholder={'Nachricht schreiben'}
|
|
4383
|
+
isDisabled
|
|
4384
|
+
/>
|
|
4385
|
+
```
|
|
4386
|
+
|
|
4387
|
+
#### Max Height
|
|
4388
|
+
|
|
4389
|
+
```tsx
|
|
4390
|
+
<TextArea
|
|
4391
|
+
placeholder={'Nachricht schreiben'}
|
|
4392
|
+
maxHeight={'200px'}
|
|
4393
|
+
/>
|
|
4394
|
+
```
|
|
4395
|
+
|
|
4396
|
+
#### Right Element
|
|
4397
|
+
|
|
4398
|
+
```tsx
|
|
4399
|
+
<TextArea
|
|
4400
|
+
placeholder={'Nachricht schreiben'}
|
|
4401
|
+
rightElement={<div
|
|
4402
|
+
style={{
|
|
4403
|
+
backgroundColor: '#3377b6',
|
|
4404
|
+
height: '100%',
|
|
4405
|
+
width: '42px',
|
|
4406
|
+
display: 'flex',
|
|
4407
|
+
alignItems: 'center',
|
|
4408
|
+
justifyContent: 'center',
|
|
4409
|
+
}}
|
|
4410
|
+
>
|
|
4411
|
+
<Icon icons={['ts-calling-code']} size={25} color={'white'} />
|
|
4412
|
+
</div>}
|
|
4413
|
+
/>
|
|
4414
|
+
```
|
|
4415
|
+
|
|
4416
|
+
#### With Ref
|
|
4417
|
+
|
|
4418
|
+
```tsx
|
|
4419
|
+
<TextArea
|
|
4420
|
+
placeholder={'Nachricht schreiben'}
|
|
4421
|
+
/>
|
|
4422
|
+
```
|
|
4423
|
+
|
|
4424
|
+
### Props
|
|
4425
|
+
|
|
4426
|
+
No prop documentation available.
|
|
4427
|
+
|
|
4428
|
+
### Types
|
|
4429
|
+
|
|
4430
|
+
No additional exported types documented.
|
|
4431
|
+
|
|
4432
|
+
### Usage Notes
|
|
4433
|
+
|
|
4434
|
+
- Import `TextArea` directly from `@chayns-components/core` instead of internal source paths.
|
|
4435
|
+
- Start with one of the documented Storybook examples and adapt the props incrementally for your use case.
|
|
4436
|
+
|
|
4437
|
+
### Anti Patterns
|
|
4438
|
+
|
|
4439
|
+
- Avoid imports from internal paths such as `@chayns-components/core/src/...`; always use the public package export.
|
|
4440
|
+
## Tooltip
|
|
4441
|
+
|
|
4442
|
+
`Tooltip` is exported by `@chayns-components/core` and should be imported from the public package entry point.
|
|
4443
|
+
|
|
4444
|
+
### Import
|
|
4445
|
+
|
|
4446
|
+
```ts
|
|
4447
|
+
import { Tooltip } from '@chayns-components/core';
|
|
4448
|
+
```
|
|
4449
|
+
|
|
4450
|
+
### Examples
|
|
4451
|
+
|
|
4452
|
+
#### General
|
|
4453
|
+
|
|
4454
|
+
```tsx
|
|
4455
|
+
<Tooltip
|
|
4456
|
+
item={{
|
|
4457
|
+
headline: 'Info',
|
|
4458
|
+
text: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus vehicula nisi sapien, in vehicula elit malesuada sit amet. Vivamus ac ultricies felis. Interdum et malesuada fames ac ante ipsum primis in faucibus. Maecenas felis ligula, pulvinar id ipsum sit amet, placerat blandit orci. Aenean purus magna, aliquam eu pellentesque blandit, maximus maximus quam. Vestibulum non elit vitae turpis efficitur tincidunt. Vestibulum pretium eleifend fermentum. Ut rutrum nec nisl quis mollis. Proin non erat ex. Integer nulla felis, lacinia sed fringilla sed, dignissim in neque. Etiam quis sem tempor, pulvinar neque ac, lobortis massa. Maecenas nec sapien erat. Donec nisl leo, sollicitudin id fermentum pellentesque, condimentum a ligula. Maecenas vel interdum ligula. In sagittis, nulla condimentum porta ornare, ante velit ornare tellus, et vehicula quam lacus luctus turpis.',
|
|
4459
|
+
button: { text: 'Hallo', onClick: () => alert('hallo') },
|
|
4460
|
+
imageUrl:
|
|
4461
|
+
'https://tsimg.cloud/77896-21884/25399416f38c1d960f521a3530c8a2bc70a88bb9.png',
|
|
4462
|
+
}}
|
|
4463
|
+
itemWidth={'300px'}
|
|
4464
|
+
>
|
|
4465
|
+
{'Hover me!'}
|
|
4466
|
+
</Tooltip>
|
|
4467
|
+
```
|
|
4468
|
+
|
|
4469
|
+
#### On Checkbox
|
|
4470
|
+
|
|
4471
|
+
```tsx
|
|
4472
|
+
<Tooltip
|
|
4473
|
+
item={{
|
|
4474
|
+
headline: 'Info',
|
|
4475
|
+
text: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus vehicula nisi sapien, in vehicula elit malesuada sit amet. Vivamus ac ultricies felis. Interdum et malesuada fames ac ante ipsum primis in faucibus. Maecenas felis ligula, pulvinar id ipsum sit amet, placerat blandit orci. Aenean purus magna, aliquam eu pellentesque blandit, maximus maximus quam. Vestibulum non elit vitae turpis efficitur tincidunt. Vestibulum pretium eleifend fermentum. Ut rutrum nec nisl quis mollis. Proin non erat ex. Integer nulla felis, lacinia sed fringilla sed, dignissim in neque. Etiam quis sem tempor, pulvinar neque ac, lobortis massa. Maecenas nec sapien erat. Donec nisl leo, sollicitudin id fermentum pellentesque, condimentum a ligula. Maecenas vel interdum ligula. In sagittis, nulla condimentum porta ornare, ante velit ornare tellus, et vehicula quam lacus luctus turpis.',
|
|
4476
|
+
button: { text: 'Hallo', onClick: () => alert('hallo') },
|
|
4477
|
+
imageUrl:
|
|
4478
|
+
'https://tsimg.cloud/77896-21884/25399416f38c1d960f521a3530c8a2bc70a88bb9.png',
|
|
4479
|
+
}}
|
|
4480
|
+
itemWidth={'300px'}
|
|
4481
|
+
>
|
|
4482
|
+
{<Checkbox>Checkbox mit Tooltip</Checkbox>}
|
|
4483
|
+
</Tooltip>
|
|
4484
|
+
```
|
|
4485
|
+
|
|
4486
|
+
#### On Deactivated Input
|
|
4487
|
+
|
|
4488
|
+
```tsx
|
|
4489
|
+
<Tooltip
|
|
4490
|
+
item={{
|
|
4491
|
+
headline: undefined,
|
|
4492
|
+
text: 'Aktiviere den Agenten, um das Briefing zu testen.',
|
|
4493
|
+
imageUrl: undefined,
|
|
4494
|
+
button: undefined,
|
|
4495
|
+
}}
|
|
4496
|
+
itemWidth={undefined}
|
|
4497
|
+
shouldUseChildrenWidth
|
|
4498
|
+
>
|
|
4499
|
+
{<Input isDisabled placeholder="Deaktiviert"></Input>}
|
|
4500
|
+
</Tooltip>
|
|
4501
|
+
```
|
|
4502
|
+
|
|
4503
|
+
### Props
|
|
4504
|
+
|
|
4505
|
+
No prop documentation available.
|
|
4506
|
+
|
|
4507
|
+
### Types
|
|
4508
|
+
|
|
4509
|
+
No additional exported types documented.
|
|
4510
|
+
|
|
4511
|
+
### Usage Notes
|
|
4512
|
+
|
|
4513
|
+
- Import `Tooltip` directly from `@chayns-components/core` instead of internal source paths.
|
|
4514
|
+
- Start with one of the documented Storybook examples and adapt the props incrementally for your use case.
|
|
4515
|
+
|
|
4516
|
+
### Anti Patterns
|
|
4517
|
+
|
|
4518
|
+
- Avoid imports from internal paths such as `@chayns-components/core/src/...`; always use the public package export.
|
|
4519
|
+
## Truncation
|
|
4520
|
+
|
|
4521
|
+
`Truncation` is exported by `@chayns-components/core` and should be imported from the public package entry point.
|
|
4522
|
+
|
|
4523
|
+
### Import
|
|
4524
|
+
|
|
4525
|
+
```ts
|
|
4526
|
+
import { Button, Truncation } from '@chayns-components/core';
|
|
4527
|
+
```
|
|
4528
|
+
|
|
4529
|
+
### Examples
|
|
4530
|
+
|
|
4531
|
+
#### General
|
|
4532
|
+
|
|
4533
|
+
```tsx
|
|
4534
|
+
<Truncation
|
|
4535
|
+
collapsedHeight={100}
|
|
4536
|
+
>
|
|
4537
|
+
{
|
|
4538
|
+
<div>
|
|
4539
|
+
<p id="isPasted">
|
|
4540
|
+
Der legendärste Abend: Homecoming at next! Studenten und Ausreißer, Urlauber und
|
|
4541
|
+
Daheimgebliebene, Partymäuse und Partymuffel – sie alle zieht es am Tag vor Heiligabend
|
|
4542
|
+
in die Heimat an einen zuvor ausgemachten Ort, um all die guten Freunde und alte
|
|
4543
|
+
Bekannte wiederzutreffen.
|
|
4544
|
+
</p>
|
|
4545
|
+
<p>
|
|
4546
|
+
Was damals vor vielen Jahren auf der StattAlm auf dem Campus in Ahaus begann, führen wir
|
|
4547
|
+
bei uns im next fort!
|
|
4548
|
+
</p>
|
|
4549
|
+
<p>Alle Infos und Tickets zum Event in Kürze. </p>
|
|
4550
|
+
<Button onClick={() => alert('hallo')}>test</Button>
|
|
4551
|
+
</div>
|
|
4552
|
+
}
|
|
4553
|
+
</Truncation>
|
|
4554
|
+
```
|
|
4555
|
+
|
|
4556
|
+
#### Animated Children
|
|
4557
|
+
|
|
4558
|
+
```tsx
|
|
4559
|
+
<Truncation
|
|
4560
|
+
collapsedHeight={100}
|
|
4561
|
+
>
|
|
4562
|
+
{
|
|
4563
|
+
<>
|
|
4564
|
+
<p id="isPasted">
|
|
4565
|
+
Der legendärste Abend: Homecoming at next! Studenten und Ausreißer, Urlauber und
|
|
4566
|
+
Daheimgebliebene, Partymäuse und Partymuffel – sie alle zieht es am Tag vor
|
|
4567
|
+
Heiligabend in die Heimat an einen zuvor ausgemachten Ort, um all die guten Freunde
|
|
4568
|
+
und alte Bekannte wiederzutreffen.
|
|
4569
|
+
</p>
|
|
4570
|
+
<Accordion title="Lorem">
|
|
4571
|
+
<AccordionContent>
|
|
4572
|
+
Der legendärste Abend: Homecoming at next! Studenten und Ausreißer, Urlauber und
|
|
4573
|
+
Daheimgebliebene, Partymäuse und Partymuffel – sie alle zieht es am Tag vor
|
|
4574
|
+
Heiligabend in die Heimat an einen zuvor ausgemachten Ort, um all die guten
|
|
4575
|
+
Freunde und alte Bekannte wiederzutreffen.
|
|
4576
|
+
</AccordionContent>
|
|
4577
|
+
</Accordion>
|
|
4578
|
+
<p>
|
|
4579
|
+
Was damals vor vielen Jahren auf der StattAlm auf dem Campus in Ahaus begann, führen
|
|
4580
|
+
wir bei uns im next fort!
|
|
4581
|
+
</p>
|
|
4582
|
+
<p>Alle Infos und Tickets zum Event in Kürze. </p>
|
|
4583
|
+
<Button onClick={() => alert('hallo')}>test</Button>
|
|
4584
|
+
</>
|
|
4585
|
+
}
|
|
4586
|
+
</Truncation>
|
|
4587
|
+
```
|
|
4588
|
+
|
|
4589
|
+
#### Small Text
|
|
4590
|
+
|
|
4591
|
+
```tsx
|
|
4592
|
+
<Truncation
|
|
4593
|
+
collapsedHeight={100}
|
|
4594
|
+
>
|
|
4595
|
+
{<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>}
|
|
4596
|
+
</Truncation>
|
|
4597
|
+
```
|
|
4598
|
+
|
|
4599
|
+
#### Just Text
|
|
4600
|
+
|
|
4601
|
+
```tsx
|
|
4602
|
+
<Truncation
|
|
4603
|
+
collapsedHeight={100}
|
|
4604
|
+
>
|
|
4605
|
+
{
|
|
4606
|
+
<p>
|
|
4607
|
+
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi lacinia diam ut nisi
|
|
4608
|
+
lacinia vestibulum. Donec sit amet euismod nisl. Morbi orci ipsum, lacinia in eros sit
|
|
4609
|
+
amet, pulvinar vestibulum tellus. Orci varius natoque penatibus et magnis dis parturient
|
|
4610
|
+
montes, nascetur ridiculus mus. Praesent non blandit ipsum. Aliquam libero quam,
|
|
4611
|
+
fermentum sit amet massa id, gravida hendrerit ex. Donec lectus felis, feugiat eget
|
|
4612
|
+
finibus eu, luctus id nunc. Nam at nibh magna. Integer congue aliquam turpis quis
|
|
4613
|
+
iaculis. Quisque vestibulum sodales placerat. Cras semper ex quis feugiat pharetra. Nam
|
|
4614
|
+
lacinia magna non vulputate ullamcorper. Vestibulum at orci nec ligula efficitur
|
|
4615
|
+
volutpat eu eget enim. Ut tempus aliquet arcu, sit amet fringilla mi elementum sodales.
|
|
4616
|
+
Nulla ut ullamcorper tortor, in hendrerit enim. Etiam vel vestibulum massa. Mauris
|
|
4617
|
+
placerat, turpis vitae pharetra dapibus, libero lacus bibendum metus, nec condimentum
|
|
4618
|
+
erat magna a neque. Ut euismod tincidunt tempus. Suspendisse ut velit id justo
|
|
4619
|
+
vestibulum ullamcorper nec sit amet risus. Interdum et malesuada fames ac ante ipsum
|
|
4620
|
+
primis in faucibus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec
|
|
4621
|
+
vestibulum, nibh eget efficitur venenatis, ipsum nibh rutrum massa, a posuere justo est
|
|
4622
|
+
a metus. Donec a feugiat diam. Aliquam scelerisque in magna euismod accumsan. Maecenas
|
|
4623
|
+
non vulputate nibh. Suspendisse scelerisque tristique augue, quis gravida felis tempor
|
|
4624
|
+
sit amet. Orci varius natoque penatibus et magnis dis parturient montes, nascetur
|
|
4625
|
+
ridiculus mus. Phasellus id eros eu ante pellentesque iaculis. Nullam porttitor mattis
|
|
4626
|
+
lorem, a dapibus massa maximus nec. Maecenas consequat pharetra volutpat. Phasellus
|
|
4627
|
+
finibus nisi in felis posuere condimentum. Aenean congue ornare est, ac maximus nulla
|
|
4628
|
+
fermentum a. Etiam erat purus, ullamcorper ac dolor vel, pellentesque pellentesque
|
|
4629
|
+
tortor. Nulla vitae ligula id lectus commodo ornare sed ac dolor. Aenean tincidunt
|
|
4630
|
+
sodales quam a rutrum. Proin ac nisi eu justo ultrices iaculis vel eget nisi. Aliquam at
|
|
4631
|
+
mattis nisl. Nunc pellentesque eleifend vehicula. Cras convallis eget nisl non laoreet.
|
|
4632
|
+
Nulla facilisi. In ultrices massa a ornare interdum. Sed pellentesque odio posuere
|
|
4633
|
+
malesuada imperdiet. Duis ac dapibus orci. Class aptent taciti sociosqu ad litora
|
|
4634
|
+
torquent per conubia nostra, per inceptos himenaeos. Mauris volutpat in arcu ut laoreet.
|
|
4635
|
+
Donec a porta mauris. Nulla viverra congue nisl, ut lobortis mi consequat ut. Phasellus
|
|
4636
|
+
non eros ut erat venenatis dictum. Sed purus dui, consequat et malesuada nec, molestie
|
|
4637
|
+
ac odio.
|
|
4638
|
+
</p>
|
|
4639
|
+
}
|
|
4640
|
+
</Truncation>
|
|
4641
|
+
```
|
|
4642
|
+
|
|
4643
|
+
#### Floating Image
|
|
4644
|
+
|
|
4645
|
+
```tsx
|
|
4646
|
+
<Truncation
|
|
4647
|
+
collapsedHeight={350}
|
|
4648
|
+
>
|
|
4649
|
+
{
|
|
4650
|
+
<div>
|
|
4651
|
+
<img style={{ float: 'right' }} alt="" src="https://picsum.photos/200" />
|
|
4652
|
+
<div>
|
|
4653
|
+
<p>
|
|
4654
|
+
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi lacinia diam ut
|
|
4655
|
+
nisi lacinia vestibulum. Donec sit amet euismod nisl. Morbi orci ipsum, lacinia
|
|
4656
|
+
in eros sit amet, pulvinar vestibulum tellus. Orci varius natoque penatibus et
|
|
4657
|
+
magnis dis parturient montes, nascetur ridiculus mus. Praesent non blandit
|
|
4658
|
+
ipsum. Aliquam libero quam, fermentum sit amet massa id, gravida hendrerit ex.
|
|
4659
|
+
Donec lectus felis, feugiat eget finibus eu, luctus id nunc. Nam at nibh magna.
|
|
4660
|
+
Integer congue aliquam turpis quis iaculis. Quisque vestibulum sodales placerat.
|
|
4661
|
+
Cras semper ex quis feugiat pharetra.
|
|
4662
|
+
</p>
|
|
4663
|
+
<p>
|
|
4664
|
+
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi lacinia diam ut
|
|
4665
|
+
nisi lacinia vestibulum. Donec sit amet euismod nisl. Morbi orci ipsum, lacinia
|
|
4666
|
+
in eros sit amet, pulvinar vestibulum tellus. Orci varius natoque penatibus et
|
|
4667
|
+
magnis dis parturient montes, nascetur ridiculus mus. Praesent non blandit
|
|
4668
|
+
ipsum. Aliquam libero quam, fermentum sit amet massa id, gravida hendrerit ex.
|
|
4669
|
+
Donec lectus felis, feugiat eget finibus eu, luctus id nunc. Nam at nibh magna.
|
|
4670
|
+
Integer congue aliquam turpis quis iaculis. Quisque vestibulum sodales placerat.
|
|
4671
|
+
Cras semper ex quis feugiat pharetra.
|
|
4672
|
+
</p>
|
|
4673
|
+
<p>
|
|
4674
|
+
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi lacinia diam ut
|
|
4675
|
+
nisi lacinia vestibulum. Donec sit amet euismod nisl. Morbi orci ipsum, lacinia
|
|
4676
|
+
in eros sit amet, pulvinar vestibulum tellus. Orci varius natoque penatibus et
|
|
4677
|
+
magnis dis parturient montes, nascetur ridiculus mus. Praesent non blandit
|
|
4678
|
+
ipsum. Aliquam libero quam, fermentum sit amet massa id, gravida hendrerit ex.
|
|
4679
|
+
Donec lectus felis, feugiat eget finibus eu, luctus id nunc. Nam at nibh magna.
|
|
4680
|
+
Integer congue aliquam turpis quis iaculis. Quisque vestibulum sodales placerat.
|
|
4681
|
+
Cras semper ex quis feugiat pharetra.
|
|
4682
|
+
</p>
|
|
4683
|
+
</div>
|
|
4684
|
+
</div>
|
|
4685
|
+
}
|
|
4686
|
+
</Truncation>
|
|
4687
|
+
```
|
|
4688
|
+
|
|
4689
|
+
### Props
|
|
4690
|
+
|
|
4691
|
+
No prop documentation available.
|
|
4692
|
+
|
|
4693
|
+
### Types
|
|
4694
|
+
|
|
4695
|
+
No additional exported types documented.
|
|
4696
|
+
|
|
4697
|
+
### Usage Notes
|
|
4698
|
+
|
|
4699
|
+
- Import `Truncation` directly from `@chayns-components/core` instead of internal source paths.
|
|
4700
|
+
- Start with one of the documented Storybook examples and adapt the props incrementally for your use case.
|
|
4701
|
+
|
|
4702
|
+
### Anti Patterns
|
|
4703
|
+
|
|
4704
|
+
- Avoid imports from internal paths such as `@chayns-components/core/src/...`; always use the public package export.
|
|
4705
|
+
## VerificationBadge
|
|
4706
|
+
|
|
4707
|
+
`VerificationBadge` is exported by `@chayns-components/core` and should be imported from the public package entry point.
|
|
4708
|
+
|
|
4709
|
+
### Import
|
|
4710
|
+
|
|
4711
|
+
```ts
|
|
4712
|
+
import { VerificationBadge } from '@chayns-components/core';
|
|
4713
|
+
```
|
|
4714
|
+
|
|
4715
|
+
### Examples
|
|
4716
|
+
|
|
4717
|
+
#### General
|
|
4718
|
+
|
|
4719
|
+
```tsx
|
|
4720
|
+
<VerificationBadge />
|
|
4721
|
+
```
|
|
4722
|
+
|
|
4723
|
+
### Props
|
|
4724
|
+
|
|
4725
|
+
No prop documentation available.
|
|
4726
|
+
|
|
4727
|
+
### Types
|
|
4728
|
+
|
|
4729
|
+
No additional exported types documented.
|
|
4730
|
+
|
|
4731
|
+
### Usage Notes
|
|
4732
|
+
|
|
4733
|
+
- Import `VerificationBadge` directly from `@chayns-components/core` instead of internal source paths.
|
|
4734
|
+
- Start with one of the documented Storybook examples and adapt the props incrementally for your use case.
|
|
4735
|
+
|
|
4736
|
+
### Anti Patterns
|
|
4737
|
+
|
|
4738
|
+
- Avoid imports from internal paths such as `@chayns-components/core/src/...`; always use the public package export.
|