https://github.com/dwickern/ember-link-to-wrapper

An anchor wrapped in a list item
https://github.com/dwickern/ember-link-to-wrapper

Last synced: 1 day ago
JSON representation

An anchor wrapped in a list item

• Host: GitHub
• URL: https://github.com/dwickern/ember-link-to-wrapper
• Owner: dwickern
• License: mit
• Created: 2017-11-21T17:00:27.000Z (almost 7 years ago)
• Default Branch: master
• Last Pushed: 2022-12-07T09:37:41.000Z (almost 2 years ago)
• Last Synced: 2024-04-29T08:44:25.223Z (5 months ago)
• Language: JavaScript
• Homepage:
• Size: 944 KB
• Stars: 3
• Watchers: 1
• Forks: 0
• Open Issues: 15
• Metadata Files:
  • Readme: README.md
  • License: LICENSE.md

Awesome Lists containing this project

README

        
# ember-link-to-wrapper

[![npm version](https://badge.fury.io/js/ember-link-to-wrapper.svg)](https://www.npmjs.com/package/ember-link-to-wrapper)

[![build status](https://travis-ci.org/dwickern/ember-link-to-wrapper.svg?branch=master)](https://travis-ci.org/dwickern/ember-link-to-wrapper)

An anchor wrapped in a list item. That's all. Useful for working with bootstrap which wants the `active` class on the `
`.


Because [ember-cli-active-link-wrapper](https://github.com/alexspeller/ember-cli-active-link-wrapper) has some issues on ember 2.10+.

## Installation

```

ember install ember-link-to-wrapper

```

## Usage

Use `{{link-to-wrapper}}` as a drop-in replacement for `{{link-to}}`:

```hbs

{{#link-to-wrapper "my-route"}}

  Visit my route!

{{/link-to-wrapper}}

```

The template will produce roughly this html:

```html



  

    Visit my route!

  



```


When the route is active, an `active` class is applied to _both_ elements:

```html



  

    Visit my route!

  



```


### Query parameters

Pass model arguments and query params as usual:

```hbs

{{#link-to-wrapper "posts" postId (query-params expanded=true)}}

  View post {{postId}}

{{/link-to-wrapper}}

```

### Inline form

The [inline form](https://guides.emberjs.com/v2.15.0/templates/links/#toc_using-link-to-as-an-inline-component) is also supported:

```hbs

{{link-to-wrapper "My Route" "my-route"}}

```

### Custom attributes

Use `linkComponent` to customize the inner anchor element:

```hbs

{{#link-to-wrapper "my-route" class="outer" linkComponent=(component 'link-to' class="inner")}}

  Visit my route!

{{/link-to-wrapper}}

```

Produces roughly this html:

```html



  

    Visit my route!

  



```


## Development

* `git clone ` this repository

* `cd ember-link-to-wrapper`

* `yarn install`

## Running

* `ember serve`

* Visit your app at [http://localhost:4200](http://localhost:4200).

## Running Tests

* `yarn 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/](https://ember-cli.com/).