ShowWhen is a component that will automatically show it's child contents when a query evaluates to true. ShowWhen can watch for platform changes, mode changes, css media queries, and device orientation.

Properties

mediaQuery

string

If the current media query matches this value, the element will show.

mode

string

If the current platform matches the given value, the element will show. Accepts a comma separated list of modes to match against.

or

boolean

If false, and two or more conditions are set, the element will show when all are true. If true, and two or more conditions are set, the element will show when at least one is true.

orientation

string

If the current orientation matches this value, the element will show.

platform

string

If the current platform matches the given value, the element will show. Accepts a comma separated list of platform to match against.

size

string

If the current screen width matches the given size, the element will show. Uses the build in sizes of xs, sm, md, lg, xl.

Attributes

media-query

string

If the current media query matches this value, the element will show.

mode

string

If the current platform matches the given value, the element will show. Accepts a comma separated list of modes to match against.

or

boolean

If false, and two or more conditions are set, the element will show when all are true. If true, and two or more conditions are set, the element will show when at least one is true.

orientation

string

If the current orientation matches this value, the element will show.

platform

string

If the current platform matches the given value, the element will show. Accepts a comma separated list of platform to match against.

size

string

If the current screen width matches the given size, the element will show. Uses the build in sizes of xs, sm, md, lg, xl.

Built with StencilJS