wix-style-react
Version:
57 lines (45 loc) • 8.41 kB
Markdown
`<Notification>` is a compound component and requires `<Notification.TextLabel/>` to be used as children.
<details>
<summary>
`<Notification.TextLabel/>` (required)
</summary>
Use this component to display the notification message
| propName | propType | defaultValue | isRequired | description |
| ----------- | ------------------------------------------------------------------------------------------------------------ | ------------ | ---------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| children | string | - | - | The text to display |
| ellipsis | boolean | true | - | The label text could be either with or without ellipsis |
| showTooltip | boolean | true | - | When `ellipsis` is true, controls wether to show tooltip on truncated text |
| appendTo | enum:<br> "window"<br> "scrollParent"<br> "viewport"<br> "parent"<br>, element, function | "window" | - | tooltips are positioned relative to a dom element. Can be either: `'window', 'scrollParent', 'viewport', 'parent'`, `element` or `function` based predicate i.e. (elm) => elm.getAttribute('data-hook') === 'value' |
| disabled | bool | - | - | disables tooltip element trigger behaviour. If not specified, `disabled` prop of the `children` element will be used. |
| enterDelay | number | 0 | - | time in milliseconds to wait before showing the tooltip |
| exitDelay | number | 0 | - | time in milliseconds to wait before hiding the tooltip. Defaults to 0. |
| fixed | bool | false | - | whether to enable the fixed behaviour. This behaviour is used to keep the Tooltip at it's original placement even when it's being positioned outside the boundary. |
| flip | bool | true | - | whether to enable the flip behaviour. This behaviour is used to flip the Tooltips placement when it starts to overlap the target element. |
| maxWidth | number, string | 204 | - | tooltip content container width in pixels |
| moveArrowTo | number | - | - | Moves arrow by amount |
| onHide | function | - | - | callback on tooltips content hide event |
| onShow | function | - | - | callback on tooltips content show event |
| placement | string | "bottom" | - | tooltip content placement in relation to target element |
| textAlign | enum:<br> "start"<br> "center"<br> | "start" | - | align tooltip content |
| zIndex | number | 6000 | - | tooltips content zindex |
</details>
<details>
<summary>
`<Notification.CloseButton/>`
</summary>
Use this component to display the close button
</details>
<details>
<summary>
`<Notification.ActionButton/>`
</summary>
Use this component to supply an action button for the notification
| propName | propType | defaultValue | isRequired | description |
| -------- | ------------------------- | ------------ | ----------------------- | --------------------------------------------------------------------- |
| children | string | - | - | The text to display |
| type | string (button, textLink) | - | button | A Button component or TextLink component |
| onClick | function | - | e => e.preventDefault() | - |
| link | string | - | - | A url to navigate to on click |
| target | string | `_self` | - | The `target` attribute to be set on the `a` tag (for `textLink` type) |
| target | string | `_self` | - | The `target` attribute to be set on the `a` tag (for `textLink` type) |
</details>