--- name: interchange url: /interchange title: Interchange ---
Interchange allows you to specify what specific content to display based on the user's current screen size. This is great for loading up a mobile-friendly component on small devices, and a more robust or heavier load component on desktops.
To set up Interchange, start with a container with the zf-interchange
directive.
A basic example of Interchange involves images. In the below example, we're loading images with a lower resolution (and thus a lower file size) on small screens, and progressively higher-res images on larger screens.
Note the values of the media
attributes on each item inside the container—these are the breakpoints defined in your Sass files. Check out the documentation for media queries to learn how these breakpoints can be changed.
Interchange can also switch between entire chunks of HTML. These can be loaded as partials (external HTML files), or by dropping the content right into the tag.
Note that partials are reloaded every time, meaning if the user's device scales from medium, to small, back to medium, the medium partial will be loaded twice.
Interchange can also be achieved with our zf-if, zf-show, and zf-hide directives. These directives internally use ng-if, ng-show, and ng-hide, respectively, to achieve their interchange ability. Simply pass the desired query into the directive and let it do its magic!
Any named breakpoint can be used as a query, the defaults being: small
, medium
, large
, xlarge
, and xxlarge
. Other supported queries include: landscape
, portrait
, and retina
.
You are on a small or larger device.
You are on a medium or larger device.
You are on a large or larger device.
You are on a xlarge or larger device.
You are on a xxlarge or larger device.
You are in a landscape orientation.
You are in a portrait orientation.
You are on a retina device.
You are on a small or larger device.
You are on a medium or larger device.
You are on a large or larger device.
You are on a xlarge or larger device.
You are on a xxlarge or larger device.
You are in a landscape orientation.
You are in a portrait orientation.
You are on a retina device.
Named breakpoint queries support usage of the only
operator. When using the only operator, the result of the query will be true if the current media EXACTLY matches the query.
You are only on a small device.
You are only on a medium device.
You are only on a large device.
You are only on a xlarge device.
You are only on a xxlarge device.
You are only on a small device.
You are only on a medium device.
You are only on a large device.
You are only on a xlarge device.
You are only on a xxlarge device.
Named breakpoint queries support usage of the not
operator. Usage of the not
operator implies usage of the only
operator. When using the not operator, the result of the query will be true if the current media does NOT EXACTLY match the query.
You are not on a small device.
You are not on a medium device.
You are not on a large device.
You are not on a xlarge device.
You are not on a xxlarge device.
You are not on a small device.
You are not on a medium device.
You are not on a large device.
You are not on a xlarge device.
You are not on a xxlarge device.