ember-link-or v0.0.4
ember-link-or
This draft addon is an example of how to accomplish having a link for large screens that renders a component, but on smaller screens links to a seperate route.
This project is ~stolen~ inspired by Oli Griffith's 2017 Ember Conf talk about replicating native-ish behavior to generate a popover at larger screen sizes but render a link at smaller ones.
Usage
This addon provides a {{link-or}}
component that works similarly to the standard
{{link-to}}
helper. While {{link-to}}
uses positional params, {{link-or}}
uses
named parameters, because much the api is optional.
Papercuts ahead: While most of the functionality of {{link-to}}
has been
replicated here, there may be some rough patches.8
Basics
{{#link-or routeName="alerts" routeArgs=model component="alert-list" componentArgs=model}}<span class="fa fa-alert"></span> Alerts {{/link-or}}
The routeName
and routeArgs
correspond to the first two params of {{link-to route id}}
.
Pass the name of a valid component in component
and provide any arguments via the componentArgs
.
Media Query Support
By default, the addon renders the component provided at screen sizes below 768px,
by setting the default size
parameter to xsmall
.
You can change the value by providing a xsmall
, small
, medium
, keywords, or a pixel
value.
{{#link-or routeName="alerts" component="alert-list" size="medium"}} Link {{/link-or}}
or
{{#link-or routeName="alerts" component="alert-list" size="989"}} Link {{/link-or}}
The keywords map to (these are the default Bootstrap media queries):
xsmall: 768,
small: 992,
medium: 1200
Installation
ember install ember-link-or
Running
ember serve
- Visit your app at http://localhost:4200.
Running Tests
npm test
(Runsember try:each
to test your addon against multiple Ember versions)ember test
ember test --server
Building
ember build
For more information on using ember-cli, visit https://ember-cli.com/.