Links

Hidden

Quickly and responsively toggle the visibility value of components and more with the hidden utilities.

How it works

Hidden works with a range of breakpoints e.g. xsUp or mdDown, or one or more breakpoints e.g. -Only 'sm' or -Only @('md', 'xl'). Ranges and individual breakpoints can be used simultaneously to achieve very customized behavior. The ranges are inclusive of the specified breakpoints.
innerWidth |xs sm md lg xl
|--------|--------|--------|--------|-------->
width | xs | sm | md | lg | xl
smUp | show | hide
mdDown | hide | show

Up

Using any breakpoint -Up parameter, the given children will be hidden at or above the breakpoint.
New-UDHidden -Up xl -Content {
New-UDTypography 'xl'
}

Down

Using any breakpoint -Down parameter, the given children will be hidden at or below the breakpoint.
New-UDHidden -Down xs -Content {
New-UDTypography 'xs'
}

Only

Using the breakpoint -Only parameter, the given children will be hidden at the specified breakpoint(s).
The -Only parameter can be used in two ways:
  • list a single breakpoint
  • list an array of breakpoints
New-UDHidden -Only 'sm' -Content {
New-UDTypography 'sm'
}
New-UDHidden -Only @('sm', 'xl') -Content {
New-UDTypography 'sm,xl'
}

API

Last modified 5mo ago
Copyright 2022 Ironman Software