LinkComponent
Ember.LinkComponent Class
PUBLIC
Extends: Ember.Component
Defined in: packages/ember-glimmer/lib/components/link-to.js:329
Module: ember-glimmer
Ember.LinkComponent
renders an element whose click
event triggers a transition of the application's instance of Ember.Router
to a supplied route by name.
Ember.LinkComponent
components are invoked with {{#link-to}}. Properties of this class can be overridden with reopen
to customize application-wide behavior.
_invoke (event) private
Event handler that invokes the link, activating the associated route.
Parameters:
-
event
Event
initprivate
An overridable method called when LinkComponent
objects are instantiated.
Example:
App.MyLinkComponent = Ember.LinkComponent.extend({ init: function() { this._super(...arguments); Ember.Logger.log('Event is ' + this.get('eventName')); } });
NOTE: If you do override init
for a framework class like Ember.View
, be sure to call this._super(...arguments)
in your init
declaration! If you don't, Ember may not have an opportunity to do important setup work, and you'll see strange behavior in your application.
clickprivate
Triggers the LinkComponent
's routing behavior. If eventName
is changed to a value other than click
the routing behavior will trigger on that custom event instead.
activeprivate
Accessed as a classname binding to apply the LinkComponent
's activeClass
CSS class
to the element when the link is active.
A LinkComponent
is considered active when its currentWhen
property is true
or the application's current route is the route the LinkComponent
would trigger transitions into.
The currentWhen
property can match against multiple routes by separating route names using the (space) character.
activeClassString
public
The CSS class to apply to LinkComponent
's element when its active
property is true
.
Default: active
attributeBindingsArray | String
public
By default the {{link-to}}
component will bind to the href
and title
attributes. It's discouraged that you override these defaults, however you can push onto the array if needed.
Default: ['title', 'rel', 'tabindex', 'target']
classNameBindingsArray
public
By default the {{link-to}}
component will bind to the active
, loading
, and disabled
classes. It is discouraged to override these directly.
Default: ['active', 'loading', 'disabled', 'ember-transitioning-in', 'ember-transitioning-out']
currentWhenpublic
Used to determine when this LinkComponent
is active.
disabledprivate
Accessed as a classname binding to apply the LinkComponent
's disabledClass
CSS class
to the element when the link is disabled.
When true
interactions with the element will not trigger route changes.
disabledClassString
private
The CSS class to apply to a LinkComponent
's element when its disabled
property is true
.
Default: disabled
eventNameString
private
By default the {{link-to}}
component responds to the click
event. You can override this globally by setting this property to your custom event name.
This is particularly useful on mobile when one wants to avoid the 300ms click delay using some sort of custom tap
event.
Default: click
hrefprivate
Sets the element's href
attribute to the url for the LinkComponent
's targeted route.
If the LinkComponent
's tagName
is changed to a value other than a
, this property will be ignored.
loadingClassString
private
The CSS class to apply to LinkComponent
's element when its loading
property is true
.
Default: loading
loadingHrefString
private
The default href value to use while a link-to is loading. Only applies when tagName is 'a'
Default: #
relpublic
Sets the rel
attribute of the LinkComponent
's HTML element.
Default: null
replaceBoolean
public
Determines whether the LinkComponent
will trigger routing via the replaceWith
routing strategy.
Default: false
tabindexpublic
Sets the tabindex
attribute of the LinkComponent
's HTML element.
Default: null
targetpublic
Sets the target
attribute of the LinkComponent
's HTML element.
Default: null
titlepublic
Sets the title
attribute of the LinkComponent
's HTML element.
Default: null
© 2017 Yehuda Katz, Tom Dale and Ember.js contributors
Licensed under the MIT License.
https://emberjs.com/api/classes/Ember.LinkComponent.html