UNPKG

@wix/design-system

Version:

@wix/design-system

www.wixdesignsystem.com

72 lines (68 loc) • 2.38 kB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
### dataHook - type: string - description: Applies a data-hook HTML attribute that can be used in the tests. ### className - type: string - description: Specifies a CSS class name to be appended to the component's root element. ### border - type: bool - description: Adds a border and corner radius ### children - type: node - description: Renders specified children items inside of the thumbnail. Accepts any kind of content. When passed, title will be rendered below a thumbnail. ### title - type: node - description: Sets the title of a thumbnail. ### description - type: node - description: Sets thumbnail description. ### image - type: node - description: Specifies an image to be displayed inside of a thumbnail. If given as string, it will be used within `<img/>`. Otherwise can be given as React.Node ### size - type: enum - description: Controls the size of a thumbnail. ### selected - type: bool - description: Specifies whether a thumbnail is selected. ### disabled - type: bool - description: Specifies whether thumbnail interactions are disabled. ### hideSelectedIcon - type: bool - description: Hides a checkmark icon that indicates selected thumbnail. Selected option will be highlighted with border only. ### backgroundImage - type: node - description: Render image as a background of a thumbnail. As a result, title is rendered below the image thumbnail. ### onClick - type: func - description: Defines a callback function which is called every time a thumbnail is clicked. ### onMouseOver - type: func - description: Defines a callback function which is called every time mouse is over a thumbnail. ### width - type: union - description: Controls the width of a thumbnail. ### height - type: union - description: Controls the height of a thumbnail. ### contentAlignment - type: enum - description: Controls vertical alignment of content. ### ellipsis - type: bool - description: Enables ellipsis text truncation. ### maxLines - type: number - description: Controls maximum lines that is allowed before ellipsis text truncation is applied ### textPosition - type: enum - description: Controls text position whether it is outside or inside of a thumbnail ### noPadding - type: bool - description: Turns off padding for thumbnail with textPosition='inside' ### tooltipProps - type: shape - description: Allows to pass tooltip common props.