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
|
|
||
| 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.
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
|
|
||
| The `AppNavItem` component provides the `setTarget()` method, which allows you to control the behavior of each navigation item when it's clicked. By default, items open in the current browsing context, but you can customize this with the `NavigationTarget` options: | ||
|
|
||
| - **SELF**: This is the default option and opens in the current browsing context. |
There was a problem hiding this comment.
📝 [vale] reported by reviewdog 🐶
[Google.Acronyms] Spell out 'SELF', if it's unfamiliar to the audience.
There was a problem hiding this comment.
Not an acronym leaving as is
| The `AppNavItem` component provides the `setTarget()` method, which allows you to control the behavior of each navigation item when it's clicked. By default, items open in the current browsing context, but you can customize this with the `NavigationTarget` options: | ||
|
|
||
| - **SELF**: This is the default option and opens in the current browsing context. | ||
| - **BLANK**: Opens the item in a new tab or window based on browser settings. |
There was a problem hiding this comment.
📝 [vale] reported by reviewdog 🐶
[Google.Acronyms] Spell out 'BLANK', if it's unfamiliar to the audience.
There was a problem hiding this comment.
Not an acronym leaving as is
|
|
||
| - **SELF**: This is the default option and opens in the current browsing context. | ||
| - **BLANK**: Opens the item in a new tab or window based on browser settings. | ||
| - **PARENT**: Opens in the parent browsing context; if there’s no parent, it behaves like SELF. |
There was a problem hiding this comment.
📝 [vale] reported by reviewdog 🐶
[Google.Acronyms] Spell out 'SELF', if it's unfamiliar to the audience.
There was a problem hiding this comment.
Not an acronym leaving as is
There was a problem hiding this comment.
Looks good Lauren - @hyyan this is ready for your review now :)
There was a problem hiding this comment.
@laurenic0l I've updated the requirements for #261. Please align the demos and the content with the updated requirements.
|
|
||
| Each `AppNavItem` requires a path or route that specifies where the navigation item will take users. This can be configured in two main ways: | ||
|
|
||
| **Direct Path**: You can assign a direct URL or path to an `AppNavItem`. This is helpful for static routes or URLs. |
There was a problem hiding this comment.
[Google.Colons] ': Y' should be in lowercase.
| appNav.addItem(helpItem); | ||
| ``` | ||
|
|
||
| **Registered View Class**: Alternatively, if you have views registered with your app’s router, you can pass a class reference for the view. This approach provides flexibility, as it allows navigation to specific views without hardcoding URLs. The router automatically resolves the view’s path based on the registered configuration. |
There was a problem hiding this comment.
[Google.Colons] ': A' should be in lowercase.
docs/components/appnav.md
Outdated
| topItem.setTarget(AppNavItem.NavigationTarget.TOP); // Opens in the top-level context | ||
| ``` | ||
|
|
||
| ## Item Prefix and Suffix |
There was a problem hiding this comment.
[Google.Headings] 'Item Prefix and Suffix' should use sentence-style capitalization.
docs/components/appnav.md
Outdated
|
|
||
| ## Item Prefix and Suffix | ||
|
|
||
| The `AppNavItem` component allows you to customize its appearance and functionality by adding prefixes and suffixes. These are useful for enhancing the visual design or providing additional context, such as icons, badges, or other indicators, alongside the item's text. |
There was a problem hiding this comment.
[Google.WordList] Use 'capability' or 'feature' instead of 'functionality'.
docs/components/appnav.md
Outdated
| notificationsItem.setSuffix(new Badge("3", Badge.Theme.INFO)); | ||
| ``` | ||
|
|
||
| Prefixes and suffixes improve clarity and provide additional functionality, ensuring a more intuitive user experience for your app's navigation. |
There was a problem hiding this comment.
[Google.WordList] Use 'capability' or 'feature' instead of 'functionality'.
|
|
||
| ## Parts and CSS properties | ||
|
|
||
| <TableBuilder tag={require('@site/docs/components/_dwc_control_map.json').AppNavItem} /> |
There was a problem hiding this comment.
📝 [vale] reported by reviewdog 🐶
[Google.Parens] Use parentheses judiciously.
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