mirror of https://github.com/ionic-team/ionic-framework.git synced 2025-11-09 08:09:32 +08:00

Files

Brandy Carney a7f1f4daa7 refactor(components): update to use shadow DOM and work with css variables

- updates components to use shadow DOM or scoped if they require css variables
- moves global styles to an external stylesheet that needs to be imported
- adds support for additional colors and removes the Sass loops to generate colors for each component
- several property renames, bug fixes, and test updates

Co-authored-by: Manu Mtz.-Almeida <manu.mtza@gmail.com>
Co-authored-by: Adam Bradley <adambradley25@gmail.com>
Co-authored-by: Cam Wiegert <cam@camwiegert.com>

2018-07-09 12:57:21 -04:00

test

refactor(components): update to use shadow DOM and work with css variables

2018-07-09 12:57:21 -04:00

readme.md

docs(show-hide-when): update generated readme files

2018-07-05 18:44:01 -04:00

show-when.scss

style(sass): update sass linters and fix lint errors

2018-03-28 18:24:05 -04:00

show-when.tsx

refactor(components): update to use shadow DOM and work with css variables

2018-07-09 12:57:21 -04:00

readme.md

ion-show-when

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