| Title: | Bindings to the Calcite Design System 'JavaScript' Component Library |
| Version: | 0.1.0 |
| Description: | Provides access to the 'Calcite Design System' 'javascript' components via integration with the 'htmltools' and 'shiny' packages. Pre-built and interactive components can be used to generate either static html or interactive web applications. Learn more about the 'Calcite Design System' at https://developers.arcgis.com/calcite-design-system/. |
| License: | Apache License (≥ 2) |
| Imports: | htmltools, rlang, shiny |
| Encoding: | UTF-8 |
| Language: | en |
| RoxygenNote: | 7.3.2 |
| NeedsCompilation: | no |
| Packaged: | 2025-03-31 14:58:09 UTC; josiahparry |
| Author: | Josiah Parry 
[aut, cre] |
| Maintainer: | Josiah Parry <josiah.parry@gmail.com> |
| Repository: | CRAN |
| Date/Publication: | 2025-04-01 16:40:10 UTC |
Create a Accordion component
Description
Create a Accordion component
Usage
calcite_accordion(...)
Arguments
... |
named attributes passed to |
Details
Properties
The following properties are provided by this component:
| Name | Attribute | Description | Values | Reflects to Attribute |
| appearance | appearance | Specifies the appearance of the component. | "solid" | "transparent" | TRUE |
| iconPosition | icon-position | Specifies the placement of the icon in the header. | "end" | "start" | TRUE |
| iconType | icon-type | Specifies the type of the icon in the header. | "caret" | "chevron" | "plus-minus" | TRUE |
| scale | scale | Specifies the size of the component. | "l" | "m" | "s" | TRUE |
| selectionMode | selection-mode | Specifies the selection mode of the component, where: "multiple" allows any number of selections, "single" allows only one selection, and "single-persist" allows one selection and prevents de-selection. | "multiple" | "single" | "single-persist" | TRUE |
Slots
The following slots are provided by this component:
| Slot | Description |
| Default (unnamed) | A slot for adding calcite-accordion-items. calcite-accordion cannot be nested, however calcite-accordion-items can. |
Value
an object of class calcite_component which is a subclass of shiny.tag
References
Examples
calcite_accordion()
Create a AccordionItem component
Description
Create a AccordionItem component
Usage
calcite_accordion_item(...)
Arguments
... |
named attributes passed to |
Details
Properties
The following properties are provided by this component:
| Name | Attribute | Description | Values | Reflects to Attribute |
| description | description | Specifies a description for the component. | string | FALSE |
| expanded | expanded | When true, the component is expanded. | boolean | TRUE |
| heading | heading | Specifies heading text for the component. | string | FALSE |
| iconEnd | icon-end | Specifies an icon to display at the end of the component. | string | TRUE |
| iconFlipRtl | icon-flip-rtl | Displays the iconStart and/or iconEnd as flipped when the element direction is right-to-left ("rtl"). | "both" | "end" | "start" | TRUE |
| iconStart | icon-start | Specifies an icon to display at the start of the component. | string | TRUE |
Slots
The following slots are provided by this component:
| Slot | Description |
| Default (unnamed) | A slot for adding custom content, including nested calcite-accordion-items. |
| actions-end | A slot for adding calcite-actions or content to the end side of the component's header. |
| actions-start | A slot for adding calcite-actions or content to the start side of the component's header. |
Value
an object of class calcite_component which is a subclass of shiny.tag
References
Examples
calcite_accordion_item()
Create a Action component
Description
Create a Action component
Usage
calcite_action(...)
Arguments
... |
named attributes passed to |
Details
Properties
The following properties are provided by this component:
| Name | Attribute | Description | Values | Reflects to Attribute |
| active | active | When true, the component is highlighted. | boolean | TRUE |
| alignment | alignment | Specifies the horizontal alignment of button elements with text content. | "center" | "end" | "start" | TRUE |
| appearance | appearance | Specifies the appearance of the component. | "solid" | "transparent" | TRUE |
| compact | compact | When true, the side padding of the component is reduced. | boolean | TRUE |
| disabled | disabled | When true, interaction is prevented and the component is displayed with lower opacity. | boolean | TRUE |
| icon | icon | Specifies an icon to display. | string | TRUE |
| iconFlipRtl | icon-flip-rtl | When true, the icon will be flipped when the element direction is right-to-left ("rtl"). | boolean | TRUE |
| indicator | indicator | When true, displays a visual indicator. | boolean | TRUE |
| label | label | Specifies the label of the component. If no label is provided, the label inherits what's provided for the text prop. | string | FALSE |
| loading | loading | When true, a busy indicator is displayed. | boolean | TRUE |
| messageOverrides | NA | Use this property to override individual strings used by the component. | Check API reference | FALSE |
| scale | scale | Specifies the size of the component. | "l" | "m" | "s" | TRUE |
| text | text | Specifies text that accompanies the icon. | string | FALSE |
| textEnabled | text-enabled | Indicates whether the text is displayed. | boolean | TRUE |
Slots
The following slots are provided by this component:
| Slot | Description |
| Default (unnamed) | A slot for adding a calcite-icon. |
| tooltip | Deprecated Use the calcite-tooltip component instead. |
Value
an object of class calcite_component which is a subclass of shiny.tag
References
Examples
calcite_action()
Create a ActionBar component
Description
Create a ActionBar component
Usage
calcite_action_bar(...)
Arguments
... |
named attributes passed to |
Details
Properties
The following properties are provided by this component:
| Name | Attribute | Description | Values | Reflects to Attribute |
| actionsEndGroupLabel | actions-end-group-label | Specifies the accessible label for the last calcite-action-group. | string | FALSE |
| expandDisabled | expand-disabled | When true, the expand-toggling behavior is disabled. | boolean | TRUE |
| expanded | expanded | When true, the component is expanded. | boolean | TRUE |
| layout | layout | Specifies the layout direction of the actions. | "horizontal" | "vertical" | TRUE |
| messageOverrides | NA | Use this property to override individual strings used by the component. | Check API reference | FALSE |
| overflowActionsDisabled | overflow-actions-disabled | Disables automatically overflowing calcite-actions that won't fit into menus. | boolean | TRUE |
| overlayPositioning | overlay-positioning | Determines the type of positioning to use for the overlaid content. Using "absolute" will work for most cases. The component will be positioned inside of overflowing parent containers and will affect the container's layout. "fixed" should be used to escape an overflowing parent container, or when the reference element's position CSS property is "fixed". | "absolute" | "fixed" | TRUE |
| position | position | Arranges the component depending on the element's dir property. | "end" | "start" | TRUE |
| scale | scale | Specifies the size of the expand calcite-action. | "l" | "m" | "s" | TRUE |
Events
The following events are observed by shiny:
| Event | Description |
| calciteActionBarToggle | Fires when the expanded property is toggled. |
Slots
The following slots are provided by this component:
| Slot | Description |
| Default (unnamed) | A slot for adding calcite-actions that will appear at the top of the component. |
| bottom-actions | Deprecated Use the "actions-end" slot instead. A slot for adding calcite-actions that will appear at the bottom of the component, above the collapse/expand button. |
| actions-end | A slot for adding calcite-actions that will appear at the end of the component, prior to the collapse/expand button. |
| expand-tooltip | A slot to set the calcite-tooltip for the expand toggle. |
Value
an object of class calcite_component which is a subclass of shiny.tag
References
Examples
calcite_action_bar()
Create a ActionGroup component
Description
Create a ActionGroup component
Usage
calcite_action_group(...)
Arguments
... |
named attributes passed to |
Details
Properties
The following properties are provided by this component:
| Name | Attribute | Description | Values | Reflects to Attribute |
| columns | columns | Indicates number of columns. | 1 | 2 | 3 | 4 | 5 | 6 | TRUE |
| expanded | expanded | When true, the component is expanded. | boolean | TRUE |
| label | label | Accessible name for the component. | string | FALSE |
| layout | layout | Indicates the layout of the component. | "grid" | "horizontal" | "vertical" | TRUE |
| menuFlipPlacements | NA | Specifies the component's fallback menu placement when it's initial or specified placement has insufficient space available. | Check API reference | FALSE |
| menuOpen | menu-open | When true, the calcite-action-menu is open. | boolean | TRUE |
| menuPlacement | menu-placement | Determines where the action menu will be positioned. | "auto" | "auto-end" | "auto-start" | "bottom" | "bottom-end" | "bottom-start" | "leading" | "leading-end" | "leading-start" | "left" | "left-end" | "left-start" | "right" | "right-end" | "right-start" | "top" | "top-end" | "top-start" | "trailing" | "trailing-end" | "trailing-start" | TRUE |
| messageOverrides | NA | Use this property to override individual strings used by the component. | Check API reference | FALSE |
| overlayPositioning | overlay-positioning | Determines the type of positioning to use for the overlaid content. Using "absolute" will work for most cases. The component will be positioned inside of overflowing parent containers and will affect the container's layout. "fixed" should be used to escape an overflowing parent container, or when the reference element's position CSS property is "fixed". | "absolute" | "fixed" | TRUE |
| scale | scale | Specifies the size of the calcite-action-menu. | "l" | "m" | "s" | TRUE |
Slots
The following slots are provided by this component:
| Slot | Description |
| Default (unnamed) | A slot for adding a group of calcite-actions. |
| menu-actions | A slot for adding an overflow menu with calcite-actions inside a calcite-dropdown. |
| menu-tooltip | A slot for adding a calcite-tooltip for the menu. |
Value
an object of class calcite_component which is a subclass of shiny.tag
References
Examples
calcite_action_group()
Create a ActionPad component
Description
Create a ActionPad component
Usage
calcite_action_pad(...)
Arguments
... |
named attributes passed to |
Details
Properties
The following properties are provided by this component:
| Name | Attribute | Description | Values | Reflects to Attribute |
| actionsEndGroupLabel | actions-end-group-label | Specifies the accessible label for the last calcite-action-group. | string | FALSE |
| expandDisabled | expand-disabled | When true, the expand-toggling behavior is disabled. | boolean | TRUE |
| expanded | expanded | When true, the component is expanded. | boolean | TRUE |
| layout | layout | Indicates the layout of the component. | "grid" | "horizontal" | "vertical" | TRUE |
| messageOverrides | NA | Use this property to override individual strings used by the component. | Check API reference | FALSE |
| overlayPositioning | overlay-positioning | Determines the type of positioning to use for the overlaid content. Using "absolute" will work for most cases. The component will be positioned inside of overflowing parent containers and will affect the container's layout. "fixed" should be used to escape an overflowing parent container, or when the reference element's position CSS property is "fixed". | "absolute" | "fixed" | TRUE |
| position | position | Arranges the component depending on the element's dir property. | "end" | "start" | TRUE |
| scale | scale | Specifies the size of the expand calcite-action. | "l" | "m" | "s" | TRUE |
Events
The following events are observed by shiny:
| Event | Description |
| calciteActionPadToggle | Fires when the expanded property is toggled. |
Slots
The following slots are provided by this component:
| Slot | Description |
| Default (unnamed) | A slot for adding calcite-actions to the component. |
| expand-tooltip | A slot to set the calcite-tooltip for the expand toggle. |
Value
an object of class calcite_component which is a subclass of shiny.tag
References
Examples
calcite_action_pad()
Create a Alert component
Description
Create a Alert component
Usage
calcite_alert(...)
Arguments
... |
named attributes passed to |
Details
Alerts are meant to provide a way to communicate urgent or important information to users, frequently as a result of an action they took in your app. Alerts are positioned at the bottom of the page. Multiple opened alerts will be added to a queue, allowing users to dismiss them in the order they are provided.
Properties
The following properties are provided by this component:
| Name | Attribute | Description | Values | Reflects to Attribute |
| autoClose | auto-close | When true, the component closes automatically. Recommended for passive, non-blocking alerts. | boolean | TRUE |
| autoCloseDuration | auto-close-duration | Specifies the duration before the component automatically closes - only use with autoClose. | "fast" | "medium" | "slow" | TRUE |
| icon | icon | When true, shows a default recommended icon. Alternatively, pass a Calcite UI Icon name to display a specific icon. | boolean | string | TRUE |
| iconFlipRtl | icon-flip-rtl | When true, the icon will be flipped when the element direction is right-to-left ("rtl"). | boolean | TRUE |
| kind | kind | Specifies the kind of the component, which will apply to top border and icon. | "brand" | "danger" | "info" | "success" | "warning" | TRUE |
| label | label | Specifies an accessible name for the component. | string | FALSE |
| messageOverrides | NA | Use this property to override individual strings used by the component. | Check API reference | FALSE |
| numberingSystem | numbering-system | Specifies the Unicode numeral system used by the component for localization. | "arab" | "arabext" | "latn" | TRUE |
| open | open | When true, displays and positions the component. | boolean | TRUE |
| placement | placement | Specifies the placement of the component. | "bottom" | "bottom-end" | "bottom-start" | "top" | "top-end" | "top-start" | TRUE |
| queue | queue | Specifies the ordering priority of the component when opened. | "immediate" | "last" | "next" | TRUE |
| scale | scale | Specifies the size of the component. | "l" | "m" | "s" | TRUE |
Events
The following events are observed by shiny:
| Event | Description |
| calciteAlertBeforeClose | Fires when the component is requested to be closed and before the closing transition begins. |
| calciteAlertBeforeOpen | Fires when the component is added to the DOM but not rendered, and before the opening transition begins. |
| calciteAlertClose | Fires when the component is closed and animation is complete. |
| calciteAlertOpen | Fires when the component is open and animation is complete. |
Slots
The following slots are provided by this component:
| Slot | Description |
| title | A slot for adding a title to the component. |
| message | A slot for adding main text to the component. |
| link | A slot for adding a calcite-action to take from the component such as: "undo", "try again", "link to page", etc. |
| actions-end | A slot for adding calcite-actions to the end of the component. It is recommended to use two or fewer actions. |
Value
an object of class calcite_component which is a subclass of shiny.tag
References
Examples
calcite_alert()
Create a Avatar component
Description
Create a Avatar component
Usage
calcite_avatar(...)
Arguments
... |
named attributes passed to |
Details
Properties
The following properties are provided by this component:
| Name | Attribute | Description | Values | Reflects to Attribute |
| fullName | full-name | Specifies the full name of the user. When label and thumbnail are not defined, specifies the accessible name for the component. | string | TRUE |
| label | label | Specifies alternative text when thumbnail is defined, otherwise specifies an accessible label. | string | FALSE |
| scale | scale | Specifies the size of the component. | "l" | "m" | "s" | TRUE |
| thumbnail | thumbnail | Specifies the src to an image (remember to add a token if the user is private). | string | TRUE |
| userId | user-id | Specifies the unique id of the user. | string | TRUE |
| username | username | Specifies the username of the user. | string | TRUE |
Value
an object of class calcite_component which is a subclass of shiny.tag
References
Examples
calcite_avatar()
Create a Block component
Description
Create a Block component
Usage
calcite_block(...)
Arguments
... |
named attributes passed to |
Details
Properties
The following properties are provided by this component:
| Name | Attribute | Description | Values | Reflects to Attribute |
| collapsible | collapsible | When true, the component is collapsible. | boolean | TRUE |
| description | description | A description for the component, which displays below the heading. | string | FALSE |
| disabled | disabled | When true, interaction is prevented and the component is displayed with lower opacity. | boolean | TRUE |
| dragDisabled | drag-disabled | When true, and a parent Block Group is dragEnabled, the component is not draggable. | boolean | TRUE |
| dragHandle | drag-handle | When true, the component displays a draggable button. | boolean | TRUE |
| heading | heading | The component header text. | string | FALSE |
| headingLevel | heading-level | Specifies the heading level of the component's heading for proper document structure, without affecting visual styling. | 1 | 2 | 3 | 4 | 5 | 6 | TRUE |
| iconEnd | icon-end | Specifies an icon to display at the end of the component. | string | TRUE |
| iconFlipRtl | icon-flip-rtl | Displays the iconStart and/or iconEnd as flipped when the element direction is right-to-left ("rtl"). | "both" | "end" | "start" | TRUE |
| iconStart | icon-start | Specifies an icon to display at the start of the component. | string | TRUE |
| label | label | Specifies an accessible name for the component. | string | FALSE |
| loading | loading | When true, a busy indicator is displayed. | boolean | TRUE |
| menuFlipPlacements | NA | Specifies the component's fallback menu placement when it's initial or specified placement has insufficient space available. | Check API reference | FALSE |
| menuPlacement | menu-placement | Determines where the action menu will be positioned. | "auto" | "auto-end" | "auto-start" | "bottom" | "bottom-end" | "bottom-start" | "leading" | "leading-end" | "leading-start" | "left" | "left-end" | "left-start" | "right" | "right-end" | "right-start" | "top" | "top-end" | "top-start" | "trailing" | "trailing-end" | "trailing-start" | TRUE |
| messageOverrides | NA | Use this property to override individual strings used by the component. | Check API reference | FALSE |
| open | open | When true, expands the component and its contents. | boolean | TRUE |
| overlayPositioning | overlay-positioning | Determines the type of positioning to use for the overlaid content. Using "absolute" will work for most cases. The component will be positioned inside of overflowing parent containers and will affect the container's layout. "fixed" should be used to escape an overflowing parent container, or when the reference element's position CSS property is "fixed". | "absolute" | "fixed" | TRUE |
| sortHandleOpen | sort-handle-open | When true, displays and positions the sort handle. | boolean | TRUE |
| status | status | Displays a status-related indicator icon. | "idle" | "invalid" | "valid" | TRUE |
Events
The following events are observed by shiny:
| Event | Description |
| calciteBlockBeforeClose | Fires when the component is requested to be closed and before the closing transition begins. |
| calciteBlockBeforeOpen | Fires when the component is added to the DOM but not rendered, and before the opening transition begins. |
| calciteBlockClose | Fires when the component is closed and animation is complete. |
| calciteBlockOpen | Fires when the component is open and animation is complete. |
| calciteBlockSortHandleBeforeClose | Fires when the sort handle is requested to be closed and before the closing transition begins. |
| calciteBlockSortHandleBeforeOpen | Fires when the sort handle is added to the DOM but not rendered, and before the opening transition begins. |
| calciteBlockSortHandleClose | Fires when the sort handle is closed and animation is complete. |
| calciteBlockSortHandleOpen | Fires when the sort handle is open and animation is complete. |
| calciteBlockToggle | Fires when the component's header is clicked. |
Slots
The following slots are provided by this component:
| Slot | Description |
| Default (unnamed) | A slot for adding custom content. |
| actions-end | A slot for adding actionable calcite-action elements after the content of the component. It is recommended to use two or fewer actions. |
| icon | Deprecated A slot for adding a leading header icon with calcite-icon. Use icon-start instead. |
| content-start | A slot for adding non-actionable elements before content of the component. |
| control | Deprecated A slot for adding a single HTML input element in a header. Use actions-end instead. |
| header-menu-actions | A slot for adding an overflow menu with calcite-actions inside a dropdown menu. |
Value
an object of class calcite_component which is a subclass of shiny.tag
References
Examples
calcite_block()
Create a BlockSection component
Description
Create a BlockSection component
Usage
calcite_block_section(...)
Arguments
... |
named attributes passed to |
Details
Properties
The following properties are provided by this component:
| Name | Attribute | Description | Values | Reflects to Attribute |
| iconEnd | icon-end | Specifies an icon to display at the end of the component. | string | TRUE |
| iconFlipRtl | icon-flip-rtl | Displays the iconStart and/or iconEnd as flipped when the element direction is right-to-left ("rtl"). | "both" | "end" | "start" | TRUE |
| iconStart | icon-start | Specifies an icon to display at the start of the component. | string | TRUE |
| messageOverrides | NA | Use this property to override individual strings used by the component. | Check API reference | FALSE |
| open | open | When true, expands the component and its contents. | boolean | TRUE |
| status | status | Displays a status-related indicator icon. | "idle" | "invalid" | "valid" | TRUE |
| text | text | The component header text. | string | FALSE |
| toggleDisplay | toggle-display | Specifies how the component's toggle is displayed, where: "button" sets the toggle to a selectable header, and "switch" sets the toggle to a switch. | "button" | "switch" | TRUE |
Events
The following events are observed by shiny:
| Event | Description |
| calciteBlockSectionToggle | Fires when the header has been clicked. |
Slots
The following slots are provided by this component:
| Slot | Description |
| Default (unnamed) | A slot for adding custom content. |
Value
an object of class calcite_component which is a subclass of shiny.tag
References
Examples
calcite_block_section()
Create a Button component
Description
Create a Button component
Usage
calcite_button(...)
Arguments
... |
named attributes passed to |
Details
Passing a 'href' will render an anchor link, instead of a button. Role will be set to link, or button, depending on this. It is the consumers responsibility to add aria information, rel, target, for links, and any button attributes for form submission
Properties
The following properties are provided by this component:
| Name | Attribute | Description | Values | Reflects to Attribute |
| alignment | alignment | Specifies the alignment of the component's elements. | "center" | "end" | "icon-end-space-between" | "icon-start-space-between" | "space-between" | "start" | TRUE |
| appearance | appearance | Specifies the appearance style of the component. | "outline" | "outline-fill" | "solid" | "transparent" | TRUE |
| disabled | disabled | When true, interaction is prevented and the component is displayed with lower opacity. | boolean | TRUE |
| download | download | Prompts the user to save the linked URL instead of navigating to it. Can be used with or without a value: Without a value, the browser will suggest a filename/extension. | boolean | string | TRUE |
| form | form | The id of the form that will be associated with the component. When not set, the component will be associated with its ancestor form element, if any. | string | TRUE |
| href | href | Specifies the URL of the linked resource, which can be set as an absolute or relative path. | string | TRUE |
| iconEnd | icon-end | Specifies an icon to display at the end of the component. | string | TRUE |
| iconFlipRtl | icon-flip-rtl | Displays the iconStart and/or iconEnd as flipped when the element direction is right-to-left ("rtl"). | "both" | "end" | "start" | TRUE |
| iconStart | icon-start | Specifies an icon to display at the start of the component. | string | TRUE |
| kind | kind | Specifies the kind of the component, which will apply to the border and background if applicable. | "brand" | "danger" | "inverse" | "neutral" | TRUE |
| label | label | Accessible name for the component. | string | FALSE |
| loading | loading | When true, a busy indicator is displayed and interaction is disabled. | boolean | TRUE |
| messageOverrides | NA | Use this property to override individual strings used by the component. | Check API reference | FALSE |
| name | name | Specifies the name of the component on form submission. | string | TRUE |
| rel | rel | Defines the relationship between the href value and the current document. | string | TRUE |
| round | round | When true, adds a round style to the component. | boolean | TRUE |
| scale | scale | Specifies the size of the component. | "l" | "m" | "s" | TRUE |
| splitChild | split-child | Specifies if the component is a child of a calcite-split-button. | "primary" | "secondary" | boolean | TRUE |
| target | target | Specifies where to open the linked document defined in the href property. | string | TRUE |
| type | type | Specifies the default behavior of the component. | string | TRUE |
| width | width | Check API reference | "auto" | "full" | "half" | TRUE |
Slots
The following slots are provided by this component:
| Slot | Description |
| Default (unnamed) | A slot for adding text. |
Value
an object of class calcite_component which is a subclass of shiny.tag
References
Examples
calcite_button()
Create a Card component
Description
Create a Card component
Usage
calcite_card(...)
Arguments
... |
named attributes passed to |
Details
Properties
The following properties are provided by this component:
| Name | Attribute | Description | Values | Reflects to Attribute |
| disabled | disabled | When true, interaction is prevented and the component is displayed with lower opacity. | boolean | TRUE |
| label | label | Accessible name for the component. | string | FALSE |
| loading | loading | When true, a busy indicator is displayed. | boolean | TRUE |
| messageOverrides | NA | Use this property to override individual strings used by the component. | Check API reference | FALSE |
| selectable | selectable | When true, the component is selectable. | boolean | TRUE |
| selected | selected | When true, the component is selected. | boolean | TRUE |
| thumbnailPosition | thumbnail-position | Sets the placement of the thumbnail defined in the thumbnail slot. | "block-end" | "block-start" | "inline-end" | "inline-start" | TRUE |
Events
The following events are observed by shiny:
| Event | Description |
| calciteCardSelect | Fires when the deprecated selectable is true, or selectionMode set on parent calcite-card-group is not none and the component is selected. |
Slots
The following slots are provided by this component:
| Slot | Description |
| Default (unnamed) | A slot for adding content. |
| title | Deprecated use heading instead. A slot for adding a heading. |
| subtitle | Deprecated use description instead. A slot for adding a description. |
| thumbnail | A slot for adding a thumbnail. |
| heading | A slot for adding a heading. |
| description | A slot for adding a description. |
| footer-start | A slot for adding a leading footer. |
| footer-end | A slot for adding a trailing footer. |
Value
an object of class calcite_component which is a subclass of shiny.tag
References
Examples
calcite_card()
Create a CardGroup component
Description
Create a CardGroup component
Usage
calcite_card_group(...)
Arguments
... |
named attributes passed to |
Details
Properties
The following properties are provided by this component:
| Name | Attribute | Description | Values | Reflects to Attribute |
| disabled | disabled | When true, interaction is prevented and the component is displayed with lower opacity. | boolean | TRUE |
| label | label | Accessible name for the component. | string | FALSE |
| selectedItems | NA | Specifies the component's selected items. | Check API reference | FALSE |
| selectionMode | selection-mode | Specifies the selection mode of the component. | "multiple" | "none" | "single" | "single-persist" | TRUE |
Events
The following events are observed by shiny:
| Event | Description |
| calciteCardGroupSelect | Emits when the component's selection changes and the selectionMode is not none. |
Slots
The following slots are provided by this component:
| Slot | Description |
| Default (unnamed) | A slot for adding one or more calcite-cards. |
Value
an object of class calcite_component which is a subclass of shiny.tag
References
Examples
calcite_card_group()
Create a Carousel component
Description
Create a Carousel component
Usage
calcite_carousel(...)
Arguments
... |
named attributes passed to |
Details
Properties
The following properties are provided by this component:
| Name | Attribute | Description | Values | Reflects to Attribute |
| arrowType | arrow-type | Specifies how and if the "previous" and "next" arrows are displayed. | "edge" | "inline" | "none" | TRUE |
| autoplay | autoplay | When true, the carousel will autoplay and controls will be displayed. When "paused" at time of initialization, the carousel will not autoplay, but controls will be displayed. | "" | "paused" | boolean | TRUE |
| autoplayDuration | autoplay-duration | When autoplay is true, specifies in milliseconds the length of time to display each Carousel Item. | number | TRUE |
| controlOverlay | control-overlay | Specifies if the component's controls are positioned absolutely on top of slotted Carousel Items. | boolean | TRUE |
| disabled | disabled | When true, interaction is prevented and the component is displayed with lower opacity. | boolean | TRUE |
| label | label | Accessible name for the component. | string | FALSE |
| messageOverrides | NA | Use this property to override individual strings used by the component. | Check API reference | FALSE |
| selectedItem | NA | The component's selected calcite-carousel-item. | HTMLCalciteCarouselItemElement | FALSE |
Events
The following events are observed by shiny:
| Event | Description |
| calciteCarouselChange | Fires when the selected calcite-carousel-item changes. |
| calciteCarouselPause | Fires when the carousel autoplay state pauses due to a user hovering over the component or focusing on the component or slotted content |
| calciteCarouselPlay | Fires when the carousel autoplay is invoked by the user. |
| calciteCarouselResume | Fires when the carousel autoplay state resumes due to a user no longer hovering over the component or focusing on the component or slotted content |
| calciteCarouselStop | Fires when the carousel autoplay state is stopped by a user. |
Slots
The following slots are provided by this component:
| Slot | Description |
| Default (unnamed) | A slot for adding calcite-carousel-items. |
Value
an object of class calcite_component which is a subclass of shiny.tag
References
Examples
calcite_carousel()
Create a CarouselItem component
Description
Create a CarouselItem component
Usage
calcite_carousel_item(...)
Arguments
... |
named attributes passed to |
Details
Properties
The following properties are provided by this component:
| Name | Attribute | Description | Values | Reflects to Attribute |
| label | label | Accessible name for the component. | string | FALSE |
| selected | selected | When true, the component is selected. | boolean | TRUE |
Slots
The following slots are provided by this component:
| Slot | Description |
| Default (unnamed) | A slot for adding content. |
Value
an object of class calcite_component which is a subclass of shiny.tag
References
Examples
calcite_carousel_item()
Create a Checkbox component
Description
Create a Checkbox component
Usage
calcite_checkbox(...)
Arguments
... |
named attributes passed to |
Details
Properties
The following properties are provided by this component:
| Name | Attribute | Description | Values | Reflects to Attribute |
| checked | checked | When true, the component is checked. | boolean | TRUE |
| disabled | disabled | When true, interaction is prevented and the component is displayed with lower opacity. | boolean | TRUE |
| form | form | The id of the form that will be associated with the component. When not set, the component will be associated with its ancestor form element, if any. | string | TRUE |
| indeterminate | indeterminate | When true, the component is initially indeterminate, which is independent from its checked value. The state is visual only, and can look different across browsers. | boolean | TRUE |
| label | label | Accessible name for the component. | string | FALSE |
| name | name | Specifies the name of the component. Required to pass the component's value on form submission. | string | TRUE |
| required | required | When true and the component resides in a form, the component must have a value in order for the form to submit. | boolean | TRUE |
| scale | scale | Specifies the size of the component. | "l" | "m" | "s" | TRUE |
| status | status | Specifies the status of the input field, which determines message and icons. | "idle" | "invalid" | "valid" | TRUE |
| validity | NA | The current validation state of the component. | Check API reference | FALSE |
| value | value | The component's value. | any | FALSE |
Events
The following events are observed by shiny:
| Event | Description |
| calciteCheckboxChange | Fires when the component's checked status changes. |
Value
an object of class calcite_component which is a subclass of shiny.tag
References
Examples
calcite_checkbox()
Create a Chip component
Description
Create a Chip component
Usage
calcite_chip(...)
Arguments
... |
named attributes passed to |
Details
Properties
The following properties are provided by this component:
| Name | Attribute | Description | Values | Reflects to Attribute |
| appearance | appearance | Specifies the appearance style of the component. | "outline" | "outline-fill" | "solid" | TRUE |
| closable | closable | When true, a close button is added to the component. | boolean | TRUE |
| closed | closed | When true, hides the component. | boolean | TRUE |
| closeOnDelete | close-on-delete | When true, the component closes when the Delete or Backspace key is pressed while focused. | boolean | TRUE |
| disabled | disabled | When true, interaction is prevented and the component is displayed with lower opacity. | boolean | TRUE |
| icon | icon | Specifies an icon to display. | string | TRUE |
| iconFlipRtl | icon-flip-rtl | When true, the icon will be flipped when the element direction is right-to-left ("rtl"). | boolean | TRUE |
| kind | kind | Specifies the kind of the component, which will apply to border and background if applicable. | "brand" | "inverse" | "neutral" | TRUE |
| label | label | Accessible name for the component. | string | FALSE |
| messageOverrides | NA | Use this property to override individual strings used by the component. | Check API reference | FALSE |
| scale | scale | Specifies the size of the component. When contained in a parent calcite-chip-group inherits the parent's scale value. | "l" | "m" | "s" | TRUE |
| selected | selected | When true, the component is selected. | boolean | TRUE |
| value | value | The component's value. | any | FALSE |
Events
The following events are observed by shiny:
| Event | Description |
| calciteChipClose | Fires when the component's close button is selected. |
| calciteChipSelect | Fires when the selected state of the component changes. |
Slots
The following slots are provided by this component:
| Slot | Description |
| Default (unnamed) | A slot for adding text. |
| image | A slot for adding an image. |
Value
an object of class calcite_component which is a subclass of shiny.tag
References
Examples
calcite_chip()
Create a ChipGroup component
Description
Create a ChipGroup component
Usage
calcite_chip_group(...)
Arguments
... |
named attributes passed to |
Details
Properties
The following properties are provided by this component:
| Name | Attribute | Description | Values | Reflects to Attribute |
| disabled | disabled | When true, interaction is prevented and the component is displayed with lower opacity. | boolean | TRUE |
| label | label | Accessible name for the component. | string | FALSE |
| scale | scale | Specifies the size of the component. Child calcite-chips inherit the component's value. | "l" | "m" | "s" | TRUE |
| selectedItems | NA | Specifies the component's selected items. | Check API reference | FALSE |
| selectionMode | selection-mode | Specifies the selection mode of the component, where: "multiple" allows any number of selections, "single" allows only one selection, "single-persist" allows one selection and prevents de-selection, and "none" does not allow any selections. | "multiple" | "none" | "single" | "single-persist" | TRUE |
Events
The following events are observed by shiny:
| Event | Description |
| calciteChipGroupSelect | Fires when the component's selection changes. |
Slots
The following slots are provided by this component:
| Slot | Description |
| Default (unnamed) | A slot for adding one or more calcite-chips. |
Value
an object of class calcite_component which is a subclass of shiny.tag
References
Examples
calcite_chip_group()
Create a ColorPicker component
Description
Create a ColorPicker component
Usage
calcite_color_picker(...)
Arguments
... |
named attributes passed to |
Details
Properties
The following properties are provided by this component:
| Name | Attribute | Description | Values | Reflects to Attribute |
| allowEmpty | allow-empty | When true, an empty color (null) will be allowed as a value. When false, a color value is enforced, and clearing the input or blurring will restore the last valid value. | boolean | TRUE |
| alphaChannel | alpha-channel | When true, the component will allow updates to the color's alpha value. | boolean | FALSE |
| channelsDisabled | channels-disabled | When true, hides the RGB/HSV channel inputs. | boolean | FALSE |
| clearable | clearable | When true, an empty color (null) will be allowed as a value. When false, a color value is enforced, and clearing the input or blurring will restore the last valid value. | boolean | TRUE |
| disabled | disabled | When true, interaction is prevented and the component is displayed with lower opacity. | boolean | TRUE |
| format | format | The format of value. When "auto", the format will be inferred from value when set. | "auto" | "hex" | "hexa" | "hsl" | "hsl-css" | "hsla" | "hsla-css" | "hsv" | "hsva" | "rgb" | "rgb-css" | "rgba" | "rgba-css" | TRUE |
| hexDisabled | hex-disabled | When true, hides the hex input. | boolean | FALSE |
| messageOverrides | NA | Use this property to override individual strings used by the component. | Check API reference | FALSE |
| numberingSystem | numbering-system | Specifies the Unicode numeral system used by the component for localization. | "arab" | "arabext" | "latn" | TRUE |
| savedDisabled | saved-disabled | When true, hides the saved colors section. | boolean | TRUE |
| scale | scale | Specifies the size of the component. | "l" | "m" | "s" | TRUE |
| storageId | storage-id | Specifies the storage ID for colors. | string | TRUE |
| value | value | The component's value, where the value can be a CSS color string, or a RGB, HSL or HSV object. The type will be preserved as the color is updated. | (HSL & ObjectWithAlpha) | (HSV & ObjectWithAlpha) | (RGB & ObjectWithAlpha) | HSL | HSV | RGB | string | FALSE |
Events
The following events are observed by shiny:
| Event | Description |
| calciteColorPickerChange | Fires when the color value has changed. |
| calciteColorPickerInput | Fires as the color value changes. Similar to the calciteColorPickerChange event with the exception of dragging. When dragging the color field or hue slider thumb, this event fires as the thumb is moved. |
Value
an object of class calcite_component which is a subclass of shiny.tag
References
Examples
calcite_color_picker()
Create a Combobox component
Description
Create a Combobox component
Usage
calcite_combobox(...)
Arguments
... |
named attributes passed to |
Details
Properties
The following properties are provided by this component:
| Name | Attribute | Description | Values | Reflects to Attribute |
| allowCustomValues | allow-custom-values | When true, allows entry of custom values, which are not in the original set of items. | boolean | TRUE |
| clearDisabled | clear-disabled | When true, the value-clearing will be disabled. | boolean | TRUE |
| disabled | disabled | When true, interaction is prevented and the component is displayed with lower opacity. | boolean | TRUE |
| filteredItems | NA | Specifies the component's filtered items. | Check API reference | FALSE |
| filterProps | NA | Specifies the properties to match against when filtering. If not set, all properties will be matched (label, description, metadata, value). | Check API reference | FALSE |
| filterText | filter-text | Text for the component's filter input field. | string | TRUE |
| flipPlacements | NA | Specifies the component's fallback slotted content placement when it's initial placement has insufficient space available. | Check API reference | FALSE |
| form | form | The id of the form that will be associated with the component. When not set, the component will be associated with its ancestor form element, if any. | string | TRUE |
| label | label | Accessible name for the component. | string | FALSE |
| maxItems | max-items | Specifies the maximum number of calcite-combobox-items (including nested children) to display before displaying a scrollbar. | number | TRUE |
| messageOverrides | NA | Use this property to override individual strings used by the component. | Check API reference | FALSE |
| name | name | Specifies the name of the component. Required to pass the component's value on form submission. | string | TRUE |
| open | open | When true, displays and positions the component. | boolean | TRUE |
| overlayPositioning | overlay-positioning | Determines the type of positioning to use for the overlaid content. Using "absolute" will work for most cases. The component will be positioned inside of overflowing parent containers and will affect the container's layout. "fixed" should be used to escape an overflowing parent container, or when the reference element's position CSS property is "fixed". | "absolute" | "fixed" | TRUE |
| placeholder | placeholder | Specifies the placeholder text for the input. | string | FALSE |
| placeholderIcon | placeholder-icon | Specifies the placeholder icon for the input. | string | TRUE |
| placeholderIconFlipRtl | placeholder-icon-flip-rtl | When true, the icon will be flipped when the element direction is right-to-left ("rtl"). | boolean | TRUE |
| readOnly | read-only | When true, the component's value can be read, but controls are not accessible and the value cannot be modified. | boolean | TRUE |
| required | required | When true and the component resides in a form, the component must have a value in order for the form to submit. | boolean | TRUE |
| scale | scale | Specifies the size of the component. | "l" | "m" | "s" | TRUE |
| selectedItems | NA | Specifies the component's selected items. | Check API reference | FALSE |
| selectionDisplay | selection-display | When selectionMode is "ancestors" or "multiple", specifies the display of multiple calcite-combobox-item selections, where: "all" displays all selections with individual calcite-chips, "fit" displays individual calcite-chips that scale to the component's size, including a non-closable calcite-chip, which provides the number of additional calcite-combobox-item selections not visually displayed, and "single" displays one calcite-chip with the total number of selections. | "all" | "fit" | "single" | TRUE |
| selectionMode | selection-mode | Specifies the selection mode of the component, where: "multiple" allows any number of selections, "single" allows only one selection, "single-persist" allows one selection and prevents de-selection, and "ancestors" allows multiple selections, but shows ancestors of selected items as selected, with only deepest children shown in chips. | "ancestors" | "multiple" | "single" | "single-persist" | TRUE |
| status | status | Specifies the status of the input field, which determines message and icons. | "idle" | "invalid" | "valid" | TRUE |
| validationIcon | validation-icon | Specifies the validation icon to display under the component. | boolean | string | TRUE |
| validationMessage | validation-message | Specifies the validation message to display under the component. | string | FALSE |
| validity | NA | The current validation state of the component. | Check API reference | FALSE |
| value | value | The component's value(s) from the selected calcite-combobox-item(s). | Check API reference | FALSE |
Events
The following events are observed by shiny:
| Event | Description |
| calciteComboboxBeforeClose | Fires when the component is requested to be closed, and before the closing transition begins. |
| calciteComboboxBeforeOpen | Fires when the component is added to the DOM but not rendered, and before the opening transition begins. |
| calciteComboboxChange | Fires when the selected item(s) changes. |
| calciteComboboxChipClose | Fires when a selected item in the component is closed via its calcite-chip. |
| calciteComboboxClose | Fires when the component is closed and animation is complete. |
| calciteComboboxFilterChange | Fires when text is added to filter the options list. |
| calciteComboboxOpen | Fires when the component is open and animation is complete. |
Slots
The following slots are provided by this component:
| Slot | Description |
| Default (unnamed) | A slot for adding calcite-combobox-items. |
Value
an object of class calcite_component which is a subclass of shiny.tag
References
Examples
calcite_combobox()
Create a ComboboxItem component
Description
Create a ComboboxItem component
Usage
calcite_combobox_item(...)
Arguments
... |
named attributes passed to |
Details
Properties
The following properties are provided by this component:
| Name | Attribute | Description | Values | Reflects to Attribute |
| active | active | When true, the component is active. | boolean | TRUE |
| ancestors | NA | Specifies the parent and grandparent items, which are set on calcite-combobox. | Check API reference | FALSE |
| description | description | A description for the component, which displays below the heading. | string | FALSE |
| disabled | disabled | When true, interaction is prevented and the component is displayed with lower opacity. | boolean | TRUE |
| filterDisabled | filter-disabled | When true, omits the component from the calcite-combobox filtered search results. | boolean | TRUE |
| guid | guid | The id attribute of the component. When omitted, a globally unique identifier is used. | string | TRUE |
| heading | heading | The component's text. | string | FALSE |
| icon | icon | Specifies an icon to display. | string | TRUE |
| iconFlipRtl | icon-flip-rtl | When true, the icon will be flipped when the element direction is right-to-left ("rtl"). | boolean | TRUE |
| label | label | The component's label. | any | FALSE |
| metadata | NA | Provides additional metadata to the component used in filtering. | Check API reference | FALSE |
| selected | selected | When true, the component is selected. | boolean | TRUE |
| shortHeading | short-heading | The component's short heading. When provided, the short heading will be displayed in the component's selection. It is recommended to use 5 characters or fewer. | string | FALSE |
| textLabel | text-label | The component's text. | string | TRUE |
| value | value | The component's value. | any | FALSE |
Events
The following events are observed by shiny:
| Event | Description |
| calciteComboboxItemChange | Fires whenever the component is selected or unselected. |
Slots
The following slots are provided by this component:
| Slot | Description |
| Default (unnamed) | A slot for adding nested calcite-combobox-items. |
| content-end | A slot for adding non-actionable elements after the component's content. |
| content-start | A slot for adding non-actionable elements before the component's content. |
Value
an object of class calcite_component which is a subclass of shiny.tag
References
Examples
calcite_combobox_item()
Create a ComboboxItemGroup component
Description
Create a ComboboxItemGroup component
Usage
calcite_combobox_item_group(...)
Arguments
... |
named attributes passed to |
Details
Properties
The following properties are provided by this component:
| Name | Attribute | Description | Values | Reflects to Attribute |
| ancestors | NA | Specifies the parent and grandparent calcite-combobox-items, which are set on calcite-combobox. | Check API reference | FALSE |
| label | label | Specifies the title of the component. | string | FALSE |
Slots
The following slots are provided by this component:
| Slot | Description |
| Default (unnamed) | A slot for adding calcite-combobox-items. |
Value
an object of class calcite_component which is a subclass of shiny.tag
References
Examples
calcite_combobox_item_group()
Create a DatePicker component
Description
Create a DatePicker component
Usage
calcite_date_picker(...)
Arguments
... |
named attributes passed to |
Details
Properties
The following properties are provided by this component:
| Name | Attribute | Description | Values | Reflects to Attribute |
| activeDate | NA | Specifies the component's active date. | Date | FALSE |
| activeRange | active-range | When range is true, specifies the active range. Where "start" specifies the starting range date and "end" the ending range date. | "end" | "start" | TRUE |
| headingLevel | heading-level | Specifies the heading level of the component's heading for proper document structure, without affecting visual styling. | 1 | 2 | 3 | 4 | 5 | 6 | TRUE |
| layout | layout | Defines the layout of the component. | "horizontal" | "vertical" | TRUE |
| max | max | When the component resides in a form, specifies the latest allowed date ("yyyy-mm-dd"). | string | TRUE |
| maxAsDate | NA | Specifies the latest allowed date as a full date object (new Date("yyyy-mm-dd")). | Date | FALSE |
| messageOverrides | NA | Use this property to override individual strings used by the component. | Check API reference | FALSE |
| min | min | When the component resides in a form, specifies the earliest allowed date ("yyyy-mm-dd"). | string | TRUE |
| minAsDate | NA | Specifies the earliest allowed date as a full date object (new Date("yyyy-mm-dd")). | Date | FALSE |
| monthStyle | month-style | Specifies the monthStyle used by the component. | "abbreviated" | "wide" | FALSE |
| numberingSystem | numbering-system | Specifies the Unicode numeral system used by the component for localization. This property cannot be dynamically changed. | "arab" | "arabext" | "latn" | TRUE |
| proximitySelectionDisabled | proximity-selection-disabled | When true, disables the default behavior on the third click of narrowing or extending the range and instead starts a new range. | boolean | TRUE |
| range | range | When true, activates the component's range mode to allow a start and end date. | boolean | TRUE |
| scale | scale | Specifies the size of the component. | "l" | "m" | "s" | TRUE |
| value | value | Check API reference | Check API reference | FALSE |
| valueAsDate | NA | Check API reference | Check API reference | FALSE |
Events
The following events are observed by shiny:
| Event | Description |
| calciteDatePickerChange | Fires when a user changes the component's date. For range events, use calciteDatePickerRangeChange. |
| calciteDatePickerRangeChange | Fires when a user changes the component's date range. For components without range use calciteDatePickerChange. |
Value
an object of class calcite_component which is a subclass of shiny.tag
References
Examples
calcite_date_picker()
Create a Dialog component
Description
Create a Dialog component
Usage
calcite_dialog(...)
Arguments
... |
named attributes passed to |
Details
Properties
The following properties are provided by this component:
| Name | Attribute | Description | Values | Reflects to Attribute |
| beforeClose | NA | Passes a function to run before the component closes. | Check API reference | FALSE |
| closeDisabled | close-disabled | When true, disables the component's close button. | boolean | TRUE |
| description | description | A description for the component. | string | FALSE |
| dragEnabled | drag-enabled | When true, the component is draggable. | boolean | TRUE |
| escapeDisabled | escape-disabled | When true, disables the default close on escape behavior. By default, an open dialog can be dismissed by pressing the Esc key. | boolean | TRUE |
| heading | heading | The component header text. | string | FALSE |
| headingLevel | heading-level | Specifies the heading level of the component's heading for proper document structure, without affecting visual styling. | 1 | 2 | 3 | 4 | 5 | 6 | TRUE |
| kind | kind | Specifies the kind of the component, which will style the top border. | "brand" | "danger" | "info" | "success" | "warning" | TRUE |
| loading | loading | When true, a busy indicator is displayed. | boolean | TRUE |
| menuOpen | menu-open | When true, the action menu items in the header-menu-actions slot are open. | boolean | TRUE |
| messageOverrides | NA | Use this property to override individual strings used by the component. | Check API reference | FALSE |
| modal | modal | When true, displays a scrim blocking interaction underneath the component. | boolean | TRUE |
| open | open | When true, displays and positions the component. | boolean | TRUE |
| outsideCloseDisabled | outside-close-disabled | When true, disables the closing of the component when clicked outside. | boolean | TRUE |
| overlayPositioning | overlay-positioning | Determines the type of positioning to use for the overlaid content. Using "absolute" will work for most cases. The component will be positioned inside of overflowing parent containers and will affect the container's layout. "fixed" should be used to escape an overflowing parent container, or when the reference element's position CSS property is "fixed". | "absolute" | "fixed" | TRUE |
| placement | placement | Specifies the placement of the dialog. | "bottom" | "bottom-end" | "bottom-start" | "center" | "cover" | "top" | "top-end" | "top-start" | TRUE |
| resizable | resizable | When true, the component is resizable. | boolean | TRUE |
| scale | scale | Specifies the size of the component. | "l" | "m" | "s" | TRUE |
| width | width | Specifies the width of the component. | "l" | "m" | "s" | TRUE |
| widthScale | width-scale | Specifies the width of the component. | "l" | "m" | "s" | TRUE |
Events
The following events are observed by shiny:
| Event | Description |
| calciteDialogBeforeClose | Fires when the component is requested to be closed and before the closing transition begins. |
| calciteDialogBeforeOpen | Fires when the component is added to the DOM but not rendered, and before the opening transition begins. |
| calciteDialogClose | Fires when the component is closed and animation is complete. |
| calciteDialogOpen | Fires when the component is open and animation is complete. |
| calciteDialogScroll | Fires when the content is scrolled. |
Slots
The following slots are provided by this component:
| Slot | Description |
| Default (unnamed) | A slot for adding content. |
| content | Deprecated Use custom-content slot instead. |
| custom-content | A slot for displaying custom content. Will prevent the rendering of any default Dialog UI, except for box-shadow and corner-radius. |
| action-bar | A slot for adding a calcite-action-bar to the component. |
| alerts | A slot for adding calcite-alerts to the component. |
| content-bottom | A slot for adding content below the unnamed (default) slot and - if populated - the footer slot. |
| content-top | A slot for adding content above the unnamed (default) slot and - if populated - below the action-bar slot. |
| header-actions-start | A slot for adding actions or content to the starting side of the component's header. |
| header-actions-end | A slot for adding actions or content to the ending side of the component's header. |
| header-content | A slot for adding custom content to the component's header. |
| header-menu-actions | A slot for adding an overflow menu with actions inside a calcite-dropdown. |
| fab | A slot for adding a calcite-fab (floating action button) to perform an action. |
| footer | A slot for adding custom content to the component's footer. Should not be used with the "footer-start" or "footer-end" slots. |
| footer-end | A slot for adding a trailing footer custom content. Should not be used with the "footer" slot. |
| footer-start | A slot for adding a leading footer custom content. Should not be used with the "footer" slot. |
Value
an object of class calcite_component which is a subclass of shiny.tag
References
Examples
calcite_dialog()
Create a Dropdown component
Description
Create a Dropdown component
Usage
calcite_dropdown(...)
Arguments
... |
named attributes passed to |
Details
Properties
The following properties are provided by this component:
| Name | Attribute | Description | Values | Reflects to Attribute |
| closeOnSelectDisabled | close-on-select-disabled | When true, the component will remain open after a selection is made. If the selectionMode of the selected calcite-dropdown-item's containing calcite-dropdown-group is "none", the component will always close. | boolean | TRUE |
| disabled | disabled | When true, interaction is prevented and the component is displayed with lower opacity. | boolean | TRUE |
| flipPlacements | NA | Specifies the component's fallback calcite-dropdown-item placement when it's initial or specified placement has insufficient space available. | Check API reference | FALSE |
| maxItems | max-items | Specifies the maximum number of calcite-dropdown-items to display before showing a scroller. Value must be greater than 0, and does not include groupTitle's from calcite-dropdown-group. | number | TRUE |
| open | open | When true, displays and positions the component. | boolean | TRUE |
| overlayPositioning | overlay-positioning | Determines the type of positioning to use for the overlaid content. Using "absolute" will work for most cases. The component will be positioned inside of overflowing parent containers and will affect the container's layout. "fixed" should be used to escape an overflowing parent container, or when the reference element's position CSS property is "fixed". | "absolute" | "fixed" | TRUE |
| placement | placement | Determines where the component will be positioned relative to the container element. | "bottom" | "bottom-end" | "bottom-start" | "top" | "top-end" | "top-start" | TRUE |
| scale | scale | Specifies the size of the component. | "l" | "m" | "s" | TRUE |
| selectedItems | NA | Specifies the component's selected items. | Check API reference | FALSE |
| type | type | Specifies the action to open the component from the container element. | "click" | "hover" | TRUE |
| width | width | Specifies the width of the component. | "l" | "m" | "s" | TRUE |
| widthScale | width-scale | Specifies the width of the component. | "l" | "m" | "s" | TRUE |
Events
The following events are observed by shiny:
| Event | Description |
| calciteDropdownBeforeClose | Fires when the component is requested to be closed and before the closing transition begins. |
| calciteDropdownBeforeOpen | Fires when the component is added to the DOM but not rendered, and before the opening transition begins. |
| calciteDropdownClose | Fires when the component is closed and animation is complete. |
| calciteDropdownOpen | Fires when the component is open and animation is complete. |
| calciteDropdownSelect | Fires when a calcite-dropdown-item's selection changes. |
Slots
The following slots are provided by this component:
| Slot | Description |
| Default (unnamed) | A slot for adding calcite-dropdown-group elements. Every calcite-dropdown-item must have a parent calcite-dropdown-group, even if the groupTitle property is not set. |
| trigger | A slot for the element that triggers the calcite-dropdown. |
Value
an object of class calcite_component which is a subclass of shiny.tag
References
Examples
calcite_dropdown()
Create a DropdownGroup component
Description
Create a DropdownGroup component
Usage
calcite_dropdown_group(...)
Arguments
... |
named attributes passed to |
Details
Properties
The following properties are provided by this component:
| Name | Attribute | Description | Values | Reflects to Attribute |
| groupTitle | group-title | Specifies and displays a group title. | string | TRUE |
| selectionMode | selection-mode | Specifies the selection mode of the component, where: "multiple" allows any number of selections, "single" allows only one selection, and "none" does not allow any selections. | "multiple" | "none" | "single" | TRUE |
Slots
The following slots are provided by this component:
| Slot | Description |
| Default (unnamed) | A slot for adding calcite-dropdown-items. |
Value
an object of class calcite_component which is a subclass of shiny.tag
References
Examples
calcite_dropdown_group()
Create a DropdownItem component
Description
Create a DropdownItem component
Usage
calcite_dropdown_item(...)
Arguments
... |
named attributes passed to |
Details
Properties
The following properties are provided by this component:
| Name | Attribute | Description | Values | Reflects to Attribute |
| disabled | disabled | When true, interaction is prevented and the component is displayed with lower opacity. | boolean | TRUE |
| href | href | Specifies the URL of the linked resource, which can be set as an absolute or relative path. Determines if the component will render as an anchor. | string | TRUE |
| iconEnd | icon-end | Specifies an icon to display at the end of the component. | string | TRUE |
| iconFlipRtl | icon-flip-rtl | Displays the iconStart and/or iconEnd as flipped when the element direction is right-to-left ("rtl"). | "both" | "end" | "start" | TRUE |
| iconStart | icon-start | Specifies an icon to display at the start of the component. | string | TRUE |
| label | label | Accessible name for the component. | string | FALSE |
| rel | rel | Specifies the relationship to the linked document defined in href. | string | TRUE |
| selected | selected | When true, the component is selected. | boolean | TRUE |
| target | target | Specifies the frame or window to open the linked document. | string | TRUE |
Events
The following events are observed by shiny:
| Event | Description |
| calciteDropdownItemSelect | Fires when the component is selected. |
Slots
The following slots are provided by this component:
| Slot | Description |
| Default (unnamed) | A slot for adding text. |
Value
an object of class calcite_component which is a subclass of shiny.tag
References
Examples
calcite_dropdown_item()
Create a Fab component
Description
Create a Fab component
Usage
calcite_fab(...)
Arguments
... |
named attributes passed to |
Details
Properties
The following properties are provided by this component:
| Name | Attribute | Description | Values | Reflects to Attribute |
| appearance | appearance | Specifies the appearance style of the component. | "outline-fill" | "solid" | TRUE |
| disabled | disabled | When true, interaction is prevented and the component is displayed with lower opacity. | boolean | TRUE |
| icon | icon | Specifies an icon to display. | string | TRUE |
| iconFlipRtl | icon-flip-rtl | When true, the icon will be flipped when the element direction is right-to-left ("rtl"). | boolean | TRUE |
| kind | kind | Specifies the kind of the component, which will apply to border and background. | "brand" | "danger" | "inverse" | "neutral" | TRUE |
| label | label | Accessible name for the component. | string | FALSE |
| loading | loading | When true, a busy indicator is displayed. | boolean | TRUE |
| scale | scale | Specifies the size of the component. | "l" | "m" | "s" | TRUE |
| text | text | Specifies text to accompany the component's icon. | string | FALSE |
| textEnabled | text-enabled | When true, displays the text value in the component. | boolean | TRUE |
Value
an object of class calcite_component which is a subclass of shiny.tag
References
Examples
calcite_fab()
Create a Filter component
Description
Create a Filter component
Usage
calcite_filter(...)
Arguments
... |
named attributes passed to |
Details
Properties
The following properties are provided by this component:
| Name | Attribute | Description | Values | Reflects to Attribute |
| disabled | disabled | When true, interaction is prevented and the component is displayed with lower opacity. | boolean | TRUE |
| filteredItems | NA | The component's resulting items after filtering. | Check API reference | FALSE |
| filterProps | NA | Specifies the properties to match against when filtering. This will only apply when value is an object. If not set, all properties will be matched. | Check API reference | FALSE |
| items | NA | Defines the items to filter. The component uses the values as the starting point, and returns items that contain the string entered in the input, using a partial match and recursive search. This property is needed to conduct filtering. | Check API reference | FALSE |
| label | label | Specifies an accessible name for the component. | string | FALSE |
| messageOverrides | NA | Use this property to override individual strings used by the component. | Check API reference | FALSE |
| placeholder | placeholder | Specifies placeholder text for the input element. | string | FALSE |
| scale | scale | Specifies the size of the component. | "l" | "m" | "s" | TRUE |
| value | value | The component's value. | string | FALSE |
Events
The following events are observed by shiny:
| Event | Description |
| calciteFilterChange | Fires when the filter text changes. |
Value
an object of class calcite_component which is a subclass of shiny.tag
References
Examples
calcite_filter()
Create a Flow component
Description
Create a Flow component
Usage
calcite_flow(...)
Arguments
... |
named attributes passed to |
Details
Slots
The following slots are provided by this component:
| Slot | Description |
| Default (unnamed) | A slot for adding calcite-flow-item elements to the component. |
Value
an object of class calcite_component which is a subclass of shiny.tag
References
Examples
calcite_flow()
Create a FlowItem component
Description
Create a FlowItem component
Usage
calcite_flow_item(...)
Arguments
... |
named attributes passed to |
Details
Properties
The following properties are provided by this component:
| Name | Attribute | Description | Values | Reflects to Attribute |
| beforeBack | NA | When provided, the method will be called before it is removed from its parent calcite-flow. | Check API reference | FALSE |
| beforeClose | NA | Passes a function to run before the component closes. | Check API reference | FALSE |
| closable | closable | When true, displays a close button in the trailing side of the component's header. | boolean | TRUE |
| closed | closed | When true, the component will be hidden. | boolean | TRUE |
| collapsed | collapsed | When true, hides the component's content area. | boolean | TRUE |
| collapsible | collapsible | When true, the component is collapsible. | boolean | TRUE |
| description | description | A description for the component. | string | FALSE |
| disabled | disabled | When true, interaction is prevented and the component is displayed with lower opacity. | boolean | TRUE |
| heading | heading | The component header text. | string | FALSE |
| headingLevel | heading-level | Specifies the heading level of the component's heading for proper document structure, without affecting visual styling. | 1 | 2 | 3 | 4 | 5 | 6 | TRUE |
| loading | loading | When true, a busy indicator is displayed. | boolean | TRUE |
| menuOpen | menu-open | When true, the action menu items in the header-menu-actions slot are open. | boolean | TRUE |
| messageOverrides | NA | Use this property to override individual strings used by the component. | Check API reference | FALSE |
| overlayPositioning | overlay-positioning | Determines the type of positioning to use for the overlaid content. Using "absolute" will work for most cases. The component will be positioned inside of overflowing parent containers and will affect the container's layout. "fixed" should be used to escape an overflowing parent container, or when the reference element's position CSS property is "fixed". | "absolute" | "fixed" | TRUE |
| scale | scale | Specifies the size of the component. | "l" | "m" | "s" | TRUE |
| selected | selected | When true, flow-item is displayed within a parent flow. | boolean | TRUE |
| showBackButton | show-back-button | When true, displays a back button in the component's header. | boolean | FALSE |
Events
The following events are observed by shiny:
| Event | Description |
| calciteFlowItemBack | Fires when the back button is clicked. |
| calciteFlowItemClose | Fires when the close button is clicked. |
| calciteFlowItemScroll | Fires when the content is scrolled. |
| calciteFlowItemToggle | Fires when the collapse button is clicked. |
Slots
The following slots are provided by this component:
| Slot | Description |
| Default (unnamed) | A slot for adding custom content. |
| action-bar | A slot for adding a calcite-action-bar to the component. |
| alerts | A slot for adding calcite-alerts to the component. |
| content-top | A slot for adding content above the unnamed (default) slot and below the action-bar slot (if populated). |
| content-bottom | A slot for adding content below the unnamed (default) slot and above the footer slot (if populated) |
| header-actions-start | A slot for adding calcite-actions or content to the start side of the component's header. |
| header-actions-end | A slot for adding calcite-actions or content to the end side of the component's header. |
| header-content | A slot for adding custom content to the component's header. |
| header-menu-actions | A slot for adding an overflow menu with calcite-actions inside a calcite-dropdown. |
| fab | A slot for adding a calcite-fab (floating action button) to perform an action. |
| footer | A slot for adding custom content to the component's footer. Should not be used with the "footer-start" or "footer-end" slots. |
| footer-actions | Deprecated Use the "footer" slot instead. A slot for adding calcite-buttons to the component's footer. |
| footer-end | A slot for adding a trailing footer custom content. Should not be used with the "footer" slot. |
| footer-start | A slot for adding a leading footer custom content. Should not be used with the "footer" slot. |
Value
an object of class calcite_component which is a subclass of shiny.tag
References
Examples
calcite_flow_item()
Create a Icon component
Description
Create a Icon component
Usage
calcite_icon(...)
Arguments
... |
named attributes passed to |
Details
Properties
The following properties are provided by this component:
| Name | Attribute | Description | Values | Reflects to Attribute |
| flipRtl | flip-rtl | When true, the icon will be flipped when the element direction is right-to-left ("rtl"). | boolean | TRUE |
| icon | icon | Displays a specific icon. | string | TRUE |
| preload | preload | When true, it loads preloads the icon data. | boolean | TRUE |
| scale | scale | Specifies the size of the component. | "l" | "m" | "s" | TRUE |
| textLabel | text-label | Accessible name for the component. It is recommended to set this value if your icon is semantic. | string | FALSE |
Value
an object of class calcite_component which is a subclass of shiny.tag
References
Examples
calcite_icon()
Create a InlineEditable component
Description
Create a InlineEditable component
Usage
calcite_inline_editable(...)
Arguments
... |
named attributes passed to |
Details
Properties
The following properties are provided by this component:
| Name | Attribute | Description | Values | Reflects to Attribute |
| afterConfirm | NA | Specifies a callback to be executed prior to disabling editing via the controls. When provided, the component's loading state will be handled automatically. | Check API reference | FALSE |
| controls | controls | When true and editingEnabled is true, displays save and cancel controls on the component. | boolean | TRUE |
| disabled | disabled | When true, interaction is prevented and the component is displayed with lower opacity. | boolean | TRUE |
| editingEnabled | editing-enabled | When true, inline editing is enabled on the component. | boolean | TRUE |
| loading | loading | When true, a busy indicator is displayed. | boolean | TRUE |
| messageOverrides | NA | Use this property to override individual strings used by the component. | Check API reference | FALSE |
| scale | scale | Specifies the size of the component. Defaults to the scale of the wrapped calcite-input or the scale of the closest wrapping component with a set scale. | "l" | "m" | "s" | TRUE |
Events
The following events are observed by shiny:
| Event | Description |
| calciteInlineEditableEditCancel | Emits when the component's "cancel editing" button is pressed. |
| calciteInlineEditableEditConfirm | Emits when the component's "confirm edits" button is pressed. |
Slots
The following slots are provided by this component:
| Slot | Description |
| Default (unnamed) | A slot for adding a calcite-input. |
Value
an object of class calcite_component which is a subclass of shiny.tag
References
Examples
calcite_inline_editable()
Create a Input component
Description
Create a Input component
Usage
calcite_input(...)
Arguments
... |
named attributes passed to |
Details
Properties
The following properties are provided by this component:
| Name | Attribute | Description | Values | Reflects to Attribute |
| accept | accept | Specifies a comma separated list of unique file type specifiers for limiting accepted file types. This property only has an effect when type is "file". Read the native attribute's documentation on MDN for more info. | string | FALSE |
| alignment | alignment | Specifies the text alignment of the component's value. | "end" | "start" | TRUE |
| autocomplete | NA | Specifies the type of content to autocomplete, for use in forms. Read the native attribute's documentation on MDN for more info. | AutoFill | FALSE |
| clearable | clearable | When true, a clear button is displayed when the component has a value. The clear button shows by default for "search", "time", and "date" types, and will not display for the "textarea" type. | boolean | TRUE |
| disabled | disabled | When true, interaction is prevented and the component is displayed with lower opacity. | boolean | TRUE |
| files | NA | When type is "file", specifies the component's selected files. | FileList | FALSE |
| form | form | The id of the form that will be associated with the component. When not set, the component will be associated with its ancestor form element, if any. | string | TRUE |
| groupSeparator | group-separator | When true, number values are displayed with a group separator corresponding to the language and country format. | boolean | TRUE |
| icon | icon | When true, shows a default recommended icon. Alternatively, pass a Calcite UI Icon name to display a specific icon. | boolean | string | TRUE |
| iconFlipRtl | icon-flip-rtl | When true, the icon will be flipped when the element direction is right-to-left ("rtl"). | boolean | TRUE |
| label | label | Accessible name for the component. | string | FALSE |
| loading | loading | When true, a busy indicator is displayed. | boolean | TRUE |
| max | max | When the component resides in a form, specifies the maximum value for type="number". | number | TRUE |
| maxLength | max-length | When the component resides in a form, specifies the maximum length of text for the component's value. | number | TRUE |
| messageOverrides | NA | Use this property to override individual strings used by the component. | Check API reference | FALSE |
| min | min | When the component resides in a form, specifies the minimum value for type="number". | number | TRUE |
| minLength | min-length | When the component resides in a form, specifies the minimum length of text for the component's value. | number | TRUE |
| multiple | multiple | When true, the component can accept more than one value. This property only has an effect when type is "email" or "file". Read the native attribute's documentation on MDN for more info. | boolean | FALSE |
| name | name | Specifies the name of the component. Required to pass the component's value on form submission. | string | TRUE |
| numberButtonType | number-button-type | Specifies the placement of the buttons for type="number". | "horizontal" | "none" | "vertical" | TRUE |
| numberingSystem | numbering-system | Specifies the Unicode numeral system used by the component for localization. | "arab" | "arabext" | "latn" | TRUE |
| pattern | pattern | When the component resides in a form, specifies a regular expression (regex) pattern the component's value must match for validation. Read the native attribute's documentation on MDN for more info. | string | FALSE |
| placeholder | placeholder | Specifies placeholder text for the component. | string | FALSE |
| prefixText | prefix-text | Adds text to the start of the component. | string | FALSE |
| readOnly | read-only | When true, the component's value can be read, but cannot be modified. | boolean | TRUE |
| required | required | When true and the component resides in a form, the component must have a value in order for the form to submit. | boolean | TRUE |
| scale | scale | Specifies the size of the component. | "l" | "m" | "s" | TRUE |
| status | status | Specifies the status of the input field, which determines message and icons. | "idle" | "invalid" | "valid" | TRUE |
| step | step | Specifies the granularity the component's value must adhere to. | "any" | number | TRUE |
| suffixText | suffix-text | Adds text to the end of the component. | string | FALSE |
| type | type | Check API reference | "color" | "date" | "datetime-local" | "email" | "file" | "image" | "month" | "number" | "password" | "search" | "tel" | "text" | "textarea" | "time" | "url" | "week" | TRUE |
| validationIcon | validation-icon | Specifies the validation icon to display under the component. | boolean | string | TRUE |
| validationMessage | validation-message | Specifies the validation message to display under the component. | string | FALSE |
| validity | NA | The current validation state of the component. | Check API reference | FALSE |
| value | value | The component's value. | string | FALSE |
Events
The following events are observed by shiny:
| Event | Description |
| calciteInputChange | Fires each time a new value is typed and committed. |
| calciteInputInput | Fires each time a new value is typed. |
Slots
The following slots are provided by this component:
| Slot | Description |
| action | A slot for positioning a calcite-button next to the component. |
Value
an object of class calcite_component which is a subclass of shiny.tag
References
Examples
calcite_input()
Create a InputDatePicker component
Description
Create a InputDatePicker component
Usage
calcite_input_date_picker(...)
Arguments
... |
named attributes passed to |
Details
Properties
The following properties are provided by this component:
| Name | Attribute | Description | Values | Reflects to Attribute |
| disabled | disabled | When true, interaction is prevented and the component is displayed with lower opacity. | boolean | TRUE |
| flipPlacements | NA | Specifies the component's fallback calcite-date-picker placement when it's initial or specified placement has insufficient space available. | Check API reference | FALSE |
| focusTrapDisabled | focus-trap-disabled | When true, prevents focus trapping. | boolean | TRUE |
| form | form | The id of the form that will be associated with the component. When not set, the component will be associated with its ancestor form element, if any. | string | TRUE |
| headingLevel | heading-level | Specifies the heading level of the component's heading for proper document structure, without affecting visual styling. | 1 | 2 | 3 | 4 | 5 | 6 | TRUE |
| layout | layout | Defines the layout of the component. | "horizontal" | "vertical" | TRUE |
| max | max | When the component resides in a form, specifies the latest allowed date ("yyyy-mm-dd"). | string | TRUE |
| maxAsDate | NA | Specifies the latest allowed date as a full date object. | Date | FALSE |
| messageOverrides | NA | Use this property to override individual strings used by the component. | Check API reference | FALSE |
| min | min | When the component resides in a form, specifies the earliest allowed date ("yyyy-mm-dd"). | string | TRUE |
| minAsDate | NA | Specifies the earliest allowed date as a full date object. | Date | FALSE |
| monthStyle | month-style | Specifies the monthStyle used by the component. | "abbreviated" | "wide" | FALSE |
| name | name | Specifies the name of the component. Required to pass the component's value on form submission. | string | TRUE |
| numberingSystem | numbering-system | Specifies the Unicode numeral system used by the component for localization. This property cannot be dynamically changed. | "arab" | "arabext" | "latn" | TRUE |
| open | open | When true, displays the calcite-date-picker component. | boolean | TRUE |
| overlayPositioning | overlay-positioning | Determines the type of positioning to use for the overlaid content. Using "absolute" will work for most cases. The component will be positioned inside of overflowing parent containers and will affect the container's layout. "fixed" should be used to escape an overflowing parent container, or when the reference element's position CSS property is "fixed". | "absolute" | "fixed" | TRUE |
| placement | placement | Specifies the placement of the calcite-date-picker relative to the component. | "bottom" | "bottom-end" | "bottom-start" | "top" | "top-end" | "top-start" | TRUE |
| proximitySelectionDisabled | proximity-selection-disabled | When true, disables the default behavior on the third click of narrowing or extending the range. Instead starts a new range. | boolean | FALSE |
| range | range | When true, activates a range for the component. | boolean | TRUE |
| readOnly | read-only | When true, the component's value can be read, but controls are not accessible and the value cannot be modified. | boolean | TRUE |
| required | required | When true and the component resides in a form, the component must have a value in order for the form to submit. | boolean | TRUE |
| scale | scale | Specifies the size of the component. | "l" | "m" | "s" | TRUE |
| status | status | Specifies the status of the input field, which determines message and icons. | "idle" | "invalid" | "valid" | TRUE |
| validationIcon | validation-icon | Specifies the validation icon to display under the component. | boolean | string | TRUE |
| validationMessage | validation-message | Specifies the validation message to display under the component. | string | FALSE |
| validity | NA | The current validation state of the component. | Check API reference | FALSE |
| value | value | Selected date as a string in ISO format ("yyyy-mm-dd"). | Check API reference | FALSE |
| valueAsDate | NA | The component's value as a full date object. | Check API reference | FALSE |
Events
The following events are observed by shiny:
| Event | Description |
| calciteInputDatePickerBeforeClose | Fires when the component is requested to be closed and before the closing transition begins. |
| calciteInputDatePickerBeforeOpen | Fires when the component is added to the DOM but not rendered, and before the opening transition begins. |
| calciteInputDatePickerChange | Fires when the component's value changes. |
| calciteInputDatePickerClose | Fires when the component is closed and animation is complete. |
| calciteInputDatePickerOpen | Fires when the component is open and animation is complete. |
Value
an object of class calcite_component which is a subclass of shiny.tag
References
Examples
calcite_input_date_picker()
Create a InputMessage component
Description
Create a InputMessage component
Usage
calcite_input_message(...)
Arguments
... |
named attributes passed to |
Details
Properties
The following properties are provided by this component:
| Name | Attribute | Description | Values | Reflects to Attribute |
| icon | icon | Specifies an icon to display. | boolean | string | TRUE |
| iconFlipRtl | icon-flip-rtl | When true, the icon will be flipped when the element direction is right-to-left ("rtl"). | boolean | TRUE |
| scale | scale | Specifies the size of the component. | "l" | "m" | "s" | TRUE |
| status | status | Specifies the status of the input field, which determines message and icons. | "idle" | "invalid" | "valid" | TRUE |
Slots
The following slots are provided by this component:
| Slot | Description |
| Default (unnamed) | A slot for adding text. |
Value
an object of class calcite_component which is a subclass of shiny.tag
References
Examples
calcite_input_message()
Create a InputNumber component
Description
Create a InputNumber component
Usage
calcite_input_number(...)
Arguments
... |
named attributes passed to |
Details
Properties
The following properties are provided by this component:
| Name | Attribute | Description | Values | Reflects to Attribute |
| alignment | alignment | Specifies the text alignment of the component's value. | "end" | "start" | TRUE |
| autocomplete | NA | Specifies the type of content to autocomplete, for use in forms. Read the native attribute's documentation on MDN for more info. | AutoFill | FALSE |
| clearable | clearable | When true, a clear button is displayed when the component has a value. | boolean | TRUE |
| disabled | disabled | When true, interaction is prevented and the component is displayed with lower opacity. | boolean | TRUE |
| form | form | The id of the form that will be associated with the component. When not set, the component will be associated with its ancestor form element, if any. | string | TRUE |
| groupSeparator | group-separator | When true, number values are displayed with a group separator corresponding to the language and country format. | boolean | TRUE |
| icon | icon | Specifies an icon to display. | boolean | string | TRUE |
| iconFlipRtl | icon-flip-rtl | When true, the icon will be flipped when the element direction is right-to-left ("rtl"). | boolean | TRUE |
| integer | integer | When true, restricts the component to integer numbers only and disables exponential notation. | boolean | FALSE |
| label | label | Accessible name for the component's button or hyperlink. | string | FALSE |
| loading | loading | When true, the component is in the loading state and calcite-progress is displayed. | boolean | TRUE |
| max | max | When the component resides in a form, specifies the maximum value. | number | TRUE |
| maxLength | max-length | When the component resides in a form, specifies the maximum length of text for the component's value. | number | TRUE |
| messageOverrides | NA | Use this property to override individual strings used by the component. | Check API reference | FALSE |
| min | min | When the component resides in a form, specifies the minimum value. | number | TRUE |
| minLength | min-length | When the component resides in a form, specifies the minimum length of text for the component's value. | number | TRUE |
| name | name | Specifies the name of the component. Required to pass the component's value on form submission. | string | TRUE |
| numberButtonType | number-button-type | Specifies the placement of the buttons. | "horizontal" | "none" | "vertical" | TRUE |
| numberingSystem | numbering-system | Specifies the Unicode numeral system used by the component for localization. | "arab" | "arabext" | "latn" | TRUE |
| placeholder | placeholder | Specifies placeholder text for the component. | string | FALSE |
| prefixText | prefix-text | Adds text to the start of the component. | string | FALSE |
| readOnly | read-only | When true, the component's value can be read, but cannot be modified. | boolean | TRUE |
| required | required | When true and the component resides in a form, the component must have a value in order for the form to submit. | boolean | TRUE |
| scale | scale | Specifies the size of the component. | "l" | "m" | "s" | TRUE |
| status | status | Specifies the status of the input field, which determines message and icons. | "idle" | "invalid" | "valid" | TRUE |
| step | step | Specifies the granularity that the component's value must adhere to. | "any" | number | TRUE |
| suffixText | suffix-text | Adds text to the end of the component. | string | FALSE |
| validationIcon | validation-icon | Specifies the validation icon to display under the component. | boolean | string | TRUE |
| validationMessage | validation-message | Specifies the validation message to display under the component. | string | FALSE |
| validity | NA | The current validation state of the component. | Check API reference | FALSE |
| value | value | The component's value. | string | FALSE |
Events
The following events are observed by shiny:
| Event | Description |
| calciteInputNumberChange | Fires each time a new value is typed and committed. |
| calciteInputNumberInput | Fires each time a new value is typed. |
Slots
The following slots are provided by this component:
| Slot | Description |
| action | A slot for positioning a button next to the component. |
Value
an object of class calcite_component which is a subclass of shiny.tag
References
Examples
calcite_input_number()
Create a InputText component
Description
Create a InputText component
Usage
calcite_input_text(...)
Arguments
... |
named attributes passed to |
Details
Properties
The following properties are provided by this component:
| Name | Attribute | Description | Values | Reflects to Attribute |
| alignment | alignment | Specifies the text alignment of the component's value. | "end" | "start" | TRUE |
| autocomplete | NA | Specifies the type of content to autocomplete, for use in forms. Read the native attribute's documentation on MDN for more info. | AutoFill | FALSE |
| clearable | clearable | When true, a clear button is displayed when the component has a value. | boolean | TRUE |
| disabled | disabled | When true, interaction is prevented and the component is displayed with lower opacity. | boolean | TRUE |
| form | form | The id of the form that will be associated with the component. When not set, the component will be associated with its ancestor form element, if any. | string | TRUE |
| icon | icon | Specifies an icon to display. | boolean | string | TRUE |
| iconFlipRtl | icon-flip-rtl | When true, the icon will be flipped when the element direction is right-to-left ("rtl"). | boolean | TRUE |
| label | label | Accessible name for the component's button or hyperlink. | string | FALSE |
| loading | loading | When true, the component is in the loading state and calcite-progress is displayed. | boolean | TRUE |
| maxLength | max-length | When the component resides in a form, specifies the maximum length of text for the component's value. | number | TRUE |
| messageOverrides | NA | Use this property to override individual strings used by the component. | Check API reference | FALSE |
| minLength | min-length | When the component resides in a form, specifies the minimum length of text for the component's value. | number | TRUE |
| name | name | Specifies the name of the component. Required to pass the component's value on form submission. | string | TRUE |
| pattern | pattern | When the component resides in a form, specifies a regular expression (regex) pattern the component's value must match for validation. Read the native attribute's documentation on MDN for more info. | string | FALSE |
| placeholder | placeholder | Specifies placeholder text for the component. | string | FALSE |
| prefixText | prefix-text | Adds text to the start of the component. | string | FALSE |
| readOnly | read-only | When true, the component's value can be read, but cannot be modified. | boolean | TRUE |
| required | required | When true and the component resides in a form, the component must have a value in order for the form to submit. | boolean | TRUE |
| scale | scale | Specifies the size of the component. | "l" | "m" | "s" | TRUE |
| status | status | Specifies the status of the input field, which determines message and icons. | "idle" | "invalid" | "valid" | TRUE |
| suffixText | suffix-text | Adds text to the end of the component. | string | FALSE |
| validationIcon | validation-icon | Specifies the validation icon to display under the component. | boolean | string | TRUE |
| validationMessage | validation-message | Specifies the validation message to display under the component. | string | FALSE |
| validity | NA | The current validation state of the component. | Check API reference | FALSE |
| value | value | The component's value. | string | FALSE |
Events
The following events are observed by shiny:
| Event | Description |
| calciteInputTextChange | Fires each time a new value is typed and committed. |
| calciteInputTextInput | Fires each time a new value is typed. |
Slots
The following slots are provided by this component:
| Slot | Description |
| action | A slot for positioning a button next to the component. |
Value
an object of class calcite_component which is a subclass of shiny.tag
References
Examples
calcite_input_text()
Create a InputTimePicker component
Description
Create a InputTimePicker component
Usage
calcite_input_time_picker(...)
Arguments
... |
named attributes passed to |
Details
Properties
The following properties are provided by this component:
| Name | Attribute | Description | Values | Reflects to Attribute |
| disabled | disabled | When true, interaction is prevented and the component is displayed with lower opacity. | boolean | TRUE |
| focusTrapDisabled | focus-trap-disabled | When true, prevents focus trapping. | boolean | TRUE |
| form | form | The id of the form that will be associated with the component. When not set, the component will be associated with its ancestor form element, if any. | string | TRUE |
| hourFormat | hour-format | Specifies the component's hour format, where: "user" displays the user's locale format, "12" displays a 12-hour format, and "24" displays a 24-hour format. | "12" | "24" | "user" | TRUE |
| max | max | When the component resides in a form, specifies the maximum value. | string | TRUE |
| messageOverrides | NA | Use this property to override individual strings used by the component. | Check API reference | FALSE |
| min | min | When the component resides in a form, specifies the minimum value. | string | TRUE |
| name | name | Specifies the name of the component on form submission. | string | FALSE |
| numberingSystem | numbering-system | Specifies the Unicode numeral system used by the component for localization. | "arab" | "arabext" | "latn" | FALSE |
| open | open | When true, displays the calcite-time-picker component. | boolean | TRUE |
| overlayPositioning | overlay-positioning | Determines the type of positioning to use for the overlaid content. Using "absolute" will work for most cases. The component will be positioned inside of overflowing parent containers and will affect the container's layout. "fixed" should be used to escape an overflowing parent container, or when the reference element's position CSS property is "fixed". | "absolute" | "fixed" | FALSE |
| placement | placement | Determines where the popover will be positioned relative to the input. | "auto" | "auto-end" | "auto-start" | "bottom" | "bottom-end" | "bottom-start" | "leading" | "leading-end" | "leading-start" | "left" | "left-end" | "left-start" | "right" | "right-end" | "right-start" | "top" | "top-end" | "top-start" | "trailing" | "trailing-end" | "trailing-start" | TRUE |
| readOnly | read-only | When true, the component's value can be read, but controls are not accessible and the value cannot be modified. | boolean | TRUE |
| required | required | When true and the component resides in a form, the component must have a value in order for the form to submit. | boolean | TRUE |
| scale | scale | Specifies the size of the component. | "l" | "m" | "s" | TRUE |
| status | status | Specifies the status of the input field, which determines message and icons. | "idle" | "invalid" | "valid" | TRUE |
| step | step | Specifies the granularity the component's value must adhere to (in seconds). | number | FALSE |
| validationIcon | validation-icon | Specifies the validation icon to display under the component. | boolean | string | TRUE |
| validationMessage | validation-message | Specifies the validation message to display under the component. | string | FALSE |
| validity | NA | The current validation state of the component. | Check API reference | FALSE |
| value | value | The time value in ISO (24-hour) format. | string | FALSE |
Events
The following events are observed by shiny:
| Event | Description |
| calciteInputTimePickerBeforeClose | Fires when the component is requested to be closed and before the closing transition begins. |
| calciteInputTimePickerBeforeOpen | Fires when the component is added to the DOM but not rendered, and before the opening transition begins. |
| calciteInputTimePickerChange | Fires when the component's value is changes. |
| calciteInputTimePickerClose | Fires when the component is closed and animation is complete. |
| calciteInputTimePickerOpen | Fires when the component is open and animation is complete. |
Value
an object of class calcite_component which is a subclass of shiny.tag
References
Examples
calcite_input_time_picker()
Create a InputTimeZone component
Description
Create a InputTimeZone component
Usage
calcite_input_time_zone(...)
Arguments
... |
named attributes passed to |
Details
Properties
The following properties are provided by this component:
| Name | Attribute | Description | Values | Reflects to Attribute |
| clearable | clearable | When true, an empty value (null) will be allowed as a value. When false, an offset or name value is enforced, and clearing the input or blurring will restore the last valid value. | boolean | TRUE |
| disabled | disabled | When true, interaction is prevented and the component is displayed with lower opacity. | boolean | TRUE |
| form | form | The id of the form that will be associated with the component. When not set, the component will be associated with its ancestor form element, if any. | string | TRUE |
| maxItems | max-items | Specifies the component's maximum number of options to display before displaying a scrollbar. | number | TRUE |
| messageOverrides | NA | Use this property to override individual strings used by the component. | Check API reference | FALSE |
| mode | mode | This specifies the type of value and the associated options presented to the user: Using "offset" will provide options that show timezone offsets. Using "name" will provide options that show the IANA time zone names. | "name" | "offset" | "region" | TRUE |
| name | name | Specifies the name of the component. Required to pass the component's value on form submission. | string | TRUE |
| offsetStyle | offset-style | Specifies how the offset will be displayed, where "user" uses UTC or GMT depending on the user's locale, "gmt" always uses GMT, and "utc" always uses UTC. This only applies to the offset mode. | "gmt" | "user" | "utc" | TRUE |
| open | open | When true, displays and positions the component. | boolean | TRUE |
| overlayPositioning | overlay-positioning | Determines the type of positioning to use for the overlaid content. Using "absolute" will work for most cases. The component will be positioned inside of overflowing parent containers and will affect the container's layout. "fixed" should be used to escape an overflowing parent container, or when the reference element's position CSS property is "fixed". | "absolute" | "fixed" | TRUE |
| readOnly | read-only | When true, the component's value can be read, but controls are not accessible and the value cannot be modified. | boolean | TRUE |
| referenceDate | reference-date | This date will be used as a reference to Daylight Savings Time when creating time zone item groups. It can be either a Date instance or a string in ISO format ("YYYY-MM-DD", "YYYY-MM-DDTHH:MM:SS.SSSZ"). | Date | string | FALSE |
| scale | scale | Specifies the size of the component. | "l" | "m" | "s" | TRUE |
| status | status | Specifies the status of the input field, which determines message and icons. | "idle" | "invalid" | "valid" | TRUE |
| validationIcon | validation-icon | Specifies the validation icon to display under the component. | boolean | string | TRUE |
| validationMessage | validation-message | Specifies the validation message to display under the component. | string | FALSE |
| validity | NA | The current validation state of the component. | Check API reference | FALSE |
| value | value | The component's value, where the value is the time zone offset or the difference, in minutes, between the selected time zone and UTC. If no value is provided, the user's time zone offset will be selected by default. | string | FALSE |
Events
The following events are observed by shiny:
| Event | Description |
| calciteInputTimeZoneBeforeClose | Fires when the component is requested to be closed and before the closing transition begins. |
| calciteInputTimeZoneBeforeOpen | Fires when the component is added to the DOM but not rendered, and before the opening transition begins. |
| calciteInputTimeZoneChange | Fires when the component's value changes. |
| calciteInputTimeZoneClose | Fires after the component is closed and animation is complete. |
| calciteInputTimeZoneOpen | Fires after the component is opened and animation is complete. |
Value
an object of class calcite_component which is a subclass of shiny.tag
References
Examples
calcite_input_time_zone()
Create a Label component
Description
Create a Label component
Usage
calcite_label(...)
Arguments
... |
named attributes passed to |
Details
Properties
The following properties are provided by this component:
| Name | Attribute | Description | Values | Reflects to Attribute |
| alignment | alignment | Specifies the text alignment of the component. | "center" | "end" | "start" | TRUE |
| for | for | Specifies the id of the component the label is bound to. Use when the component the label is bound to does not reside within the component. | string | TRUE |
| layout | layout | Defines the layout of the label in relation to the component. Use "inline" positions to wrap the label and component on the same line. | "default" | "inline" | "inline-space-between" | TRUE |
| scale | scale | Specifies the size of the component. | "l" | "m" | "s" | TRUE |
Slots
The following slots are provided by this component:
| Slot | Description |
| Default (unnamed) | A slot for adding text and a component that can be labeled. |
Value
an object of class calcite_component which is a subclass of shiny.tag
References
Examples
calcite_label()
Create a Link component
Description
Create a Link component
Usage
calcite_link(...)
Arguments
... |
named attributes passed to |
Details
Any attributes placed on <calcite-link> component will propagate to the rendered child Passing a 'href' will render an anchor link, instead of a span. Role will be set to link, or link, depending on this. It is the consumers responsibility to add aria information, rel, target, for links, and any link attributes for form submission
Properties
The following properties are provided by this component:
| Name | Attribute | Description | Values | Reflects to Attribute |
| disabled | disabled | When true, interaction is prevented and the component is displayed with lower opacity. | boolean | TRUE |
| download | download | Prompts the user to save the linked URL instead of navigating to it. Can be used with or without a value: Without a value, the browser will suggest a filename/extension. | boolean | string | TRUE |
| href | href | Specifies the URL of the linked resource, which can be set as an absolute or relative path. | string | TRUE |
| iconEnd | icon-end | Specifies an icon to display at the end of the component. | string | TRUE |
| iconFlipRtl | icon-flip-rtl | Displays the iconStart and/or iconEnd as flipped when the element direction is right-to-left ("rtl"). | "both" | "end" | "start" | TRUE |
| iconStart | icon-start | Specifies an icon to display at the start of the component. | string | TRUE |
| rel | rel | Specifies the relationship to the linked document defined in href. | string | FALSE |
| target | target | Specifies the frame or window to open the linked document. | string | FALSE |
Slots
The following slots are provided by this component:
| Slot | Description |
| Default (unnamed) | A slot for adding text. |
Value
an object of class calcite_component which is a subclass of shiny.tag
References
Examples
calcite_link()
Create a List component
Description
Create a List component
Usage
calcite_list(...)
Arguments
... |
named attributes passed to |
Details
A general purpose list that enables users to construct list items that conform to Calcite styling.
Properties
The following properties are provided by this component:
| Name | Attribute | Description | Values | Reflects to Attribute |
| canPull | NA | When provided, the method will be called to determine whether the element can move from the list. | (detail: ListDragDetail) => boolean | FALSE |
| canPut | NA | When provided, the method will be called to determine whether the element can be added from another list. | (detail: ListDragDetail) => boolean | FALSE |
| disabled | disabled | When true, interaction is prevented and the component is displayed with lower opacity. | boolean | TRUE |
| displayMode | display-mode | Specifies the nesting behavior of calcite-list-items, where "flat" displays calcite-list-items in a uniform list, and "nested" displays calcite-list-items under their parent element. The parent component's behavior should follow throughout its child elements. | "flat" | "nested" | TRUE |
| dragEnabled | drag-enabled | When true, calcite-list-items are sortable via a draggable button. | boolean | TRUE |
| filteredData | NA | The currently filtered calcite-list-item data. | Check API reference | FALSE |
| filteredItems | NA | The currently filtered calcite-list-items. | Check API reference | FALSE |
| filterEnabled | filter-enabled | When true, an input appears at the top of the component that can be used by end users to filter calcite-list-items. | boolean | TRUE |
| filterLabel | filter-label | Specifies an accessible name for the filter input field. | string | TRUE |
| filterPlaceholder | filter-placeholder | Placeholder text for the component's filter input field. | string | TRUE |
| filterPredicate | NA | Specifies a function to handle filtering. | (item: HTMLCalciteListItemElement) => boolean | FALSE |
| filterProps | NA | Specifies the properties to match against when filtering. If not set, all properties will be matched (label, description, metadata, value, group heading). | Check API reference | FALSE |
| filterText | filter-text | Text for the component's filter input field. | string | TRUE |
| group | group | The list's group identifier. To drag elements from one list into another, both lists must have the same group value. | string | TRUE |
| interactionMode | interaction-mode | Specifies the interaction mode of the component. "interactive" allows interaction styling and pointer changes on hover "static" does not allow interaction styling and pointer changes on hover The "static" value should only be used when selectionMode is "none". | "interactive" | "static" | TRUE |
| label | label | Specifies an accessible name for the component. When dragEnabled is true and multiple list sorting is enabled with group, specifies the component's name for dragging between lists. | string | FALSE |
| loading | loading | When true, a busy indicator is displayed. | boolean | TRUE |
| messageOverrides | NA | Use this property to override individual strings used by the component. | Check API reference | FALSE |
| numberingSystem | numbering-system | Specifies the Unicode numeral system used by the component for localization. | "arab" | "arabext" | "latn" | FALSE |
| scale | scale | Specifies the size of the component. | "l" | "m" | "s" | TRUE |
| selectedItems | NA | The currently selected items. | Check API reference | FALSE |
| selectionAppearance | selection-appearance | Specifies the selection appearance - "icon" (displays a checkmark or dot) or "border" (displays a border). | "border" | "icon" | TRUE |
| selectionMode | selection-mode | Specifies the selection mode of the component, where: "multiple" allows any number of selections, "single" allows only one selection, "single-persist" allows one selection and prevents de-selection, and "none" does not allow any selections. | "multiple" | "none" | "single" | "single-persist" | TRUE |
Events
The following events are observed by shiny:
| Event | Description |
| calciteListChange | Fires when the component's selected items have changed. |
| calciteListDragEnd | Fires when the component's dragging has ended. |
| calciteListDragStart | Fires when the component's dragging has started. |
| calciteListFilter | Fires when the component's filter has changed. |
| calciteListOrderChange | Fires when the component's item order changes. |
Slots
The following slots are provided by this component:
| Slot | Description |
| Default (unnamed) | A slot for adding calcite-list-item and calcite-list-item-group elements. |
| filter-actions-start | A slot for adding actionable calcite-action elements before the filter component. |
| filter-actions-end | A slot for adding actionable calcite-action elements after the filter component. |
| filter-no-results | When filterEnabled is true, a slot for adding content to display when no results are found. |
Value
an object of class calcite_component which is a subclass of shiny.tag
References
Examples
calcite_list()
Create a ListItem component
Description
Create a ListItem component
Usage
calcite_list_item(...)
Arguments
... |
named attributes passed to |
Details
Properties
The following properties are provided by this component:
| Name | Attribute | Description | Values | Reflects to Attribute |
| closable | closable | When true, a close button is added to the component. | boolean | TRUE |
| closed | closed | When true, hides the component. | boolean | TRUE |
| description | description | A description for the component. Displays below the label text. | string | FALSE |
| disabled | disabled | When true, interaction is prevented and the component is displayed with lower opacity. | boolean | TRUE |
| dragDisabled | drag-disabled | When true, the item is not draggable. | boolean | TRUE |
| iconEnd | icon-end | Specifies an icon to display at the end of the component. | string | TRUE |
| iconFlipRtl | icon-flip-rtl | Displays the iconStart and/or iconEnd as flipped when the element direction is right-to-left ("rtl"). | "both" | "end" | "start" | TRUE |
| iconStart | icon-start | Specifies an icon to display at the start of the component. | string | TRUE |
| label | label | The label text of the component. Displays above the description text. | string | FALSE |
| messageOverrides | NA | Use this property to override individual strings used by the component. | Check API reference | FALSE |
| metadata | NA | Provides additional metadata to the component. Primary use is for a filter on the parent calcite-list. | Check API reference | FALSE |
| open | open | When true, the item is open to show child components. | boolean | TRUE |
| scale | scale | Specifies the size of the component. | "l" | "m" | "s" | TRUE |
| selected | selected | When true and the parent calcite-list's selectionMode is "single", "single-persist"', or "multiple"`, the component is selected. | boolean | TRUE |
| sortHandleOpen | sort-handle-open | When true, displays and positions the sort handle. | boolean | TRUE |
| unavailable | unavailable | When true, the component's content appears inactive. | boolean | TRUE |
| value | value | The component's value. | any | FALSE |
Events
The following events are observed by shiny:
| Event | Description |
| calciteListItemClose | Fires when the close button is clicked. |
| calciteListItemSelect | Fires when the component is selected. |
| calciteListItemSortHandleBeforeClose | Fires when the sort handle is requested to be closed and before the closing transition begins. |
| calciteListItemSortHandleBeforeOpen | Fires when the sort handle is added to the DOM but not rendered, and before the opening transition begins. |
| calciteListItemSortHandleClose | Fires when the sort handle is closed and animation is complete. |
| calciteListItemSortHandleOpen | Fires when the sort handle is open and animation is complete. |
| calciteListItemToggle | Fires when the open button is clicked. |
Slots
The following slots are provided by this component:
| Slot | Description |
| Default (unnamed) | A slot for adding calcite-list, calcite-list-item and calcite-list-item-group elements. |
| actions-start | A slot for adding actionable calcite-action elements before the content of the component. |
| content-start | A slot for adding non-actionable elements before the label and description of the component. |
| content | A slot for adding non-actionable, centered content in place of the label and description of the component. |
| content-end | A slot for adding non-actionable elements after the label and description of the component. |
| actions-end | A slot for adding actionable calcite-action elements after the content of the component. |
| content-bottom | A slot for adding content below the component's label and description. |
Value
an object of class calcite_component which is a subclass of shiny.tag
References
Examples
calcite_list_item()
Create a ListItemGroup component
Description
Create a ListItemGroup component
Usage
calcite_list_item_group(...)
Arguments
... |
named attributes passed to |
Details
Properties
The following properties are provided by this component:
| Name | Attribute | Description | Values | Reflects to Attribute |
| disabled | disabled | When true, interaction is prevented and the component is displayed with lower opacity. | boolean | TRUE |
| heading | heading | The header text for all nested calcite-list-item rows. | string | TRUE |
| scale | scale | Specifies the size of the component. | "l" | "m" | "s" | TRUE |
Slots
The following slots are provided by this component:
| Slot | Description |
| Default (unnamed) | A slot for adding calcite-list-item and calcite-list-item-group elements. |
Value
an object of class calcite_component which is a subclass of shiny.tag
References
Examples
calcite_list_item_group()
Create a Loader component
Description
Create a Loader component
Usage
calcite_loader(...)
Arguments
... |
named attributes passed to |
Details
Properties
The following properties are provided by this component:
| Name | Attribute | Description | Values | Reflects to Attribute |
| inline | inline | When true, displays smaller and appears to the left of the text. | boolean | TRUE |
| label | label | Accessible name for the component. | string | FALSE |
| scale | scale | Specifies the size of the component. | "l" | "m" | "s" | TRUE |
| text | text | Text that displays under the component's indicator. | string | FALSE |
| type | type | Specifies the component type. Use "indeterminate" if finding actual progress value is impossible. Otherwise, use "determinate" to have the value indicate the progress or "determinate-value" to have the value label displayed along the progress. | "determinate" | "determinate-value" | "indeterminate" | TRUE |
| value | value | The component's value. Valid only for "determinate" indicators. Percent complete of 100. | number | FALSE |
Value
an object of class calcite_component which is a subclass of shiny.tag
References
Examples
calcite_loader()
Create a Menu component
Description
Create a Menu component
Usage
calcite_menu(...)
Arguments
... |
named attributes passed to |
Details
Properties
The following properties are provided by this component:
| Name | Attribute | Description | Values | Reflects to Attribute |
| label | label | Accessible name for the component. | string | FALSE |
| layout | layout | Specifies the layout of the component. | "horizontal" | "vertical" | TRUE |
| messageOverrides | NA | Use this property to override individual strings used by the component. | Check API reference | FALSE |
Value
an object of class calcite_component which is a subclass of shiny.tag
References
Examples
calcite_menu()
Create a MenuItem component
Description
Create a MenuItem component
Usage
calcite_menu_item(...)
Arguments
... |
named attributes passed to |
Details
Properties
The following properties are provided by this component:
| Name | Attribute | Description | Values | Reflects to Attribute |
| active | active | When true, the component is highlighted. | boolean | TRUE |
| breadcrumb | breadcrumb | When true, the component displays a breadcrumb trail for use as a navigational aid. | boolean | TRUE |
| href | href | Specifies the URL destination of the component, which can be set as an absolute or relative path. | string | FALSE |
| iconEnd | icon-end | Specifies an icon to display at the end of the component. | string | TRUE |
| iconFlipRtl | icon-flip-rtl | Displays the iconStart and/or iconEnd as flipped when the element direction is right-to-left ("rtl"). | "both" | "end" | "start" | TRUE |
| iconStart | icon-start | Specifies an icon to display at the start of the component. | string | TRUE |
| label | label | Accessible name for the component. | string | FALSE |
| messageOverrides | NA | Use this property to override individual strings used by the component. | Check API reference | FALSE |
| open | open | When true, the component will display any slotted calcite-menu-item in an open overflow menu. | boolean | TRUE |
| rel | rel | Defines the relationship between the href value and the current document. | string | TRUE |
| target | target | Specifies where to open the linked document defined in the href property. | string | TRUE |
| text | text | Specifies the text to display. | string | FALSE |
Events
The following events are observed by shiny:
| Event | Description |
| calciteMenuItemSelect | Emits when the component is selected. |
Slots
The following slots are provided by this component:
| Slot | Description |
| submenu-item | A slot for adding calcite-menu-items in a submenu. |
Value
an object of class calcite_component which is a subclass of shiny.tag
References
Examples
calcite_menu_item()
Create a Meter component
Description
Create a Meter component
Usage
calcite_meter(...)
Arguments
... |
named attributes passed to |
Details
Properties
The following properties are provided by this component:
| Name | Attribute | Description | Values | Reflects to Attribute |
| appearance | appearance | Specifies the appearance style of the component. | "outline" | "outline-fill" | "solid" | TRUE |
| disabled | disabled | When true, interaction is prevented and the component is displayed with lower opacity. | boolean | TRUE |
| fillType | fill-type | Specifies the component's display, where "single" displays a single color and "range" displays a range of colors based on provided low, high, min or max values. | "range" | "single" | TRUE |
| form | form | The id of the form that will be associated with the component. When not set, the component will be associated with its ancestor form element, if any. | string | TRUE |
| groupSeparator | group-separator | When true, number values are displayed with a group separator corresponding to the language and country format. | boolean | TRUE |
| high | high | Specifies a high value. When fillType is "range", displays a different color when above the specified threshold. | number | TRUE |
| label | label | Accessible name for the component. | string | FALSE |
| low | low | Specifies a low value. When fillType is "range", displays a different color when above the specified threshold. | number | TRUE |
| max | max | Specifies the highest allowed value of the component. | number | TRUE |
| min | min | Specifies the lowest allowed value of the component. | number | TRUE |
| name | name | Specifies the name of the component. Required to pass the component's value on form submission. | string | TRUE |
| numberingSystem | numbering-system | Specifies the Unicode numeral system used by the component for localization. | "arab" | "arabext" | "latn" | FALSE |
| rangeLabels | range-labels | When true, displays the values of high, low, min, and max. | boolean | TRUE |
| rangeLabelType | range-label-type | When rangeLabels is true, specifies the format of displayed labels. | "percent" | "units" | TRUE |
| scale | scale | Specifies the size of the component. | "l" | "m" | "s" | TRUE |
| unitLabel | unit-label | When rangeLabelType is "units" and either valueLabel or rangeLabels are true, displays beside the value and/or min values. | string | FALSE |
| value | value | Specifies the current value of the component. | number | FALSE |
| valueLabel | value-label | When true, displays the current value. | boolean | TRUE |
| valueLabelType | value-label-type | When valueLabel is true, specifies the format of displayed label. | "percent" | "units" | TRUE |
Value
an object of class calcite_component which is a subclass of shiny.tag
References
Examples
calcite_meter()
Create a Modal component
Description
Use the calcite-dialog component instead.
Usage
calcite_modal(...)
Arguments
... |
named attributes passed to |
Details
Properties
The following properties are provided by this component:
| Name | Attribute | Description | Values | Reflects to Attribute |
| beforeClose | NA | Passes a function to run before the component closes. | Check API reference | FALSE |
| closeButtonDisabled | close-button-disabled | When true, disables the component's close button. | boolean | TRUE |
| docked | docked | When true, prevents the component from expanding to the entire screen on mobile devices. | boolean | TRUE |
| escapeDisabled | escape-disabled | When true, disables the default close on escape behavior. | boolean | TRUE |
| focusTrapDisabled | focus-trap-disabled | When true, prevents focus trapping. | boolean | TRUE |
| fullscreen | fullscreen | Sets the component to always be fullscreen. Overrides widthScale and --calcite-modal-width / --calcite-modal-height. | boolean | TRUE |
| kind | kind | Specifies the kind of the component, which will apply to top border. | "brand" | "danger" | "info" | "success" | "warning" | TRUE |
| messageOverrides | NA | Use this property to override individual strings used by the component. | Check API reference | FALSE |
| open | open | When true, displays and positions the component. | boolean | TRUE |
| outsideCloseDisabled | outside-close-disabled | When true, disables the closing of the component when clicked outside. | boolean | TRUE |
| scale | scale | Specifies the size of the component. | "l" | "m" | "s" | TRUE |
| widthScale | width-scale | Specifies the width of the component. | "l" | "m" | "s" | TRUE |
Events
The following events are observed by shiny:
| Event | Description |
| calciteModalBeforeClose | Fires when the component is requested to be closed and before the closing transition begins. |
| calciteModalBeforeOpen | Fires when the component is added to the DOM but not rendered, and before the opening transition begins. |
| calciteModalClose | Fires when the component is closed and animation is complete. |
| calciteModalOpen | Fires when the component is open and animation is complete. |
Slots
The following slots are provided by this component:
| Slot | Description |
| header | A slot for adding header text. |
| content | A slot for adding the component's content. |
| content-top | A slot for adding content to the component's sticky header, where content remains at the top of the component when scrolling up and down. |
| content-bottom | A slot for adding content to the component's sticky footer, where content remains at the bottom of the component when scrolling up and down. |
| primary | A slot for adding a primary button. |
| secondary | A slot for adding a secondary button. |
| back | A slot for adding a back button. |
Value
an object of class calcite_component which is a subclass of shiny.tag
References
Examples
calcite_modal()
Create a Navigation component
Description
Create a Navigation component
Usage
calcite_navigation(...)
Arguments
... |
named attributes passed to |
Details
Properties
The following properties are provided by this component:
| Name | Attribute | Description | Values | Reflects to Attribute |
| label | label | When navigationAction is true, specifies the label of the calcite-action. | string | FALSE |
| navigationAction | navigation-action | When true, displays a calcite-action and emits a calciteNavActionSelect event on selection change. | boolean | TRUE |
Events
The following events are observed by shiny:
| Event | Description |
| calciteNavigationActionSelect | When navigationAction is true, emits when the displayed action selection changes. |
Slots
The following slots are provided by this component:
| Slot | Description |
| logo | A slot for adding a calcite-logo component to the primary navigation level. |
| user | A slot for adding a calcite-user component to the primary navigation level. |
| progress | A slot for adding a calcite-progress component to the primary navigation level. |
| navigation-action | A slot for adding a calcite-action component to the primary navigation level. |
| content-start | A slot for adding a calcite-menu, calcite-action, or other interactive elements in the start position of any navigation level. |
| content-center | A slot for adding a calcite-menu, calcite-action, or other interactive elements in the center position of the primary navigation level. |
| content-end | A slot for adding a calcite-menu, calcite-action, or other interactive elements in the end position of any navigation level. |
| navigation-secondary | A slot for adding a calcite-navigation component in the secondary navigation level. Components rendered here will not display calcite-navigation-logo or calcite-navigation-user components. |
| navigation-tertiary | A slot for adding a calcite-navigation component in the tertiary navigation level. Components rendered here will not display calcite-navigation-logo or calcite-navigation-user components. |
Value
an object of class calcite_component which is a subclass of shiny.tag
References
Examples
calcite_navigation()
Create a NavigationLogo component
Description
Create a NavigationLogo component
Usage
calcite_navigation_logo(...)
Arguments
... |
named attributes passed to |
Details
Properties
The following properties are provided by this component:
| Name | Attribute | Description | Values | Reflects to Attribute |
| active | active | When true, the component is highlighted. | boolean | TRUE |
| description | description | A description for the component, which displays below the heading. | string | FALSE |
| heading | heading | Specifies heading text for the component, such as a product or organization name. | string | FALSE |
| headingLevel | heading-level | Specifies the heading level of the component's heading for proper document structure, without affecting visual styling. | 1 | 2 | 3 | 4 | 5 | 6 | TRUE |
| href | href | Specifies the URL destination of the component, which can be set as an absolute or relative path. | string | TRUE |
| icon | icon | Specifies an icon to display. | string | TRUE |
| iconFlipRtl | icon-flip-rtl | When true, the icon will be flipped when the element direction is right-to-left ("rtl"). | boolean | TRUE |
| label | label | Describes the appearance or function of the thumbnail. If no label is provided, context will not be provided to assistive technologies. | string | FALSE |
| rel | rel | Defines the relationship between the href value and the current document. | string | TRUE |
| target | target | Specifies where to open the linked document defined in the href property. | string | TRUE |
| thumbnail | thumbnail | Specifies the src to an image. | string | FALSE |
Value
an object of class calcite_component which is a subclass of shiny.tag
References
Examples
calcite_navigation_logo()
Create a NavigationUser component
Description
Create a NavigationUser component
Usage
calcite_navigation_user(...)
Arguments
... |
named attributes passed to |
Details
Properties
The following properties are provided by this component:
| Name | Attribute | Description | Values | Reflects to Attribute |
| active | active | When true, the component is highlighted. | boolean | TRUE |
| fullName | full-name | Specifies the full name of the user. | string | FALSE |
| label | label | Describes the appearance of the avatar. If no label is provided, context will not be provided to assistive technologies. | string | FALSE |
| textDisabled | text-disabled | When true, hides the fullName and username contents. | boolean | TRUE |
| thumbnail | thumbnail | Specifies the src to an image (remember to add a token if the user is private). | string | FALSE |
| userId | user-id | Specifies the unique id of the user. | string | FALSE |
| username | username | Specifies the username of the user. | string | FALSE |
Value
an object of class calcite_component which is a subclass of shiny.tag
References
Examples
calcite_navigation_user()
Create a Notice component
Description
Create a Notice component
Usage
calcite_notice(...)
Arguments
... |
named attributes passed to |
Details
Notices are intended to be used to present users with important-but-not-crucial contextual tips or copy. Because notices are displayed inline, a common use case is displaying them on page-load to present users with short hints or contextual copy. They are optionally closable - useful for keeping track of whether or not a user has closed the notice. You can also choose not to display a notice on page load and set the "active" attribute as needed to contextually provide inline messaging to users.
Properties
The following properties are provided by this component:
| Name | Attribute | Description | Values | Reflects to Attribute |
| closable | closable | When true, a close button is added to the component. | boolean | TRUE |
| icon | icon | When true, shows a default recommended icon. Alternatively, pass a Calcite UI Icon name to display a specific icon. | boolean | string | TRUE |
| iconFlipRtl | icon-flip-rtl | When true, the icon will be flipped when the element direction is right-to-left ("rtl"). | boolean | TRUE |
| kind | kind | Specifies the kind of the component, which will apply to top border and icon. | "brand" | "danger" | "info" | "success" | "warning" | TRUE |
| messageOverrides | NA | Use this property to override individual strings used by the component. | Check API reference | FALSE |
| open | open | When true, the component is visible. | boolean | TRUE |
| scale | scale | Specifies the size of the component. | "l" | "m" | "s" | TRUE |
| width | width | Check API reference | "auto" | "full" | "half" | TRUE |
Events
The following events are observed by shiny:
| Event | Description |
| calciteNoticeBeforeClose | Fires when the component is requested to be closed and before the closing transition begins. |
| calciteNoticeBeforeOpen | Fires when the component is added to the DOM but not rendered, and before the opening transition begins. |
| calciteNoticeClose | Fires when the component is closed and animation is complete. |
| calciteNoticeOpen | Fires when the component is open and animation is complete. |
Slots
The following slots are provided by this component:
| Slot | Description |
| title | A slot for adding the title. |
| message | A slot for adding the message. |
| link | A slot for adding a calcite-action to take, such as: "undo", "try again", "link to page", etc. |
| actions-end | A slot for adding calcite-actions to the end of the component. It is recommended to use two or less actions. |
Value
an object of class calcite_component which is a subclass of shiny.tag
References
Examples
calcite_notice()
Create a Option component
Description
Create a Option component
Usage
calcite_option(...)
Arguments
... |
named attributes passed to |
Details
Properties
The following properties are provided by this component:
| Name | Attribute | Description | Values | Reflects to Attribute |
| disabled | disabled | When true, interaction is prevented and the component is displayed with lower opacity. | boolean | TRUE |
| label | label | Accessible name for the component. | string | FALSE |
| selected | selected | When true, the component is selected. | boolean | TRUE |
| value | value | The component's value. | any | FALSE |
Value
an object of class calcite_component which is a subclass of shiny.tag
References
Examples
calcite_option()
Create a OptionGroup component
Description
Create a OptionGroup component
Usage
calcite_option_group(...)
Arguments
... |
named attributes passed to |
Details
Properties
The following properties are provided by this component:
| Name | Attribute | Description | Values | Reflects to Attribute |
| disabled | disabled | When true, interaction is prevented and the component is displayed with lower opacity. | boolean | TRUE |
| label | label | Accessible name for the component. | string | FALSE |
Slots
The following slots are provided by this component:
| Slot | Description |
| Default (unnamed) | A slot for adding calcite-options. |
Value
an object of class calcite_component which is a subclass of shiny.tag
References
Examples
calcite_option_group()
Create a Pagination component
Description
Create a Pagination component
Usage
calcite_pagination(...)
Arguments
... |
named attributes passed to |
Details
Properties
The following properties are provided by this component:
| Name | Attribute | Description | Values | Reflects to Attribute |
| groupSeparator | group-separator | When true, number values are displayed with a group separator corresponding to the language and country format. | boolean | TRUE |
| messageOverrides | NA | Use this property to override individual strings used by the component. | Check API reference | FALSE |
| numberingSystem | numbering-system | Specifies the Unicode numeral system used by the component for localization. | "arab" | "arabext" | "latn" | FALSE |
| pageSize | page-size | Specifies the number of items per page. | number | TRUE |
| scale | scale | Specifies the size of the component. | "l" | "m" | "s" | TRUE |
| startItem | start-item | Specifies the starting item number. | number | TRUE |
| totalItems | total-items | Specifies the total number of items. | number | TRUE |
Events
The following events are observed by shiny:
| Event | Description |
| calcitePaginationChange | Emits when the selected page changes. |
Value
an object of class calcite_component which is a subclass of shiny.tag
References
Examples
calcite_pagination()
Create a Panel component
Description
Create a Panel component
Usage
calcite_panel(...)
Arguments
... |
named attributes passed to |
Details
Properties
The following properties are provided by this component:
| Name | Attribute | Description | Values | Reflects to Attribute |
| beforeClose | NA | Passes a function to run before the component closes. | Check API reference | FALSE |
| closable | closable | When true, displays a close button in the trailing side of the header. | boolean | TRUE |
| closed | closed | When true, the component will be hidden. | boolean | TRUE |
| collapsed | collapsed | When true, hides the component's content area. | boolean | TRUE |
| collapsible | collapsible | When true, the component is collapsible. | boolean | TRUE |
| description | description | A description for the component. | string | FALSE |
| disabled | disabled | When true, interaction is prevented and the component is displayed with lower opacity. | boolean | TRUE |
| heading | heading | The component header text. | string | FALSE |
| headingLevel | heading-level | Specifies the heading level of the component's heading for proper document structure, without affecting visual styling. | 1 | 2 | 3 | 4 | 5 | 6 | TRUE |
| loading | loading | When true, a busy indicator is displayed. | boolean | TRUE |
| menuFlipPlacements | NA | Specifies the component's fallback menu placement when it's initial or specified placement has insufficient space available. | Check API reference | FALSE |
| menuOpen | menu-open | When true, the action menu items in the header-menu-actions slot are open. | boolean | TRUE |
| menuPlacement | menu-placement | Determines where the action menu will be positioned. | "auto" | "auto-end" | "auto-start" | "bottom" | "bottom-end" | "bottom-start" | "leading" | "leading-end" | "leading-start" | "left" | "left-end" | "left-start" | "right" | "right-end" | "right-start" | "top" | "top-end" | "top-start" | "trailing" | "trailing-end" | "trailing-start" | TRUE |
| messageOverrides | NA | Use this property to override individual strings used by the component. | Check API reference | FALSE |
| overlayPositioning | overlay-positioning | Determines the type of positioning to use for the overlaid content. Using "absolute" will work for most cases. The component will be positioned inside of overflowing parent containers and will affect the container's layout. "fixed" should be used to escape an overflowing parent container, or when the reference element's position CSS property is "fixed". | "absolute" | "fixed" | TRUE |
| scale | scale | Specifies the size of the component. | "l" | "m" | "s" | TRUE |
Events
The following events are observed by shiny:
| Event | Description |
| calcitePanelClose | Fires when the close button is clicked. |
| calcitePanelScroll | Fires when the content is scrolled. |
| calcitePanelToggle | Fires when the collapse button is clicked. |
Slots
The following slots are provided by this component:
| Slot | Description |
| Default (unnamed) | A slot for adding custom content. |
| action-bar | A slot for adding a calcite-action-bar to the component. |
| alerts | A slot for adding calcite-alerts to the component. |
| content-bottom | A slot for adding content below the unnamed (default) slot and above the footer slot (if populated) |
| content-top | A slot for adding content above the unnamed (default) slot and below the action-bar slot (if populated). |
| header-actions-start | A slot for adding actions or content to the start side of the header. |
| header-actions-end | A slot for adding actions or content to the end side of the header. |
| header-content | A slot for adding custom content to the header. |
| header-menu-actions | A slot for adding an overflow menu with actions inside a calcite-dropdown. |
| fab | A slot for adding a calcite-fab (floating action button) to perform an action. |
| footer | A slot for adding custom content to the component's footer. Should not be used with the "footer-start" or "footer-end" slots. |
| footer-actions | Deprecated Use the footer-start and footer-end slots instead. A slot for adding calcite-buttons to the component's footer. |
| footer-end | A slot for adding a trailing footer custom content. Should not be used with the "footer" slot. |
| footer-start | A slot for adding a leading footer custom content. Should not be used with the "footer" slot. |
Value
an object of class calcite_component which is a subclass of shiny.tag
References
Examples
calcite_panel()
Create a Popover component
Description
Create a Popover component
Usage
calcite_popover(...)
Arguments
... |
named attributes passed to |
Details
Properties
The following properties are provided by this component:
| Name | Attribute | Description | Values | Reflects to Attribute |
| autoClose | auto-close | When true, clicking outside of the component automatically closes open calcite-popovers. | boolean | TRUE |
| closable | closable | When true, displays a close button within the component. | boolean | TRUE |
| flipDisabled | flip-disabled | When true, prevents flipping the component's placement when overlapping its referenceElement. | boolean | TRUE |
| flipPlacements | NA | Specifies the component's fallback placement when it's initial or specified placement has insufficient space available. | Check API reference | FALSE |
| focusTrapDisabled | focus-trap-disabled | When true, prevents focus trapping. | boolean | TRUE |
| heading | heading | The component header text. | string | FALSE |
| headingLevel | heading-level | Specifies the heading level of the component's heading for proper document structure, without affecting visual styling. | 1 | 2 | 3 | 4 | 5 | 6 | TRUE |
| initialFocusTrapFocus | initial-focus-trap-focus | Specifies whether focus should move to the popover when the focus trap is activated. @internal | ((() => FocusTargetValueOrFalse)) | HTMLElement | SVGElement | boolean | string | FALSE |
| label | label | Accessible name for the component. | string | FALSE |
| messageOverrides | NA | Use this property to override individual strings used by the component. | Check API reference | FALSE |
| offsetDistance | offset-distance | Offsets the position of the popover away from the referenceElement. | number | TRUE |
| offsetSkidding | offset-skidding | Offsets the position of the component along the referenceElement. | number | TRUE |
| open | open | When true, displays and positions the component. | boolean | TRUE |
| overlayPositioning | overlay-positioning | Determines the type of positioning to use for the overlaid content. Using "absolute" will work for most cases. The component will be positioned inside of overflowing parent containers and will affect the container's layout. "fixed" value should be used to escape an overflowing parent container, or when the reference element's position CSS property is "fixed". | "absolute" | "fixed" | TRUE |
| placement | placement | Determines where the component will be positioned relative to the referenceElement. | "auto" | "auto-end" | "auto-start" | "bottom" | "bottom-end" | "bottom-start" | "leading" | "leading-end" | "leading-start" | "left" | "left-end" | "left-start" | "right" | "right-end" | "right-start" | "top" | "top-end" | "top-start" | "trailing" | "trailing-end" | "trailing-start" | TRUE |
| pointerDisabled | pointer-disabled | When true, removes the caret pointer. | boolean | TRUE |
| referenceElement | reference-element | The referenceElement used to position the component according to its placement value. Setting to an HTMLElement is preferred so the component does not need to query the DOM. However, a string id of the reference element can also be used. | Element | VirtualElement | string | FALSE |
| scale | scale | Specifies the size of the component. | "l" | "m" | "s" | TRUE |
| triggerDisabled | trigger-disabled | When true, disables automatically toggling the component when its referenceElement has been triggered. This property can be set to true to manage when the component is open. | boolean | TRUE |
Events
The following events are observed by shiny:
| Event | Description |
| calcitePopoverBeforeClose | Fires when the component is requested to be closed and before the closing transition begins. |
| calcitePopoverBeforeOpen | Fires when the component is added to the DOM but not rendered, and before the opening transition begins. |
| calcitePopoverClose | Fires when the component is closed and animation is complete. |
| calcitePopoverOpen | Fires when the component is open and animation is complete. |
Slots
The following slots are provided by this component:
| Slot | Description |
| Default (unnamed) | A slot for adding custom content. |
Value
an object of class calcite_component which is a subclass of shiny.tag
References
Examples
calcite_popover()
Create a Progress component
Description
Create a Progress component
Usage
calcite_progress(...)
Arguments
... |
named attributes passed to |
Details
Properties
The following properties are provided by this component:
| Name | Attribute | Description | Values | Reflects to Attribute |
| label | label | Accessible name for the component. | string | FALSE |
| reversed | reversed | When true and for "indeterminate" progress bars, reverses the animation direction. | boolean | TRUE |
| text | text | Text that displays under the component's indicator. | string | FALSE |
| type | type | Specifies the component type. Use "indeterminate" if finding actual progress value is impossible. | "determinate" | "indeterminate" | TRUE |
| value | value | When type is "determinate", specifies the component's value with a range of 0 to 100. | number | FALSE |
Value
an object of class calcite_component which is a subclass of shiny.tag
References
Examples
calcite_progress()
Create a RadioButton component
Description
Create a RadioButton component
Usage
calcite_radio_button(...)
Arguments
... |
named attributes passed to |
Details
Properties
The following properties are provided by this component:
| Name | Attribute | Description | Values | Reflects to Attribute |
| checked | checked | When true, the component is checked. | boolean | TRUE |
| disabled | disabled | When true, interaction is prevented and the component is displayed with lower opacity. | boolean | TRUE |
| form | form | The id of the form that will be associated with the component. When not set, the component will be associated with its ancestor form element, if any. | string | TRUE |
| name | name | Specifies the name of the component. Can be inherited from calcite-radio-button-group. Required to pass the component's value on form submission. | string | TRUE |
| required | required | When true and the component resides in a form, the component must have a value selected from the calcite-radio-button-group in order for the form to submit. | boolean | TRUE |
| scale | scale | Specifies the size of the component inherited from the calcite-radio-button-group. | "l" | "m" | "s" | TRUE |
| value | value | The component's value. | any | FALSE |
Events
The following events are observed by shiny:
| Event | Description |
| calciteRadioButtonChange | Fires only when the radio button is checked. This behavior is identical to the native HTML input element. Since this event does not fire when the radio button is unchecked, it's not recommended to attach a listener for this event directly on the element, but instead either attach it to a node that contains all of the radio buttons in the group or use the calciteRadioButtonGroupChange event if using this with calcite-radio-button-group. |
Value
an object of class calcite_component which is a subclass of shiny.tag
References
Examples
calcite_radio_button()
Create a RadioButtonGroup component
Description
Create a RadioButtonGroup component
Usage
calcite_radio_button_group(...)
Arguments
... |
named attributes passed to |
Details
Properties
The following properties are provided by this component:
| Name | Attribute | Description | Values | Reflects to Attribute |
| disabled | disabled | When true, interaction is prevented and the component is displayed with lower opacity. | boolean | TRUE |
| layout | layout | Defines the layout of the component. | "grid" | "horizontal" | "vertical" | TRUE |
| name | name | Specifies the name of the component on form submission. Must be unique to other component instances. | string | TRUE |
| required | required | When true and the component resides in a form, the component must have a value in order for the form to submit. | boolean | TRUE |
| scale | scale | Specifies the size of the component. | "l" | "m" | "s" | TRUE |
| selectedItem | NA | Specifies the component's selected item. | HTMLCalciteRadioButtonElement | FALSE |
| status | status | Specifies the status of the validation message. | "idle" | "invalid" | "valid" | TRUE |
| validationIcon | validation-icon | Specifies the validation icon to display under the component. | boolean | string | TRUE |
| validationMessage | validation-message | Specifies the validation message to display under the component. | string | FALSE |
Events
The following events are observed by shiny:
| Event | Description |
| calciteRadioButtonGroupChange | Fires when the component has changed. |
Slots
The following slots are provided by this component:
| Slot | Description |
| Default (unnamed) | A slot for adding calcite-radio-buttons. |
Value
an object of class calcite_component which is a subclass of shiny.tag
References
Examples
calcite_radio_button_group()
Create a Rating component
Description
Create a Rating component
Usage
calcite_rating(...)
Arguments
... |
named attributes passed to |
Details
Properties
The following properties are provided by this component:
| Name | Attribute | Description | Values | Reflects to Attribute |
| average | average | Specifies a cumulative average from previous ratings to display. | number | TRUE |
| count | count | Specifies the number of previous ratings to display. | number | TRUE |
| disabled | disabled | When true, interaction is prevented and the component is displayed with lower opacity. | boolean | TRUE |
| form | form | The id of the form that will be associated with the component. When not set, the component will be associated with its ancestor form element, if any. | string | TRUE |
| messageOverrides | NA | Use this property to override individual strings used by the component. | Check API reference | FALSE |
| name | name | Specifies the name of the component. Required to pass the component's value on form submission. | string | TRUE |
| readOnly | read-only | When true, the component's value can be read, but cannot be modified. | boolean | TRUE |
| scale | scale | Specifies the size of the component. | "l" | "m" | "s" | TRUE |
| showChip | show-chip | When true, and if available, displays the average and/or count data summary in a calcite-chip. | boolean | TRUE |
| status | status | Specifies the status of the input field, which determines message and icons. | "idle" | "invalid" | "valid" | TRUE |
| validationIcon | validation-icon | Specifies the validation icon to display under the component. | boolean | string | TRUE |
| validationMessage | validation-message | Specifies the validation message to display under the component. | string | FALSE |
| validity | NA | The current validation state of the component. | Check API reference | FALSE |
| value | value | The component's value. | number | TRUE |
Events
The following events are observed by shiny:
| Event | Description |
| calciteRatingChange | Fires when the component's value changes. |
Value
an object of class calcite_component which is a subclass of shiny.tag
References
Examples
calcite_rating()
Create a Scrim component
Description
Create a Scrim component
Usage
calcite_scrim(...)
Arguments
... |
named attributes passed to |
Details
Properties
The following properties are provided by this component:
| Name | Attribute | Description | Values | Reflects to Attribute |
| loading | loading | When true, a busy indicator is displayed. | boolean | TRUE |
| messageOverrides | NA | Use this property to override individual strings used by the component. | Check API reference | FALSE |
Slots
The following slots are provided by this component:
| Slot | Description |
| Default (unnamed) | A slot for adding custom content, primarily loading information. |
Value
an object of class calcite_component which is a subclass of shiny.tag
References
Examples
calcite_scrim()
Create a SegmentedControl component
Description
Create a SegmentedControl component
Usage
calcite_segmented_control(...)
Arguments
... |
named attributes passed to |
Details
Properties
The following properties are provided by this component:
| Name | Attribute | Description | Values | Reflects to Attribute |
| appearance | appearance | Specifies the appearance style of the component. | "outline" | "outline-fill" | "solid" | TRUE |
| disabled | disabled | When true, interaction is prevented and the component is displayed with lower opacity. | boolean | TRUE |
| form | form | The id of the form that will be associated with the component. When not set, the component will be associated with its ancestor form element, if any. | string | TRUE |
| layout | layout | Defines the layout of the component. | "horizontal" | "vertical" | TRUE |
| name | name | Specifies the name of the component. Required to pass the component's value on form submission. | string | TRUE |
| required | required | When true and the component resides in a form, the component must have a value in order for the form to submit. | boolean | TRUE |
| scale | scale | Specifies the size of the component. | "l" | "m" | "s" | TRUE |
| selectedItem | NA | The component's selected item HTMLElement. | HTMLCalciteSegmentedControlItemElement | FALSE |
| status | status | Specifies the status of the validation message. | "idle" | "invalid" | "valid" | TRUE |
| validationIcon | validation-icon | Specifies the validation icon to display under the component. | boolean | string | TRUE |
| validationMessage | validation-message | Specifies the validation message to display under the component. | string | FALSE |
| validity | NA | The current validation state of the component. | Check API reference | FALSE |
| value | value | The component's selectedItem value. | string | FALSE |
| width | width | Check API reference | "auto" | "full" | TRUE |
Events
The following events are observed by shiny:
| Event | Description |
| calciteSegmentedControlChange | Fires when the calcite-segmented-control-item selection changes. |
Slots
The following slots are provided by this component:
| Slot | Description |
| Default (unnamed) | A slot for adding calcite-segmented-control-items. |
Value
an object of class calcite_component which is a subclass of shiny.tag
References
Examples
calcite_segmented_control()
Create a SegmentedControlItem component
Description
Create a SegmentedControlItem component
Usage
calcite_segmented_control_item(...)
Arguments
... |
named attributes passed to |
Details
Properties
The following properties are provided by this component:
| Name | Attribute | Description | Values | Reflects to Attribute |
| checked | checked | When true, the component is checked. | boolean | TRUE |
| iconEnd | icon-end | Specifies an icon to display at the end of the component. | string | TRUE |
| iconFlipRtl | icon-flip-rtl | When true, the icon will be flipped when the element direction is right-to-left ("rtl"). | boolean | TRUE |
| iconStart | icon-start | Specifies an icon to display at the start of the component. | string | TRUE |
| value | value | The component's value. | any | FALSE |
Value
an object of class calcite_component which is a subclass of shiny.tag
References
Examples
calcite_segmented_control_item()
Create a Select component
Description
Create a Select component
Usage
calcite_select(...)
Arguments
... |
named attributes passed to |
Details
Properties
The following properties are provided by this component:
| Name | Attribute | Description | Values | Reflects to Attribute |
| disabled | disabled | When true, interaction is prevented and the component is displayed with lower opacity. | boolean | TRUE |
| form | form | The id of the form that will be associated with the component. When not set, the component will be associated with its ancestor form element, if any. | string | TRUE |
| label | label | Accessible name for the component. | string | FALSE |
| name | name | Specifies the name of the component. Required to pass the component's value on form submission. | string | TRUE |
| required | required | When true and the component resides in a form, the component must have a value in order for the form to submit. | boolean | TRUE |
| scale | scale | Specifies the size of the component. | "l" | "m" | "s" | TRUE |
| selectedOption | NA | The component's selected option HTMLElement. | HTMLCalciteOptionElement | FALSE |
| status | status | Specifies the status of the input field, which determines message and icons. | "idle" | "invalid" | "valid" | TRUE |
| validationIcon | validation-icon | Specifies the validation icon to display under the component. | boolean | string | TRUE |
| validationMessage | validation-message | Specifies the validation message to display under the component. | string | FALSE |
| validity | NA | The current validation state of the component. | Check API reference | FALSE |
| value | value | The component's selectedOption value. | string | FALSE |
| width | width | Check API reference | "auto" | "full" | "half" | TRUE |
Events
The following events are observed by shiny:
| Event | Description |
| calciteSelectChange | Fires when the selectedOption changes. |
Slots
The following slots are provided by this component:
| Slot | Description |
| Default (unnamed) | A slot for adding calcite-options. |
Value
an object of class calcite_component which is a subclass of shiny.tag
References
Examples
calcite_select()
Create a Sheet component
Description
Create a Sheet component
Usage
calcite_sheet(...)
Arguments
... |
named attributes passed to |
Details
Properties
The following properties are provided by this component:
| Name | Attribute | Description | Values | Reflects to Attribute |
| beforeClose | NA | Passes a function to run before the component closes. | Check API reference | FALSE |
| displayMode | display-mode | Specifies the display mode - "float" (content is separated detached), or "overlay" (displays on top of center content). | "float" | "overlay" | TRUE |
| escapeDisabled | escape-disabled | When true, disables the default close on escape behavior. | boolean | TRUE |
| focusTrapDisabled | focus-trap-disabled | When true, prevents focus trapping. | boolean | TRUE |
| height | height | Specifies the height of the component. | "l" | "m" | "s" | TRUE |
| heightScale | height-scale | When position is "block-start" or "block-end", specifies the height of the component. | "l" | "m" | "s" | TRUE |
| label | label | Specifies the label of the component. | string | FALSE |
| messageOverrides | NA | Use this property to override individual strings used by the component. | Check API reference | FALSE |
| open | open | When true, displays and positions the component. | boolean | TRUE |
| outsideCloseDisabled | outside-close-disabled | When true, disables the closing of the component when clicked outside. | boolean | TRUE |
| position | position | Determines where the component will be positioned. | "block-end" | "block-start" | "inline-end" | "inline-start" | TRUE |
| resizable | resizable | When true, the component is resizable. | boolean | TRUE |
| width | width | Specifies the width of the component. | "l" | "m" | "s" | TRUE |
| widthScale | width-scale | When position is "inline-start" or "inline-end", specifies the width of the component. | "l" | "m" | "s" | TRUE |
Events
The following events are observed by shiny:
| Event | Description |
| calciteSheetBeforeClose | Fires when the component is requested to be closed and before the closing transition begins. |
| calciteSheetBeforeOpen | Fires when the component is added to the DOM but not rendered, and before the opening transition begins. |
| calciteSheetClose | Fires when the component is closed and animation is complete. |
| calciteSheetOpen | Fires when the component is open and animation is complete. |
Value
an object of class calcite_component which is a subclass of shiny.tag
References
Examples
calcite_sheet()
Create a Shell component
Description
Create a Shell component
Usage
calcite_shell(...)
Arguments
... |
named attributes passed to |
Details
Properties
The following properties are provided by this component:
| Name | Attribute | Description | Values | Reflects to Attribute |
| contentBehind | content-behind | Positions the center content behind any calcite-shell-panels. | boolean | TRUE |
Slots
The following slots are provided by this component:
| Slot | Description |
| Default (unnamed) | A slot for adding custom content. This content will appear between any leading and trailing panels added to the component, such as a map. |
| header | A slot for adding header content. This content will be positioned at the top of the component. |
| footer | A slot for adding footer content. This content will be positioned at the bottom of the component. |
| panel-start | A slot for adding the starting calcite-shell-panel. |
| panel-end | A slot for adding the ending calcite-shell-panel. |
| panel-top | A slot for adding the top calcite-shell-panel. |
| panel-bottom | A slot for adding the bottom calcite-shell-panel. |
| center-row | Deprecated Use the "panel-bottom" slot instead. A slot for adding the bottom calcite-shell-center-row. |
| modals | A slot for adding calcite-modal components. When placed in this slot, the modal position will be constrained to the extent of the calcite-shell. |
| dialogs | A slot for adding calcite-dialog components. When placed in this slot, the dialog position will be constrained to the extent of the calcite-shell. |
| alerts | A slot for adding calcite-alert components. When placed in this slot, the alert position will be constrained to the extent of the calcite-shell. |
| sheets | A slot for adding calcite-sheet components. When placed in this slot, the sheet position will be constrained to the extent of the calcite-shell. |
Value
an object of class calcite_component which is a subclass of shiny.tag
References
Examples
calcite_shell()
Create a ShellCenterRow component
Description
Use the calcite-shell-panel component instead.
Usage
calcite_shell_center_row(...)
Arguments
... |
named attributes passed to |
Details
Properties
The following properties are provided by this component:
| Name | Attribute | Description | Values | Reflects to Attribute |
| detached | detached | When true, the content area displays like a floating panel. | boolean | TRUE |
| heightScale | height-scale | Specifies the maximum height of the component. | "l" | "m" | "s" | TRUE |
| position | position | Specifies the component's position. Will be flipped when the element direction is right-to-left ("rtl"). | "end" | "start" | TRUE |
Slots
The following slots are provided by this component:
| Slot | Description |
| Default (unnamed) | A slot for adding content to the calcite-shell-panel. |
| action-bar | A slot for adding a calcite-action-bar to the calcite-shell-panel. |
Value
an object of class calcite_component which is a subclass of shiny.tag
References
Examples
calcite_shell_center_row()
Create a ShellPanel component
Description
Create a ShellPanel component
Usage
calcite_shell_panel(...)
Arguments
... |
named attributes passed to |
Details
Properties
The following properties are provided by this component:
| Name | Attribute | Description | Values | Reflects to Attribute |
| collapsed | collapsed | When true, hides the component's content area. | boolean | TRUE |
| displayMode | display-mode | Check API reference | "dock" | "float" | "float-all" | "float-content" | "overlay" | TRUE |
| height | height | Specifies the height of the component. | "l" | "m" | "s" | TRUE |
| heightScale | height-scale | When layout is horizontal, specifies the maximum height of the component. | "l" | "m" | "s" | TRUE |
| layout | layout | The direction of the component. | "horizontal" | "vertical" | TRUE |
| messageOverrides | NA | Use this property to override individual strings used by the component. | Check API reference | FALSE |
| position | position | Specifies the component's position. Will be flipped when the element direction is right-to-left ("rtl"). | "end" | "start" | TRUE |
| resizable | resizable | When true and displayMode is not float-content or float, the component's content area is resizable. | boolean | TRUE |
| width | width | Specifies the width of the component. | "l" | "m" | "s" | TRUE |
| widthScale | width-scale | When layout is vertical, specifies the width of the component. | "l" | "m" | "s" | TRUE |
Slots
The following slots are provided by this component:
| Slot | Description |
| Default (unnamed) | A slot for adding custom content. |
| action-bar | A slot for adding a calcite-action-bar to the component. |
Value
an object of class calcite_component which is a subclass of shiny.tag
References
Examples
calcite_shell_panel()
Create a Slider component
Description
Create a Slider component
Usage
calcite_slider(...)
Arguments
... |
named attributes passed to |
Details
Properties
The following properties are provided by this component:
| Name | Attribute | Description | Values | Reflects to Attribute |
| disabled | disabled | When true, interaction is prevented and the component is displayed with lower opacity. | boolean | TRUE |
| fillPlacement | fill-placement | Used to configure where the fill is placed along the slider track in relation to the value handle. Range mode will always display the fill between the min and max handles. | "end" | "none" | "start" | TRUE |
| form | form | The id of the form that will be associated with the component. When not set, the component will be associated with its ancestor form element, if any. | string | TRUE |
| groupSeparator | group-separator | When true, number values are displayed with a group separator corresponding to the language and country format. | boolean | TRUE |
| hasHistogram | has-histogram | When true, indicates a histogram is present. | boolean | TRUE |
| histogram | NA | A list of the histogram's x,y coordinates within the component's min and max. Displays above the component's track. | Check API reference | FALSE |
| histogramStops | NA | A set of single color stops for a histogram, sorted by offset ascending. | Check API reference | FALSE |
| labelFormatter | NA | When specified, allows users to customize handle labels. | (value: number, type: "min" | "value" | "max" | "tick", defaultFormatter: (value: number) => string) => string | FALSE |
| labelHandles | label-handles | When true, displays label handles with their numeric value. | boolean | TRUE |
| labelTicks | label-ticks | When true and ticks is specified, displays label tick marks with their numeric value. | boolean | TRUE |
| max | max | The component's maximum selectable value. | number | TRUE |
| maxLabel | max-label | For multiple selections, the accessible name for the second handle, such as "Temperature, upper bound". | string | FALSE |
| maxValue | max-value | For multiple selections, the component's upper value. | number | FALSE |
| min | min | The component's minimum selectable value. | number | TRUE |
| minLabel | min-label | Accessible name for first (or only) handle, such as "Temperature, lower bound". | string | FALSE |
| minValue | min-value | For multiple selections, the component's lower value. | number | FALSE |
| mirrored | mirrored | When true, the slider will display values from high to low. Note that this value will be ignored if the slider has an associated histogram. | boolean | TRUE |
| name | name | Specifies the name of the component. Required to pass the component's value on form submission. | string | TRUE |
| numberingSystem | numbering-system | Specifies the Unicode numeral system used by the component for localization. | "arab" | "arabext" | "latn" | FALSE |
| pageStep | page-step | Specifies the interval to move with the page up, or page down keys. | number | TRUE |
| precise | precise | When true, sets a finer point for handles. | boolean | TRUE |
| required | required | When true and the component resides in a form, the component must have a value in order for the form to submit. | boolean | TRUE |
| scale | scale | Specifies the size of the component. | "l" | "m" | "s" | TRUE |
| snap | snap | When true, enables snap selection in coordination with step via a mouse. | boolean | TRUE |
| status | status | Specifies the status of the input field, which determines message and icons. | "idle" | "invalid" | "valid" | TRUE |
| step | step | Specifies the interval to move with the up, or down keys. | number | TRUE |
| ticks | ticks | Displays tick marks on the number line at a specified interval. | number | TRUE |
| validationIcon | validation-icon | Specifies the validation icon to display under the component. | boolean | string | TRUE |
| validationMessage | validation-message | Specifies the validation message to display under the component. | string | FALSE |
| validity | NA | The current validation state of the component. | Check API reference | FALSE |
| value | value | The component's value. | Check API reference | TRUE |
Events
The following events are observed by shiny:
| Event | Description |
| calciteSliderChange | Fires when the thumb is released on the component. Note: To constantly listen to the drag event, use calciteSliderInput instead. |
| calciteSliderInput | Fires on all updates to the component. Note: Fires frequently during drag. To perform expensive operations consider using a debounce or throttle to avoid locking up the main thread. |
Value
an object of class calcite_component which is a subclass of shiny.tag
References
Examples
calcite_slider()
Create a SplitButton component
Description
Create a SplitButton component
Usage
calcite_split_button(...)
Arguments
... |
named attributes passed to |
Details
Properties
The following properties are provided by this component:
| Name | Attribute | Description | Values | Reflects to Attribute |
| appearance | appearance | Specifies the appearance style of the component. | "outline" | "outline-fill" | "solid" | "transparent" | TRUE |
| disabled | disabled | When true, interaction is prevented and the component is displayed with lower opacity. | boolean | TRUE |
| dropdownIconType | dropdown-icon-type | Specifies the icon used for the dropdown menu. | "caret" | "chevron" | "ellipsis" | "overflow" | TRUE |
| dropdownLabel | dropdown-label | Accessible name for the dropdown menu. | string | TRUE |
| flipPlacements | NA | Specifies the component's fallback slotted content placement when it's initial or specified placement has insufficient space available. | Check API reference | FALSE |
| kind | kind | Specifies the kind of the component, which will apply to border and background, if applicable. | "brand" | "danger" | "inverse" | "neutral" | TRUE |
| loading | loading | When true, a busy indicator is displayed on the primary button. | boolean | TRUE |
| overlayPositioning | overlay-positioning | Determines the type of positioning to use for the overlaid content. Using "absolute" will work for most cases. The component will be positioned inside of overflowing parent containers and will affect the container's layout. "fixed" should be used to escape an overflowing parent container, or when the reference element's position CSS property is "fixed". | "absolute" | "fixed" | TRUE |
| placement | placement | Determines where the component will be positioned relative to the container element. | "bottom" | "bottom-end" | "bottom-start" | "top" | "top-end" | "top-start" | TRUE |
| primaryIconEnd | primary-icon-end | Specifies an icon to display at the end of the primary button. | string | TRUE |
| primaryIconFlipRtl | primary-icon-flip-rtl | Displays the primaryIconStart and/or primaryIconEnd as flipped when the element direction is right-to-left ("rtl"). | "both" | "end" | "start" | TRUE |
| primaryIconStart | primary-icon-start | Specifies an icon to display at the start of the primary button. | string | TRUE |
| primaryLabel | primary-label | Accessible name for the primary button. | string | TRUE |
| primaryText | primary-text | Text displayed in the primary button. | string | TRUE |
| scale | scale | Specifies the size of the component. | "l" | "m" | "s" | TRUE |
| width | width | Check API reference | "auto" | "full" | "half" | TRUE |
Events
The following events are observed by shiny:
| Event | Description |
| calciteSplitButtonPrimaryClick | Fires when the primary button is clicked. |
| calciteSplitButtonSecondaryClick | Fires when the dropdown menu is clicked. |
Slots
The following slots are provided by this component:
| Slot | Description |
| Default (unnamed) | A slot for adding calcite-dropdown content. |
Value
an object of class calcite_component which is a subclass of shiny.tag
References
Examples
calcite_split_button()
Create a Stepper component
Description
Create a Stepper component
Usage
calcite_stepper(...)
Arguments
... |
named attributes passed to |
Details
Properties
The following properties are provided by this component:
| Name | Attribute | Description | Values | Reflects to Attribute |
| icon | icon | When true, displays a status icon in the calcite-stepper-item heading. | boolean | TRUE |
| layout | layout | Defines the layout of the component. | "horizontal" | "horizontal-single" | "vertical" | TRUE |
| messageOverrides | NA | Use this property to override individual strings used by the component. | Check API reference | FALSE |
| numbered | numbered | When true, displays the step number in the calcite-stepper-item heading. | boolean | TRUE |
| numberingSystem | numbering-system | Specifies the Unicode numeral system used by the component for localization. | "arab" | "arabext" | "latn" | TRUE |
| scale | scale | Specifies the size of the component. | "l" | "m" | "s" | TRUE |
| selectedItem | NA | Specifies the component's selected item. | HTMLCalciteStepperItemElement | FALSE |
Events
The following events are observed by shiny:
| Event | Description |
| calciteStepperChange | Fires when the active calcite-stepper-item changes. |
| calciteStepperItemChange | Fires when the active calcite-stepper-item changes. |
Slots
The following slots are provided by this component:
| Slot | Description |
| Default (unnamed) | A slot for adding calcite-stepper-item elements. |
Value
an object of class calcite_component which is a subclass of shiny.tag
References
Examples
calcite_stepper()
Create a StepperItem component
Description
Create a StepperItem component
Usage
calcite_stepper_item(...)
Arguments
... |
named attributes passed to |
Details
Properties
The following properties are provided by this component:
| Name | Attribute | Description | Values | Reflects to Attribute |
| complete | complete | When true, the step has been completed. | boolean | TRUE |
| description | description | A description for the component. Displays below the header text. | string | FALSE |
| disabled | disabled | When true, interaction is prevented and the component is displayed with lower opacity. | boolean | TRUE |
| error | error | When true, the component contains an error that requires resolution from the user. | boolean | TRUE |
| heading | heading | The component header text. | string | FALSE |
| iconFlipRtl | icon-flip-rtl | When true, the icon will be flipped when the element direction is right-to-left ("rtl"). | boolean | TRUE |
| messageOverrides | NA | Use this property to override individual strings used by the component. | Check API reference | FALSE |
| selected | selected | When true, the component is selected. | boolean | TRUE |
Events
The following events are observed by shiny:
| Event | Description |
| calciteStepperItemSelect | Fires when the active calcite-stepper-item changes. |
Slots
The following slots are provided by this component:
| Slot | Description |
| Default (unnamed) | A slot for adding custom content. |
Value
an object of class calcite_component which is a subclass of shiny.tag
References
Examples
calcite_stepper_item()
Create a Switch component
Description
Create a Switch component
Usage
calcite_switch(...)
Arguments
... |
named attributes passed to |
Details
Properties
The following properties are provided by this component:
| Name | Attribute | Description | Values | Reflects to Attribute |
| checked | checked | When true, the component is checked. | boolean | TRUE |
| disabled | disabled | When true, interaction is prevented and the component is displayed with lower opacity. | boolean | TRUE |
| form | form | The id of the form that will be associated with the component. When not set, the component will be associated with its ancestor form element, if any. | string | TRUE |
| label | label | Accessible name for the component. | string | FALSE |
| name | name | Specifies the name of the component. Required to pass the component's value on form submission. | string | TRUE |
| scale | scale | Specifies the size of the component. | "l" | "m" | "s" | TRUE |
| value | value | The component's value. | any | FALSE |
Events
The following events are observed by shiny:
| Event | Description |
| calciteSwitchChange | Fires when the checked value has changed. |
Value
an object of class calcite_component which is a subclass of shiny.tag
References
Examples
calcite_switch()
Create a Tab component
Description
Create a Tab component
Usage
calcite_tab(...)
Arguments
... |
named attributes passed to |
Details
Properties
The following properties are provided by this component:
| Name | Attribute | Description | Values | Reflects to Attribute |
| selected | selected | When true, the component's contents are selected. Only one tab can be selected within the calcite-tabs parent. | boolean | TRUE |
| tab | tab | Specifies a unique name for the component. When specified, use the same value on the calcite-tab-title. | string | TRUE |
Slots
The following slots are provided by this component:
| Slot | Description |
| Default (unnamed) | A slot for adding custom content. |
Value
an object of class calcite_component which is a subclass of shiny.tag
References
Examples
calcite_tab()
Create a TabNav component
Description
Create a TabNav component
Usage
calcite_tab_nav(...)
Arguments
... |
named attributes passed to |
Details
Properties
The following properties are provided by this component:
| Name | Attribute | Description | Values | Reflects to Attribute |
| messageOverrides | NA | Use this property to override individual strings used by the component. | Check API reference | FALSE |
| position | position | Specifies the position of calcite-tab-nav and calcite-tab-title components in relation to, and is inherited from the parent calcite-tabs, defaults to top. @internal | "bottom" | "top" | FALSE |
| selectedTitle | NA | Specifies the component's selected calcite-tab-title. | HTMLCalciteTabTitleElement | FALSE |
| storageId | storage-id | Specifies the name when saving selected calcite-tab data to localStorage. | string | TRUE |
| syncId | sync-id | Specifies text to update multiple components to keep in sync if one changes. | string | TRUE |
Events
The following events are observed by shiny:
| Event | Description |
| calciteTabChange | Emits when the selected calcite-tab changes. |
Slots
The following slots are provided by this component:
| Slot | Description |
| Default (unnamed) | A slot for adding calcite-tab-titles. |
Value
an object of class calcite_component which is a subclass of shiny.tag
References
Examples
calcite_tab_nav()
Create a TabTitle component
Description
Create a TabTitle component
Usage
calcite_tab_title(...)
Arguments
... |
named attributes passed to |
Details
Tab-titles are optionally individually closable.
Properties
The following properties are provided by this component:
| Name | Attribute | Description | Values | Reflects to Attribute |
| closable | closable | When true, a close button is added to the component. | boolean | TRUE |
| closed | closed | When true, does not display or position the component. | boolean | TRUE |
| disabled | disabled | When true, interaction is prevented and the component is displayed with lower opacity. | boolean | TRUE |
| iconEnd | icon-end | Specifies an icon to display at the end of the component. | string | TRUE |
| iconFlipRtl | icon-flip-rtl | Displays the iconStart and/or iconEnd as flipped when the element direction is right-to-left ("rtl"). | "both" | "end" | "start" | TRUE |
| iconStart | icon-start | Specifies an icon to display at the start of the component. | string | TRUE |
| messageOverrides | NA | Use this property to override individual strings used by the component. | Check API reference | FALSE |
| position | position | Specifies the position of calcite-tab-nav and calcite-tab-title components in relation to, and is inherited from the parent calcite-tabs, defaults to top. @internal | "bottom" | "top" | FALSE |
| selected | selected | When true, the component and its respective calcite-tab contents are selected. Only one tab can be selected within the calcite-tabs parent. | boolean | TRUE |
| tab | tab | Specifies a unique name for the component. When specified, use the same value on the calcite-tab. | string | TRUE |
Events
The following events are observed by shiny:
| Event | Description |
| calciteTabsActivate | Fires when a calcite-tab is selected. |
| calciteTabsClose | Fires when a calcite-tab is closed. |
Slots
The following slots are provided by this component:
| Slot | Description |
| Default (unnamed) | A slot for adding text. |
Value
an object of class calcite_component which is a subclass of shiny.tag
References
Examples
calcite_tab_title()
Create a Table component
Description
Create a Table component
Usage
calcite_table(...)
Arguments
... |
named attributes passed to |
Details
Properties
The following properties are provided by this component:
| Name | Attribute | Description | Values | Reflects to Attribute |
| bordered | bordered | When true, displays borders in the component. | boolean | TRUE |
| caption | caption | Specifies an accessible title for the component. | string | FALSE |
| groupSeparator | group-separator | When true, number values are displayed with a group separator corresponding to the language and country format. | boolean | TRUE |
| interactionMode | interaction-mode | When "interactive", allows focus and keyboard navigation of table-headers and table-cells. When "static", prevents focus and keyboard navigation of table-headers and table-cells when assistive technologies are not active. Selection affordances and slotted content within table-cells remain focusable. | "interactive" | "static" | TRUE |
| layout | layout | Specifies the layout of the component. | "auto" | "fixed" | TRUE |
| messageOverrides | NA | Use this property to override individual strings used by the component. | Check API reference | FALSE |
| numbered | numbered | When true, displays the position of the row in numeric form. | boolean | TRUE |
| numberingSystem | numbering-system | Specifies the Unicode numeral system used by the component for localization. | "arab" | "arabext" | "latn" | TRUE |
| pageSize | page-size | Specifies the page size of the component. When true, renders calcite-pagination. | number | TRUE |
| scale | scale | Specifies the size of the component. | "l" | "m" | "s" | TRUE |
| selectedItems | NA | Specifies the component's selected items. | Check API reference | FALSE |
| selectionDisplay | selection-display | Specifies the display of the selection interface when selection-mode is not "none". When "none", content slotted the selection-actions slot will not be displayed. | "none" | "top" | TRUE |
| selectionMode | selection-mode | Specifies the selection mode of the component, where: "multiple" allows any number of selections, "single" allows only one selection, and "none" does not allow any selections. | "multiple" | "none" | "single" | TRUE |
| striped | striped | When true, displays striped styling in the component. | boolean | TRUE |
Events
The following events are observed by shiny:
| Event | Description |
| calciteTablePageChange | Emits when the component's page selection changes. |
| calciteTableSelect | Emits when the component's selected rows change. |
Slots
The following slots are provided by this component:
| Slot | Description |
| Default (unnamed) | A slot for adding calcite-table-row elements containing calcite-table-cell and/or calcite-table-header elements. |
| table-header | A slot for adding calcite-table-row elements containing calcite-table-header elements. |
| table-footer | A slot for adding calcite-table-row elements containing calcite-table-cell and/or calcite-table-header elements. |
| selection-actions | A slot for adding calcite-actions or other elements to display when selectionMode is not "none" and selectionDisplay is not "none". |
Value
an object of class calcite_component which is a subclass of shiny.tag
References
Examples
calcite_table()
Create a TableCell component
Description
Create a TableCell component
Usage
calcite_table_cell(...)
Arguments
... |
named attributes passed to |
Details
Properties
The following properties are provided by this component:
| Name | Attribute | Description | Values | Reflects to Attribute |
| alignment | alignment | Specifies the alignment of the component. | "center" | "end" | "start" | TRUE |
| colSpan | col-span | Specifies the number of columns the component should span. | number | TRUE |
| messageOverrides | NA | Use this property to override individual strings used by the component. | Check API reference | FALSE |
| rowSpan | row-span | Specifies the number of rows the component should span. | number | TRUE |
Slots
The following slots are provided by this component:
| Slot | Description |
| Default (unnamed) | A slot for adding content, usually text content. |
Value
an object of class calcite_component which is a subclass of shiny.tag
References
Examples
calcite_table_cell()
Create a TableHeader component
Description
Create a TableHeader component
Usage
calcite_table_header(...)
Arguments
... |
named attributes passed to |
Details
Properties
The following properties are provided by this component:
| Name | Attribute | Description | Values | Reflects to Attribute |
| alignment | alignment | Specifies the alignment of the component. | "center" | "end" | "start" | TRUE |
| colSpan | col-span | Specifies the number of columns the component should span. | number | TRUE |
| description | description | A description to display beneath heading content. | string | TRUE |
| heading | heading | A heading to display above description content. | string | TRUE |
| messageOverrides | NA | Use this property to override individual strings used by the component. | Check API reference | FALSE |
| rowSpan | row-span | Specifies the number of rows the component should span. | number | TRUE |
Value
an object of class calcite_component which is a subclass of shiny.tag
References
Examples
calcite_table_header()
Create a TableRow component
Description
Create a TableRow component
Usage
calcite_table_row(...)
Arguments
... |
named attributes passed to |
Details
Properties
The following properties are provided by this component:
| Name | Attribute | Description | Values | Reflects to Attribute |
| alignment | alignment | Specifies the alignment of the component. | "center" | "end" | "start" | TRUE |
| disabled | disabled | When true, interaction is prevented and the component is displayed with lower opacity. | boolean | TRUE |
| selected | selected | When true, the component is selected. | boolean | TRUE |
Events
The following events are observed by shiny:
| Event | Description |
| calciteTableRowSelect | Fires when the selected state of the component changes. |
Slots
The following slots are provided by this component:
| Slot | Description |
| Default (unnamed) | A slot for adding calcite-table-cell or calcite-table-header elements. |
Value
an object of class calcite_component which is a subclass of shiny.tag
References
Examples
calcite_table_row()
Create a Tabs component
Description
Create a Tabs component
Usage
calcite_tabs(...)
Arguments
... |
named attributes passed to |
Details
Properties
The following properties are provided by this component:
| Name | Attribute | Description | Values | Reflects to Attribute |
| bordered | bordered | When true, the component will display with a folder style menu. | boolean | FALSE |
| layout | layout | Specifies the layout of the calcite-tab-nav, justifying the calcite-tab-titles to the start ("inline"), or across and centered ("center"). | "center" | "inline" | TRUE |
| position | position | Specifies the position of calcite-tab-nav and calcite-tab-title components in relation to the calcite-tabs. | "bottom" | "top" | TRUE |
| scale | scale | Specifies the size of the component. | "l" | "m" | "s" | TRUE |
Slots
The following slots are provided by this component:
| Slot | Description |
| Default (unnamed) | A slot for adding calcite-tabs. |
| title-group | A slot for adding a calcite-tab-nav. |
Value
an object of class calcite_component which is a subclass of shiny.tag
References
Examples
calcite_tabs()
Create a TextArea component
Description
Create a TextArea component
Usage
calcite_text_area(...)
Arguments
... |
named attributes passed to |
Details
Properties
The following properties are provided by this component:
| Name | Attribute | Description | Values | Reflects to Attribute |
| columns | columns | Specifies the component's number of columns. | number | TRUE |
| disabled | disabled | When true, interaction is prevented and the component is displayed with lower opacity. | boolean | TRUE |
| form | form | The id of the form that will be associated with the component. When not set, the component will be associated with its ancestor form element, if any. | string | TRUE |
| groupSeparator | group-separator | When true, number values are displayed with a group separator corresponding to the language and country format. | boolean | TRUE |
| label | label | Accessible name for the component. | string | FALSE |
| limitText | limit-text | Check API reference | boolean | TRUE |
| maxLength | max-length | When the component resides in a form, specifies the maximum number of characters allowed. | number | TRUE |
| messageOverrides | NA | Use this property to override individual strings used by the component. | Check API reference | FALSE |
| minLength | min-length | When the component resides in a form, specifies the minimum number of characters allowed. | number | TRUE |
| name | name | Specifies the name of the component. | string | TRUE |
| numberingSystem | numbering-system | Specifies the Unicode numeral system used by the component for localization. | "arab" | "arabext" | "latn" | FALSE |
| placeholder | placeholder | Specifies the placeholder text for the component. | string | FALSE |
| readOnly | read-only | When true, the component's value can be read, but cannot be modified. | boolean | TRUE |
| required | required | When true and the component resides in a form, the component must have a value in order for the form to submit. | boolean | TRUE |
| resize | resize | Specifies if the component is resizable. | "both" | "horizontal" | "none" | "vertical" | TRUE |
| rows | rows | Specifies the component's number of rows. | number | TRUE |
| scale | scale | Specifies the size of the component. | "l" | "m" | "s" | TRUE |
| status | status | Specifies the status of the input field, which determines message and icons. | "idle" | "invalid" | "valid" | TRUE |
| validationIcon | validation-icon | Specifies the validation icon to display under the component. | boolean | string | TRUE |
| validationMessage | validation-message | Specifies the validation message to display under the component. | string | FALSE |
| validity | NA | The current validation state of the component. | Check API reference | FALSE |
| value | value | The component's value. | string | FALSE |
| wrap | wrap | Specifies the wrapping mechanism for the text. | "hard" | "soft" | TRUE |
Events
The following events are observed by shiny:
| Event | Description |
| calciteTextAreaChange | Fires each time a new value is typed and committed. |
| calciteTextAreaInput | Fires each time a new value is typed. |
Slots
The following slots are provided by this component:
| Slot | Description |
| Default (unnamed) | A slot for adding text. |
| footer-start | A slot for adding content to the start of the component's footer. |
| footer-end | A slot for adding content to the end of the component's footer. |
Value
an object of class calcite_component which is a subclass of shiny.tag
References
Examples
calcite_text_area()
Create a Tile component
Description
Create a Tile component
Usage
calcite_tile(...)
Arguments
... |
named attributes passed to |
Details
Properties
The following properties are provided by this component:
| Name | Attribute | Description | Values | Reflects to Attribute |
| active | active | When true, the component is active. | boolean | TRUE |
| alignment | alignment | Specifies the alignment of the Tile's content. | "center" | "start" | TRUE |
| description | description | A description for the component, which displays below the heading. | string | TRUE |
| disabled | disabled | When true, interaction is prevented and the component is displayed with lower opacity. | boolean | TRUE |
| embed | embed | The component's embed mode. When true, renders without a border and padding for use by other components. | boolean | TRUE |
| heading | heading | The component header text, which displays between the icon and description. | string | TRUE |
| href | href | When embed is "false", the URL for the component. | string | TRUE |
| icon | icon | Specifies an icon to display. | string | TRUE |
| iconFlipRtl | icon-flip-rtl | When true, the icon will be flipped when the element direction is right-to-left ("rtl"). | boolean | TRUE |
| label | label | Accessible name for the component. | string | FALSE |
| scale | scale | Specifies the size of the component. | "l" | "m" | "s" | TRUE |
| selected | selected | When true and the parent's selectionMode is "single", "single-persist"', or "multiple"`, the component is selected. | boolean | TRUE |
Events
The following events are observed by shiny:
| Event | Description |
| calciteTileSelect | Fires when the selected state of the component changes. |
Slots
The following slots are provided by this component:
| Slot | Description |
| content-top | A slot for adding non-actionable elements above the component's content. Content slotted here will render in place of the icon property. |
| content-bottom | A slot for adding non-actionable elements below the component's content. |
| content-start | Deprecated use content-top slot instead. A slot for adding non-actionable elements before the component's content. |
| content-end | Deprecated use content-bottom slot instead. A slot for adding non-actionable elements after the component's content. |
Value
an object of class calcite_component which is a subclass of shiny.tag
References
Examples
calcite_tile()
Create a TileGroup component
Description
Create a TileGroup component
Usage
calcite_tile_group(...)
Arguments
... |
named attributes passed to |
Details
Properties
The following properties are provided by this component:
| Name | Attribute | Description | Values | Reflects to Attribute |
| alignment | alignment | Specifies the alignment of each calcite-tile's content. | "center" | "start" | TRUE |
| disabled | disabled | When true, interaction is prevented and the component is displayed with lower opacity. | boolean | TRUE |
| label | label | Accessible name for the component. | string | FALSE |
| layout | layout | Defines the layout of the component. Use "horizontal" for rows, and "vertical" for a single column. | "horizontal" | "vertical" | TRUE |
| scale | scale | Specifies the size of the component. | "l" | "m" | "s" | TRUE |
| selectedItems | NA | Specifies the component's selected items. | Check API reference | FALSE |
| selectionAppearance | selection-appearance | Specifies the selection appearance, where: - "icon" (displays a checkmark or dot), or - "border" (displays a border). | "border" | "icon" | TRUE |
| selectionMode | selection-mode | Specifies the selection mode, where: - "multiple" (allows any number of selected items), - "single" (allows only one selected item), - "single-persist" (allows only one selected item and prevents de-selection), - "none" (allows no selected items). | "multiple" | "none" | "single" | "single-persist" | TRUE |
Events
The following events are observed by shiny:
| Event | Description |
| calciteTileGroupSelect | Fires when the component's selection changes. |
Slots
The following slots are provided by this component:
| Slot | Description |
| Default (unnamed) | A slot for adding calcite-tile elements. |
Value
an object of class calcite_component which is a subclass of shiny.tag
References
Examples
calcite_tile_group()
Create a TileSelect component
Description
Use the calcite-tile component instead.
Usage
calcite_tile_select(...)
Arguments
... |
named attributes passed to |
Details
Properties
The following properties are provided by this component:
| Name | Attribute | Description | Values | Reflects to Attribute |
| checked | checked | When true, the component is checked. | boolean | TRUE |
| description | description | A description for the component, which displays below the heading. | string | TRUE |
| disabled | disabled | When true, interaction is prevented and the component is displayed with lower opacity. | boolean | TRUE |
| heading | heading | The component header text, which displays between the icon and description. | string | TRUE |
| icon | icon | Specifies an icon to display. | string | TRUE |
| iconFlipRtl | icon-flip-rtl | When true, the icon will be flipped when the element direction is right-to-left ("rtl"). | boolean | TRUE |
| inputAlignment | input-alignment | When inputEnabled is true, specifies the placement of the interactive input on the component. | "end" | "start" | TRUE |
| inputEnabled | input-enabled | When true, displays an interactive input based on the type property. | boolean | TRUE |
| name | name | Specifies the name of the component on form submission. | any | TRUE |
| type | type | Specifies the selection mode of the component, where: "radio" is for single selection, and "checkbox" is for multiple selections. | "checkbox" | "radio" | TRUE |
| value | value | The component's value. | any | FALSE |
| width | width | Specifies the width of the component. | "auto" | "full" | TRUE |
Events
The following events are observed by shiny:
| Event | Description |
| calciteTileSelectChange | Emits a custom change event. For checkboxes it emits when checked or unchecked. For radios it only emits when checked. |
Slots
The following slots are provided by this component:
| Slot | Description |
| Default (unnamed) | A slot for adding custom content. |
Value
an object of class calcite_component which is a subclass of shiny.tag
References
Examples
calcite_tile_select()
Create a TileSelectGroup component
Description
Use the calcite-tile-group component instead.
Usage
calcite_tile_select_group(...)
Arguments
... |
named attributes passed to |
Details
Properties
The following properties are provided by this component:
| Name | Attribute | Description | Values | Reflects to Attribute |
| disabled | disabled | When true, interaction is prevented and the component is displayed with lower opacity. | boolean | TRUE |
| layout | layout | Defines the layout of the component. Use "horizontal" for rows, and "vertical" for a single column. | "horizontal" | "vertical" | TRUE |
Slots
The following slots are provided by this component:
| Slot | Description |
| Default (unnamed) | A slot for adding calcite-tile-select elements. |
Value
an object of class calcite_component which is a subclass of shiny.tag
References
Examples
calcite_tile_select_group()
Create a TimePicker component
Description
Create a TimePicker component
Usage
calcite_time_picker(...)
Arguments
... |
named attributes passed to |
Details
Properties
The following properties are provided by this component:
| Name | Attribute | Description | Values | Reflects to Attribute |
| hourFormat | hour-format | Specifies the component's hour format, where: "user" displays the user's locale format, "12" displays a 12-hour format, and "24" displays a 24-hour format. | "12" | "24" | "user" | TRUE |
| messageOverrides | NA | Use this property to override individual strings used by the component. | Check API reference | FALSE |
| numberingSystem | numbering-system | Specifies the Unicode numeral system used by the component for localization. | "arab" | "arabext" | "latn" | FALSE |
| scale | scale | Specifies the size of the component. | "l" | "m" | "s" | TRUE |
| step | step | Specifies the granularity the value must adhere to (in seconds). | number | TRUE |
| value | value | The component's value in UTC (always 24-hour format). | string | FALSE |
Events
The following events are observed by shiny:
| Event | Description |
| calciteTimePickerChange | |
Value
an object of class calcite_component which is a subclass of shiny.tag
References
Examples
calcite_time_picker()
Create a Tip component
Description
Use the calcite-card, calcite-notice, calcite-panel, or calcite-tile component instead.
Usage
calcite_tip(...)
Arguments
... |
named attributes passed to |
Details
Properties
The following properties are provided by this component:
| Name | Attribute | Description | Values | Reflects to Attribute |
| closed | closed | When true, the component does not display. | boolean | TRUE |
| closeDisabled | close-disabled | When true, the close button is not present on the component. | boolean | TRUE |
| heading | heading | The component header text. | string | FALSE |
| headingLevel | heading-level | Specifies the heading level of the component's heading for proper document structure, without affecting visual styling. | 1 | 2 | 3 | 4 | 5 | 6 | TRUE |
| messageOverrides | NA | Use this property to override individual strings used by the component. | Check API reference | FALSE |
| selected | selected | When true, the component is selected if it has a parent calcite-tip-manager. Only one tip can be selected within the calcite-tip-manager parent. | boolean | TRUE |
Events
The following events are observed by shiny:
| Event | Description |
| calciteTipDismiss | Emits when the component has been closed. |
Slots
The following slots are provided by this component:
| Slot | Description |
| Default (unnamed) | A slot for adding text and a hyperlink. |
| thumbnail | A slot for adding an HTML image element. |
Value
an object of class calcite_component which is a subclass of shiny.tag
References
Examples
calcite_tip()
Create a TipGroup component
Description
Use the calcite-carousel and calcite-carousel-item components instead.
Usage
calcite_tip_group(...)
Arguments
... |
named attributes passed to |
Details
Properties
The following properties are provided by this component:
| Name | Attribute | Description | Values | Reflects to Attribute |
| groupTitle | group-title | The component header text for all nested calcite-tips. | string | FALSE |
Slots
The following slots are provided by this component:
| Slot | Description |
| Default (unnamed) | A slot for adding calcite-tips. |
Value
an object of class calcite_component which is a subclass of shiny.tag
References
Examples
calcite_tip_group()
Create a TipManager component
Description
Use the calcite-carousel and calcite-carousel-item components instead.
Usage
calcite_tip_manager(...)
Arguments
... |
named attributes passed to |
Details
Properties
The following properties are provided by this component:
| Name | Attribute | Description | Values | Reflects to Attribute |
| closed | closed | When true, does not display or position the component. | boolean | TRUE |
| headingLevel | heading-level | Specifies the heading level of the component's heading for proper document structure, without affecting visual styling. | 1 | 2 | 3 | 4 | 5 | 6 | TRUE |
| messageOverrides | NA | Use this property to override individual strings used by the component. | Check API reference | FALSE |
Events
The following events are observed by shiny:
| Event | Description |
| calciteTipManagerClose | Emits when the component has been closed. |
Slots
The following slots are provided by this component:
| Slot | Description |
| Default (unnamed) | A slot for adding calcite-tips. |
Value
an object of class calcite_component which is a subclass of shiny.tag
References
Examples
calcite_tip_manager()
Create a Tooltip component
Description
Create a Tooltip component
Usage
calcite_tooltip(...)
Arguments
... |
named attributes passed to |
Details
Properties
The following properties are provided by this component:
| Name | Attribute | Description | Values | Reflects to Attribute |
| closeOnClick | close-on-click | Closes the component when the referenceElement is clicked. | boolean | TRUE |
| label | label | Accessible name for the component. | string | FALSE |
| offsetDistance | offset-distance | Offset the position of the component away from the referenceElement. | number | TRUE |
| offsetSkidding | offset-skidding | Offset the position of the component along the referenceElement. | number | TRUE |
| open | open | When true, the component is open. | boolean | TRUE |
| overlayPositioning | overlay-positioning | Determines the type of positioning to use for the overlaid content. Using "absolute" will work for most cases. The component will be positioned inside of overflowing parent containers and will affect the container's layout. The "fixed" value should be used to escape an overflowing parent container, or when the reference element's position CSS property is "fixed". | "absolute" | "fixed" | TRUE |
| placement | placement | Determines where the component will be positioned relative to the referenceElement. | "auto" | "auto-end" | "auto-start" | "bottom" | "bottom-end" | "bottom-start" | "leading" | "leading-end" | "leading-start" | "left" | "left-end" | "left-start" | "right" | "right-end" | "right-start" | "top" | "top-end" | "top-start" | "trailing" | "trailing-end" | "trailing-start" | TRUE |
| referenceElement | reference-element | The referenceElement to position the component according to its "placement" value. Setting to the HTMLElement is preferred so the component does not need to query the DOM for the referenceElement. However, a string ID of the reference element can be used. | Element | VirtualElement | string | FALSE |
Events
The following events are observed by shiny:
| Event | Description |
| calciteTooltipBeforeClose | Fires when the component is requested to be closed and before the closing transition begins. |
| calciteTooltipBeforeOpen | Fires when the component is added to the DOM but not rendered, and before the opening transition begins. |
| calciteTooltipClose | Fires when the component is closed and animation is complete. |
| calciteTooltipOpen | Fires when the component is open and animation is complete. |
Slots
The following slots are provided by this component:
| Slot | Description |
| Default (unnamed) | A slot for adding text. |
Value
an object of class calcite_component which is a subclass of shiny.tag
References
Examples
calcite_tooltip()
Create a Tree component
Description
Create a Tree component
Usage
calcite_tree(...)
Arguments
... |
named attributes passed to |
Details
Properties
The following properties are provided by this component:
| Name | Attribute | Description | Values | Reflects to Attribute |
| lines | lines | When true, displays indentation guide lines. | boolean | TRUE |
| scale | scale | Specifies the size of the component. | "l" | "m" | "s" | TRUE |
| selectedItems | NA | Specifies the component's selected items. | Check API reference | FALSE |
| selectionMode | selection-mode | Specifies the selection mode of the component, where: "ancestors" displays with a checkbox and allows any number of selections from corresponding parent and child selections, "children" allows any number of selections from one parent from corresponding parent and child selections, "multichildren" allows any number of selections from corresponding parent and child selections, "multiple" allows any number of selections, "none" allows no selections, "single" allows one selection, and "single-persist" allows and requires one selection. | "ancestors" | "children" | "multichildren" | "multiple" | "none" | "single" | "single-persist" | TRUE |
Events
The following events are observed by shiny:
| Event | Description |
| calciteTreeSelect | Fires when the user selects/deselects calcite-tree-items. |
Slots
The following slots are provided by this component:
| Slot | Description |
| Default (unnamed) | A slot for calcite-tree-item elements. |
Value
an object of class calcite_component which is a subclass of shiny.tag
References
Examples
calcite_tree()
Create a TreeItem component
Description
Create a TreeItem component
Usage
calcite_tree_item(...)
Arguments
... |
named attributes passed to |
Details
Properties
The following properties are provided by this component:
| Name | Attribute | Description | Values | Reflects to Attribute |
| disabled | disabled | When true, interaction is prevented and the component is displayed with lower opacity. | boolean | TRUE |
| expanded | expanded | When true, the component is expanded. | boolean | TRUE |
| iconFlipRtl | icon-flip-rtl | When true, the icon will be flipped when the element direction is right-to-left ("rtl"). | "both" | "end" | "start" | TRUE |
| iconStart | icon-start | Specifies an icon to display at the start of the component. | string | TRUE |
| label | label | Accessible name for the component. | string | FALSE |
| selected | selected | When true, the component is selected. | boolean | TRUE |
Slots
The following slots are provided by this component:
| Slot | Description |
| Default (unnamed) | A slot for adding text. |
| children | A slot for adding nested calcite-tree elements. |
| actions-end | A slot for adding actions to the end of the component. It is recommended to use two or fewer actions. |
Value
an object of class calcite_component which is a subclass of shiny.tag
References
Examples
calcite_tree_item()
Calcite components version
Description
Reports the currently used calcite component version.
Usage
calcite_version()
Value
a character scalar
Examples
calcite_version()
Update Calcite Component Properties
Description
Updates the properties of the javascript Calcite component.
Usage
update_calcite(id, ..., session = shiny::getDefaultReactiveDomain())
Arguments
id |
the html ID of the element to update. Must be a character scalar. |
... |
named properties to be updated in the component. The names must match the property name. Otherwise, will fail silently. |
session |
a shiny session object. Default |
Value
NULL. Sends a message to the shiny session object.
Examples
# this cannot work outside of shiny
if (interactive()) {
library(shiny)
ui <- calcite_shell(
calcite_card(
heading = "Content",
calcite_label(
layout = "inline",
calcite_checkbox(id = "checked"),
"Click me"
)
),
calcite_notice(
id = "initial-note",
div(slot = "title", "Nice!"),
div(slot = "message", "This is a success message")
)
)
server <- function(input, output, session) {
observeEvent(input$checked_checked, {
checked <- input$checked_checked$values
# Update the `initial-note` property here
update_calcite("initial-note", open = checked)
})
}
shinyApp(ui, server)
}