durbok/noodl-docs
1
0
Fork 0
mirror of https://github.com/noodlapp/noodl-docs.git synced 2026-01-11 23:02:54 +01:00
Code Issues Actions Packages Projects Releases Wiki Activity

Initial commit

Browse Source 
Co-Authored-By: kotte <14197736+mrtamagotchi@users.noreply.github.com>
Co-Authored-By: mikaeltellhed <2311083+mikaeltellhed@users.noreply.github.com>
Co-Authored-By: Tore Knudsen <18231882+torekndsn@users.noreply.github.com>
Co-Authored-By: Michael Cartner <32543275+michaelcartner@users.noreply.github.com>
This commit is contained in:
Eric Tuvesson
2023-09-05 12:08:55 +02:00
commit 53f0d6320e
2704 changed files with 76354 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

40
library/prefabs/media-query/components/match-media-query/README.md Normal file
View File

@@ -0,0 +1,40 @@
---
title: Match Media Query
hide_title: true
---
# Match Media Query
This component is used to check what breakpoint is currently active. It has one output for every breakpoint that outputs either `true` or `false`.
> Please note that you need to place a **[Media Query Setup](/library/prefabs/media-query/components/media-query-setup)** component in your projects home component for the **Match Media Query** comoponent to work.
<br/>
<div className="ndl-image-with-background xl">
![](/library/prefabs/media-query/media-query.png)
</div>
## Breakpoints
The breakpoints are set in the **[Media Query Setup](/library/prefabs/media-query/components/media-query-setup)** component. If the built in default breakpoints don't fit you, you can change them there.
For edge cases where you need to use a one-off breakpoint, you can use the **[Match Custom Media Query](/library/prefabs/media-query/components/match-custom-media-query)** component.
## Common usage
The most common usecase is to use this node together with a [States](/nodes/utilities/logic/states) node, or the **Mounted** input, as pictured above.
## Outputs
| Data | Description |
| --------------------------------------------------------- | --------------------------------------------------------------------------------------- |
| <span className="ndl-data">Matches Small Mobile</span> | _true_ if the viewport matches the **Small Mobile** breakpoint |
| <span className="ndl-data">Matches Regular Mobile</span> | _true_ if the viewport matches the **Regular Mobile** breakpoint |
| <span className="ndl-data">Matches Tablet</span> | _true_ if the viewport matches the **Tablet** breakpoint |
| <span className="ndl-data">Matches Regular Desktop</span> | _true_ if the viewport matches the **Regular Desktop** breakpoint |
| <span className="ndl-data">Matches Large Desktop</span> | _true_ if the viewport matches the **Large Desktop** breakpoint |
| <span className="ndl-data">Matches All Mobile</span> | _true_ if the viewport matches the **Small Mobile** or **Regular Mobile** breakpoints |
| <span className="ndl-data">Matches All Desktop</span> | _true_ if the viewport matches the **Regular Desktop** or **Large Desktop** breakpoints |