Skip to content

Provides an alternative link that renders a component on click events for configurable screen sizes

License

MIT, MIT licenses found

Licenses found

MIT
LICENSE
MIT
LICENSE.md
Notifications You must be signed in to change notification settings

donaldwasserman/ember-link-or

Repository files navigation

ember-link-or

Ember Observer Score

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

Running Tests

  • npm test (Runs ember 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/.

About

Provides an alternative link that renders a component on click events for configurable screen sizes

Topics

Resources

License

MIT, MIT licenses found

Licenses found

MIT
LICENSE
MIT
LICENSE.md

Stars

Watchers

Forks

Packages

No packages published