mirror of
https://github.com/noodlapp/noodl-docs.git
synced 2026-01-11 14:52:54 +01:00
Initial commit
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
30
library/prefabs/media-query/README.md
Normal file
30
library/prefabs/media-query/README.md
Normal file
@@ -0,0 +1,30 @@
|
||||
---
|
||||
title: Media Queries
|
||||
hide_title: true
|
||||
---
|
||||
|
||||
# Media Queries
|
||||
|
||||
This prefab gives you a couple of components that allow you to easily work with media queries and responsive design.
|
||||
|
||||
<div className="ndl-image-with-background xl">
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
## Included components
|
||||
|
||||
- **[Media Query Setup](components/media-query-setup)**: Sets up the global breakpoints. Needs to be placed in your projects home component.
|
||||
|
||||
- **[Match Media Query](components/match-media-query/)**: Checks all global media queries and outputs a boolean based on the current active breakpoint.
|
||||
|
||||
- **[Match Custom Media Query](components/match-custom-media-query/)**: Checks for a custom one-off media query. Only used for edge-cases outside of the breapoints in **Match Media Query**
|
||||
|
||||
- **[Media Query Debugger](components/media-query-debugger/)**: A visual component that renders the name of the currently active breakpoint.
|
||||
|
||||
## Quickstart
|
||||
|
||||
Place a **Media Query Setup** in your projects home component. Then use **Match Media Query** in every component where you need to check for the currently active breakpoint. **Match Media Query** paris nicely with the [States](/nodes/utilities/logic/states) node, or the [Mounted](/nodes/shared-props/inputs/visual-input-properties#other) property.
|
||||
|
||||
> To get the most out of this prefab it is recommended to read the [Responsive Design](/docs/guides/user-interfaces/responsive-design) guide, in addition to the prefab docs.
|
||||
@@ -0,0 +1,39 @@
|
||||
---
|
||||
title: Match Custom Media Query
|
||||
hide_title: true
|
||||
---
|
||||
|
||||
# Match Custom Media Query
|
||||
|
||||
This component is used to check for a custom media query. It is mostly used for one-off edge cases. For general media query usage it is recommended to use the **[Match Media Query](/library/prefabs/media-query/components/match-media-query)** component.
|
||||
|
||||
<div className="ndl-image-with-background xl">
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
## Media Query
|
||||
|
||||
Here's a few examples of media queries:
|
||||
|
||||
- `(max-width: 375px)`. This will match if the screen size is `375px` or smaller, like on an iPhone 8, or iPhone X.
|
||||
- `(max-width: 768px)`. Typical size to check for tablets.
|
||||
- `(max-width: 1224px)`. Typical size to check for desktop and laptops.
|
||||
|
||||
You can also create more complex media queries that check for multiple sizes, or a range:
|
||||
|
||||
- `(min-device-width: 320px) and (max-device-height: 640px)`. This will match any size that's above `320px`, and no larger than `640px`.
|
||||
|
||||
## Inputs
|
||||
|
||||
| Data | Description |
|
||||
| --------------------------------------------- | --------------------------------------------- |
|
||||
| <span className="ndl-data">Media Query</span> | The **Media Query String** you want to detect |
|
||||
|
||||
## Outputs
|
||||
|
||||
| Signal | Description |
|
||||
| -------------------------------------------- | ---------------------------------------------------------------------- |
|
||||
| <span className="ndl-signal">Match</span> | Sends a signal if the **Media Query String** matches the device |
|
||||
| <span className="ndl-signal">No Match</span> | Sends a signal if the **Media Query String** does not match the device |
|
||||
@@ -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">
|
||||
|
||||
|
||||
|
||||
</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 |
|
||||
@@ -0,0 +1,20 @@
|
||||
---
|
||||
title: Media Query Debugger
|
||||
hide_title: true
|
||||
---
|
||||
|
||||
# Media Query Debugger
|
||||
|
||||
This component shows the name of the currently active media query defined in the **[Media Query Setup](/library/prefabs/media-query/components/media-query-setup)** component.
|
||||
|
||||
<div className="ndl-image-with-background xl">
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
## Inputs
|
||||
|
||||
| Data | Description |
|
||||
| --------------------------------------------------- | ------------------------------------------------------------------------------------ |
|
||||
| <span className="ndl-data">Debugger Position</span> | Wether the debugger should render **inline** or be **fixed** in the top right corner |
|
||||
@@ -0,0 +1,26 @@
|
||||
---
|
||||
title: Media Query Setup
|
||||
hide_title: true
|
||||
---
|
||||
|
||||
# Media Query Setup
|
||||
|
||||
This component sets up all media queries for your app. It should be placed in you home component. Your project should only include one **Media Query Setup** node.
|
||||
|
||||
<div className="ndl-image-with-background xl">
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
## Changing the breakpoints
|
||||
|
||||
This component comes with a prediefined set of commonly used breakpoints:
|
||||
|
||||
- **Small Mobile**: 400px and smaller
|
||||
- **Regular Mobile**: 401px to 700px
|
||||
- **Tablet**: 701px to 1200px
|
||||
- **Regular Desktop**: 1201px to 1800px
|
||||
- **Large Desktop**: 1801px and above
|
||||
|
||||
If you want to change the recommended defaults, this can be done at the top of the **Register media queries** Script node.
|
||||
Reference in New Issue
Block a user