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`. | true false | |
headingLevel | heading-level | Number at which section headings should start for this component. | 1 2 3 4 5 6 | |
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 |