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'
}