PR - AppNav Doc #300
PR - AppNav Doc #300
Conversation
![github-actions[bot]](https://avatars.githubusercontent.com/in/15368?s=60&v=4){kind=small}
docs/components/appnav.md
Outdated
|
|
||
| <JavadocLink type="appnav" location="com/webforj/component/appnav/AppNav" top='true'/> | ||
|
|
||
| The `AppNav` component in webforJ serves as a structured navigation container, designed to organize and display a list of navigation items within an app. This component is particularly useful for creating sidebars or menus, where users can click to navigate between different sections of an application. |
There was a problem hiding this comment.
[Google.WordList] Use 'app' instead of 'application'.
docs/components/appnav.md
Outdated
|
|
||
| ## Configuring paths and routing | ||
|
|
||
| The `AppNav` component's navigation functionality relies on each `AppNavItem` being configured with a specific path or route, which enables it to link to different sections or views within an application. |
There was a problem hiding this comment.
[Google.WordList] Use 'capability' or 'feature' instead of 'functionality'.
docs/components/appnav.md
Outdated
|
|
||
| ## Configuring paths and routing | ||
|
|
||
| The `AppNav` component's navigation functionality relies on each `AppNavItem` being configured with a specific path or route, which enables it to link to different sections or views within an application. |
There was a problem hiding this comment.
[Google.WordList] Use 'app' instead of 'application'.
docs/components/appnav.md
Outdated
| ``` | ||
|
|
||
| :::caution Using registered view class | ||
| If the router is not initialized or the view isn’t registered, attempting to set the path with a view class will throw an exception. |
There was a problem hiding this comment.
📝 [vale] reported by reviewdog 🐶
[Google.Contractions] Use 'isn't' instead of 'is not'.
docs/components/appnav.md
Outdated
|
|
||
| ## Setting navigation targets | ||
|
|
||
| The `AppNavItem` component provides the `setTarget()` method, which allows you to control the behavior of each navigation item when it is clicked. By default, items open in the current browsing context, but you can customize this with the `NavigationTarget` options: |
There was a problem hiding this comment.
📝 [vale] reported by reviewdog 🐶
[Google.Contractions] Use 'it's' instead of 'it is'.
docs/components/appnav.md
Outdated
| ``` | ||
|
|
||
|
|
||
| ## Automatic Group Expansion |
There was a problem hiding this comment.
[Google.Headings] 'Automatic Group Expansion' should use sentence-style capitalization.
| ``` | ||
| ## Styling | ||
|
|
||
| ### Shadow Parts |
There was a problem hiding this comment.
[Google.Headings] 'Shadow Parts' should use sentence-style capitalization.
|
|
||
| These are the various parts of the [shadow DOM](../glossary#shadow-dom) for the `AppNavItem` component, which will be required when styling via CSS is desired. | ||
|
|
||
| <TableBuilder tag={require('@site/docs/components/_dwc_control_map.json').AppNavItem} table='parts' exclusions=''/> |
There was a problem hiding this comment.
📝 [vale] reported by reviewdog 🐶
[Google.Parens] Use parentheses judiciously.
| <TableBuilder tag={require('@site/docs/components/_dwc_control_map.json').AppNavItem} table='parts' exclusions=''/> | ||
|
|
||
|
|
||
| ### Reflected Attributes |
There was a problem hiding this comment.
[Google.Headings] 'Reflected Attributes' should use sentence-style capitalization.
|
|
||
| The reflected attributes of a `AppNavItem` component will be shown as attributes in the rendered HTML element for the component in the DOM. This means that styling can be applied using these attributes. | ||
|
|
||
| <TableBuilder tag={require('@site/docs/components/_dwc_control_map.json').AppNavItem} table="reflects" /> |
There was a problem hiding this comment.
📝 [vale] reported by reviewdog 🐶
[Google.Parens] Use parentheses judiciously.
There was a problem hiding this comment.
Just a couple small changes, otherwise this looks good.
@hyyan This is ready for your review when you have some time
docs/components/appnav.md
Outdated
|
|
||
| Each link or menu item in the navigation is represented by an `AppNavItem` which allows you to set a navigation path, add custom text, and include optional icons or other components as prefixes or suffixes. | ||
|
|
||
| To create a basic AppNav structure, you initialize the AppNav component and then add individual AppNavItem objects to represent the navigation links. |
There was a problem hiding this comment.
Please add the back ticks ( ` ) to the AppNav and AppNavItem words on this line, and anywhere else it's missing
Here's a first draft of the AppNav doc! Please let me know any changes that need to be made or anything I missed.
closes #261