shadowItems are elements that can contain text, icons, avatars, images, inputs, and any other native or custom elements. Generally they are placed in a list with other items. Items can be swiped, deleted, reordered, edited, and more.
Basic Usageโ
Items left align text and add an ellipsis when the text is wider than the item. We can modify this behavior using the CSS Utilities provided by Navify Framework, such as using .nav-text-wrap in the below example. See the CSS Utilities Documentation for more classes that can be added to an item to transform the text.
Clickable Itemsโ
An item is considered "clickable" if it has an href or button property set. Clickable items have a few visual differences that indicate they can be interacted with. For example, a clickable item receives the ripple effect upon activation in md mode, has a highlight when activated in ios mode, and has a detail arrow by default in ios mode.
Detail Arrowsโ
By default clickable items will display a right arrow icon on ios mode. To hide the right arrow icon on clickable elements, set the detail property to false. To show the right arrow icon on an item that doesn't display it naturally, set the detail property to true.
Item Linesโ
Items show an inset bottom border by default. The border has padding on the left and does not appear under any content that is slotted in the "start" slot. The lines property can be modified to "full" or "none" which will show a full width border or no border, respectively.
Avatars and Thumbnails can be slotted inside of an item. This is useful when making lists of images and text.
Buttons are styled smaller inside of items than when they are outside of them. To make the button size match buttons outside of an item, set the size attribute to "default".
Icons in Itemsโ
Helper & Error Textโ
Helper & error text can be used inside of an item with an input by slotting a note in the "helper" and "error" slots. The error slot will not be displayed unless the nav-invalid class is added to the nav-item. In JavaScript, React and Kdu, the class needs to be manually added based on your own validation.
Item Counterโ
The item counter is helper text that displays under an input to notify the user of how many characters have been entered out of the total that the input will accept. When adding counter, the default behavior is to format the value that gets displayed as inputLength / maxLength. This behavior can be customized by passing in a formatter function to the counterFormatter property.
Themingโ
CSS Shadow Partsโ
CSS Custom Propertiesโ
Items containing an input will highlight the bottom border of the input with a different color when focused, valid, or invalid. By default, md items have a highlight with a height set to 2px and ios has no highlight (technically the height is set to 0). The height can be changed using the --highlight-height CSS property. To turn off the highlight, set this variable to 0.
The highlight color changes based on the item state, but all of the states use Navify colors by default. When focused, the input highlight will use the primary color. If the input is valid it will use the success color, and invalid inputs will use the danger color. This can be customized using the provided CSS properties.
Propertiesโ
| Description | If true, a button tag will be rendered and the item will be tappable. |
| Attribute | button |
| Type | boolean |
| Default | false |
| Description | The color to use from your application's color palette. Default options are: "primary", "secondary", "tertiary", "success", "warning", "danger", "light", "medium", and "dark". For more information on colors, see theming. |
| Attribute | color |
| Type | "danger" ๏ฝ "dark" ๏ฝ "light" ๏ฝ "medium" ๏ฝ "primary" ๏ฝ "secondary" ๏ฝ "success" ๏ฝ "tertiary" ๏ฝ "warning" ๏ฝ string & Record<never, never> ๏ฝ undefined |
| Default | undefined |
counterโ
| Description | If true, a character counter will display the ratio of characters used and the total character limit. Only applies when the maxlength property is set on the inner nav-input or nav-textarea. |
| Attribute | counter |
| Type | boolean |
| Default | false |
| Description | A callback used to format the counter text. By default the counter text is set to "itemLength / maxLength". |
| Attribute | undefined |
| Type | ((inputLength: number, maxLength: number) => string) ๏ฝ undefined |
| Default | undefined |
| Description | If true, a detail arrow will appear on the item. Defaults to false unless the mode is ios and an href or button property is present. |
| Attribute | detail |
| Type | boolean ๏ฝ undefined |
| Default | undefined |
detailIconโ
| Description | The icon to use when detail is set to true. |
| Attribute | detail-icon |
| Type | string |
| Default | chevronForward |
disabledโ
| Description | If true, the user cannot interact with the item. |
| Attribute | disabled |
| Type | boolean |
| Default | false |
downloadโ
| Description | This attribute instructs browsers to download a URL instead of navigating to it, so the user will be prompted to save it as a local file. If the attribute has a value, it is used as the pre-filled file name in the Save prompt (the user can still change the file name if they want). |
| Attribute | download |
| Type | string ๏ฝ undefined |
| Default | undefined |
| Description | The fill for the item. If 'solid' the item will have a background. If 'outline' the item will be transparent with a border. Only available in md mode. |
| Attribute | fill |
| Type | "outline" ๏ฝ "solid" ๏ฝ undefined |
| Default | undefined |
| Description | Contains a URL or a URL fragment that the hyperlink points to. If this property is set, an anchor tag will be rendered. |
| Attribute | href |
| Type | string ๏ฝ undefined |
| Default | undefined |
| Description | How the bottom border should be displayed on the item. |
| Attribute | lines |
| Type | "full" ๏ฝ "inset" ๏ฝ "none" ๏ฝ undefined |
| Default | undefined |
| Description | The mode determines which platform styles to use. |
| Attribute | mode |
| Type | "ios" ๏ฝ "md" |
| Default | undefined |
| Description | Specifies the relationship of the target object to the link object. The value is a space-separated list of link types. |
| Attribute | rel |
| Type | string ๏ฝ undefined |
| Default | undefined |
routerAnimationโ
| Description | When using a router, it specifies the transition animation when navigating to another page using href. |
| Attribute | undefined |
| Type | ((baseEl: any, opts?: any) => Animation) ๏ฝ undefined |
| Default | undefined |
routerDirectionโ
| Description | When using a router, it specifies the transition direction when navigating to another page using href. |
| Attribute | router-direction |
| Type | "back" ๏ฝ "forward" ๏ฝ "root" |
| Default | 'forward' |
| Description | The shape of the item. If "round" it will have increased border radius. |
| Attribute | shape |
| Type | "round" ๏ฝ undefined |
| Default | undefined |
| Description | Specifies where to display the linked URL. Only applies when an href is provided. Special keywords: "_blank", "_self", "_parent", "_top". |
| Attribute | target |
| Type | string ๏ฝ undefined |
| Default | undefined |
| Description | The type of the button. Only used when an onclick or button property is present. |
| Attribute | type |
| Type | "button" ๏ฝ "reset" ๏ฝ "submit" |
| Default | 'button' |
No events available for this component.
Methodsโ
No public methods available for this component.
CSS Shadow Partsโ
| Name | Description |
|---|
detail-icon | The chevron icon for the item. Only applies when detail="true". |
native | The native HTML button, anchor or div element that wraps all child elements. |
CSS Custom Propertiesโ
| Name | Description |
|---|
--background | Background of the item |
--background-activated | Background of the item when pressed. Note: setting this will interfere with the Material Design ripple. |
--background-activated-opacity | Opacity of the item background when pressed |
--background-focused | Background of the item when focused with the tab key |
--background-focused-opacity | Opacity of the item background when focused with the tab key |
--background-hover | Background of the item on hover |
--background-hover-opacity | Opacity of the background of the item on hover |
--border-color | Color of the item border |
--border-radius | Radius of the item border |
--border-style | Style of the item border |
--border-width | Width of the item border |
--color | Color of the item |
--color-activated | Color of the item when pressed |
--color-focused | Color of the item when focused with the tab key |
--color-hover | Color of the item on hover |
--detail-icon-color | Color of the item detail icon |
--detail-icon-font-size | Font size of the item detail icon |
--detail-icon-opacity | Opacity of the item detail icon |
--highlight-color-focused | The color of the highlight on the item when focused |
--highlight-color-invalid | The color of the highlight on the item when invalid |
--highlight-color-valid | The color of the highlight on the item when valid |
--highlight-height | The height of the highlight on the item |
--inner-border-width | Width of the item inner border |
--inner-box-shadow | Box shadow of the item inner |
--inner-padding-bottom | Bottom padding of the item inner |
--inner-padding-end | Right padding if direction is left-to-right, and left padding if direction is right-to-left of the item inner |
--inner-padding-start | Left padding if direction is left-to-right, and right padding if direction is right-to-left of the item inner |
--inner-padding-top | Top padding of the item inner |
--min-height | Minimum height of the item |
--padding-bottom | Bottom padding of the item |
--padding-end | Right padding if direction is left-to-right, and left padding if direction is right-to-left of the item |
--padding-start | Left padding if direction is left-to-right, and right padding if direction is right-to-left of the item |
--padding-top | Top padding of the item |
--ripple-color | Color of the item ripple effect |
--transition | Transition of the item |
| Name | Description |
|---|
| `` | Content is placed between the named slots if provided without a slot. |
end | Content is placed to the right of the item text in LTR, and to the left in RTL. |
error | Content is placed under the item and displayed when an error is detected. |
helper | Content is placed under the item and displayed when no error is detected. |
start | Content is placed to the left of the item text in LTR, and to the right in RTL. |