@wix/design-system
Version:
@wix/design-system
104 lines (101 loc) • 3.7 kB
Markdown
### children
- type: ReactNode
- description: Renders specified children items inside of the thumbnail. Accepts any kind of content. When passed, title will be rendered below a thumbnail.
### disabled
- type: boolean
- description: Specifies whether thumbnail interactions are disabled.
- default: false
### skin
- type: "primary" | "secondary"
- description: Controls the skin (visual style) of a thumbnail.
- default: primary
### size
- type: "tiny" | "small" | "medium"
- description: Controls the size of a thumbnail.
- default: medium
### onClick
- type: (event: MouseEvent<HTMLElement, MouseEvent> | KeyboardEvent<HTMLElement>) => void
- description: Defines a callback function which is called every time a thumbnail is clicked.
### 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.
- internal
### tooltipProps
- type: TooltipCommonProps
- description: Allows to pass tooltip common props.
### ariaLabel
- type: string
- description: Sets the aria-label attribute for accessibility.
### image
- type: ReactNode
- 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
### border
- type: boolean
- description: Adds a border and corner radius
- default: true
### title
- type: ReactNode
- description: Sets the title of a thumbnail.
### ellipsis
- type: boolean
- description: Enables ellipsis text truncation.
- default: false
### selected
- type: boolean
- description: Specifies whether a thumbnail is selected.
- default: false
### focusableOnFocus
- type: FocusEventHandler
- description: No description
### focusableOnBlur
- type: FocusEventHandler
- description: No description
### onMouseOver
- type: (event: MouseEvent<HTMLElement, MouseEvent>) => void
- description: Defines a callback function which is called every time mouse is over a thumbnail.
### noPadding
- type: boolean
- description: Turns off padding for thumbnail with textPosition='inside'
- default: false
### maxLines
- type: number
- description: Controls maximum lines that is allowed before ellipsis text truncation is applied
### backgroundImage
- type: ReactNode
- description: Render image as a background of a thumbnail. As a result, title is rendered below the image thumbnail.
### height
- type: string | number
- description: Controls the height of a thumbnail.
### width
- type: string | number
- description: Controls the width of a thumbnail.
### description
- type: ReactNode
- description: Sets thumbnail description.
### hideSelectedIcon
- type: boolean
- description: Hides a checkmark icon that indicates selected thumbnail. Selected option will be highlighted with border only.
### contentAlignment
- type: "center" | "top"
- description: Controls vertical alignment of content.
- default: center
### textPosition
- type: "inside" | "outside"
- description: Controls text position whether it is outside or inside of a thumbnail
- default: inside
### ref
- type: string & RefObject<HTMLElement> | ((instance: { focus: () => void; } | null) => void) & RefObject<HTMLElement> | RefObject<{ focus: () => void; }> & RefObject<HTMLElement>
- description: Allows getting a ref to the component instance.
Once the component unmounts, React will set `ref.current` to `null`
(or call the ref with `null` if you passed a callback ref).
### onFocus
- type: (event: FocusEvent, triggers: Triggers) => void
- description: No description
### onBlur
- type: (event: FocusEvent, triggers: Triggers) => void
- description: No description