New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
expose a global variable of the current breakpoint xs,sm,md,lg to all component #974
Comments
I was looking into an easy way of achieving this, and it seems like it wouldn't be too hard. Evan has sketched out the basics here: Seems like we would just need to setup some window listeners and have a function that reads the value of the viewport width, and with a computed property expose the current value of: xs, sm, md, lg, xl Where: xs - extra small viewport devices (< 576px) Viewport width can be attained crossbrowser compatible as: |
Another option would be to use media queries, e.g.:
to get the breakpoint in js:
|
Here is a mixin put together by @cb109 https://gist.github.com/cb109/b074a65f7595cffc21cea59ce8d15f9b |
Can I get a few peoples examples of how they would expect this to work? |
For example:
|
As discussed earlier: it would be nice to have the current visible breakpoint variable as a global variable accessible in all components. The idea would be a client side watcher on window resize and dispatch the current breakpoint name.
The text was updated successfully, but these errors were encountered: