Tip Manager
Calcite Tip Manager provides a paginated container for Calcite Tip components.
Overview
Built with Calcite Tips, Tip Manager is intended to be used for in-app, short-form documentation. Use Tip Manager when inline help or documentation may be too rich for a given space.
Consider Notice for inline helpers or hints.
Usage
- Provide app-level access to onboarding material
Sample
Accessibility
Keyboard navigation
| Key | Function |
|---|---|
Tab | Move focus to next item within element. If the current focus is the last item, the focus will cycle to the first item |
Tab and Shift | Move focus to previous item within element. If the current focus is the first item, the focus will cycle to the last item |
Arrow down | Scroll down content area |
Arrow up | Scroll up content area |
API reference
Properties
| Property | Attribute | Description | Type | Values |
|---|---|---|---|---|
| closed | closed | Closed state of the `calcite-tip-manager`. | truefalse | |
| headingLevel | heading-level | Number at which section headings should start for this component. | 123456 | |
| intlClose | intl-close | Alternate text for closing the tip. | undefined | |
| intlDefaultTitle | intl-default-title | The default group title for the `calcite-tip-manager`. | undefined | |
| intlNext | intl-next | Alternate text for navigating to the next tip. | undefined | |
| intlPaginationLabel | intl-pagination-label | Label that appears on hover of pagination icon. | undefined | |
| intlPrevious | intl-previous | Alternate text for navigating to the previous tip. | undefined |
Events
| Name | Description | Detail |
|---|---|---|
| calciteTipManagerClose | Emitted when the `calcite-tip-manager` has been closed. | any |
| calciteTipManagerToggle | Emitted when the `calcite-tip-manager` has been toggled open or closed. | any |
Methods
| Name | Description | Signature | Returns |
|---|---|---|---|
| nextTip | Selects the next tip to display | nextTip() => Promise<void> | Promise<void> |
| previousTip | Selects the previous tip to display | previousTip() => Promise<void> | Promise<void> |
Slots
| Name | Description |
|---|---|
| default (unnamed) | A slot for adding `calcite-tip`s. |
Styles
| Name | Description | CSS Variable |
|---|---|---|
| --calcite-tip-manager-height | the maximum height of the tip-manager | --calcite-tip-manager-height |
| --calcite-tip-max-width | the maximum width of a slotted tip within tip-manager | --calcite-tip-max-width |