docs(cdk/layout): better explain how layout breakpoints work #22821
Conversation
jelbourn
added
docs
google-cla
bot
added
the
cla: yes
src/cdk/layout/layout.md
Outdated
| size ranges between breakpoints correspond to different standard screen sizes. | ||
|
|
||
| `BreakpointObserver` lets you evaluate media queries to determine the current screen size and | ||
| react to changes when the viewport size changes and crosses a breakpoint. |
There was a problem hiding this comment.
Should we mention that the BreakpointObserver isn't limited to just screen size queries? You can use it for things like detecting dark mode or reduced motion.
There was a problem hiding this comment.
My thinking is that those things are unlikely to change in the middle of the app running, so you could just use MediaMatcher directly.
src/cdk/layout/layout.md
Outdated
| ```ts | ||
| const isSmallScreen = breakpointObserver.isMatched('(max-width: 599px)'); | ||
| ``` | ||
|
|
||
| #### React to changes to the viewport | ||
| The `observe` method is used to get an observable stream that will emit whenever one of the given | ||
| media queries would have a different result. | ||
| You can use the `observe` method to get an observable stream emits whenever the viewport size |
There was a problem hiding this comment.
observable stream emits -> observable stream that emits
src/cdk/layout/layout.md
Outdated
| The `observe` method is used to get an observable stream that will emit whenever one of the given | ||
| media queries would have a different result. | ||
| You can use the `observe` method to get an observable stream emits whenever the viewport size | ||
| changes and crosses a breakpoint. |
There was a problem hiding this comment.
Maybe this should say just "crosses a breakpoint"? It isn't going to fire on any viewport resize.
I'm copying the actual breakpoints here for reference because it's much easier to parse than looking at the archived Material Design site. I'm also working on a follow-up to add an overview example for `BreakpointObserver`. Fixes angular#11788
|
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. |
I'm copying the actual breakpoints here for reference because it's much
easier to parse than looking at the archived Material Design site.
I'm also working on a follow-up to add an overview example for
BreakpointObserver.Fixes #11788