docs(sidenav): update docs and add examples #7775
Conversation
googlebot
added
the
cla: yes
|
fixes #7159 |
|
|
||
| <!-- example(sidenav-position) --> | ||
|
|
||
| The following are examples of valid sidenav layouts: |
There was a problem hiding this comment.
What's the result of each valid example? Why are the invalid examples invalid?
e.g.
<!-- Creates a layout with a left-positioned sidenav. -->
<mat-sidenav-container>
<mat-sidenav>Start</mat-sidenav>
<mat-sidenav-content>Main</mat-sidenav-content>
</mat-sidenav-container><!-- Container has two sidenavs but both default to the same side. -->
<mat-sidenav-container>
<mat-sidenav>Start</mat-sidenav>
<mat-sidenav position="start">Start 2</mat-sidenav>
</mat-sidenav-container>
src/lib/sidenav/sidenav.md
Outdated
|
|
||
| <!-- example(sidenav-overview) --> | ||
|
|
||
| The sidenav and its associated content live inside of an `<mat-sidenav-container>`: | ||
| There are also drawer components, `<mat-drawer-container>`, `<mat-drawer-content>`, and |
There was a problem hiding this comment.
For easy skimming - start this like the previous paragraph.
The drawer component is designed to add side content to a small section of your app.
src/lib/sidenav/sidenav.md
Outdated
| The side content should be wrapped in a `<mat-sidenav>` element. The `position` property can be used | ||
| to specify which end of the main content to place the side content on. `position` can be either | ||
| `start` or `end` which places the side content on the left or right respectively in left-to-right | ||
| languages. If the `position` is not set, the `start` end will be assumed. A |
There was a problem hiding this comment.
If position is not set, its default value of start will be assumed.
|
|
||
| ### Setting the sidenav's size | ||
|
|
||
| The `<mat-sidenav>` and `<mat-drawer>` will, by default, fit the size of its content. The width can |
There was a problem hiding this comment.
Might need to mention that it will fit the size of its content just once - I've had issues where the sidenav fills in with items, then gets a scrollbar and the width changes but the sidenav doesn't update
src/lib/sidenav/sidenav.md
Outdated
| <mat-sidenav-container></mat-sidenav-container> | ||
| ``` | ||
|
|
||
| And these are examples of invalid sidenav layouts: |
There was a problem hiding this comment.
Is there an overwhelming use of people doing this wrong that made us want to show people how NOT to do it?
There was a problem hiding this comment.
They illustrate the restrictions mentioned above, but for people like me who are too lazy to read words that aren't code 😛
src/lib/sidenav/sidenav.md
Outdated
| A sidenav often needs to behave differently on a mobile vs a desktop display. On a desktop, it may |
There was a problem hiding this comment.
Might be useful to show how to make this happen.
There was a problem hiding this comment.
That's what the example linked at this point does
|
comments addressed, PTAL |
src/lib/sidenav/sidenav.md
Outdated
| describes your sidenav, `role="region"` is recommended. | ||
|
|
||
| Similarly, the `<mat-sidenav-contnet>` should be given a role based on what it contains. If it |
There was a problem hiding this comment.
There is a typo in<mat-sidenav-contnet> with regards to 'contnet'.
|
@amcdnl @andrewseguin any further comments? |
mmalerba
added
the
P2
|
rebased, @andrewseguin PTAL |
|
LGTM |
andrewseguin
added
action: merge
|
This issue has been automatically locked due to inactivity. Read more about our automatic conversation locking policy. This action has been performed automatically by a bot. |
No description provided.