当前位置: 首页 > 软件库 > 程序开发 > >

ember-links-with-follower

授权协议 MIT License
开发语言 JavaScript
所属分类 程序开发
软件类型 开源软件
地区 不详
投 递 者 富波光
操作系统 跨平台
开源组织
适用人群 未知
 软件概览

ember-links-with-follower

Features

Provides a component that renders a set of links with a follower line underneath. The follower will animate to the position of the active link, and grow or shrink in size if needed. If no active links are found, the follower will hide.

This pattern is commonly used for navigation:

twitter

(from Twitter app)

linkedin

(from LinkedIn app)

Animation of the follower is done through CSS transition and transform using translate3d. The transitions duration will be set to 0 on window resize to avoid issues with animating while resizing.

Since Links with Follower hooks in to the Router's willTransition event, you can use link-to or transitionTo and the follower will still update properly.

Installation

ember install ember-links-with-follower

Usage

Render links with default behavior (links passed in the block are expected to be li's):

{{#links-with-follower class="my-nav"}}
  {{#link-to 'Home' tagName='li'}}Home{{/link-to}}
  {{#link-to 'Stuff' tagName='li'}}Stuff{{/link-to}}
{{/links-with-follower}}

Render custom tags, change the active selector, and animate slowly:

{{#links-with-follower
  containerTagName="section"
  linkTagName="div"
  activeSelector="selected"
  followerAnimationDuration=1000}}

  {{#link-to "Home" tagName="div"}}Home{{/link-to}}
  {{#link-to "Stuff" tagName="div"}}Stuff{{/link-to}}

{{/links-with-follower}}

Customize the follower with css:

.my-nav .link-follower {
  border-color: tomato;
  border-size: 3px;
}

How does this work?

A listener is added to the router's willTransition event. On willTransition, we look for an active link in the links provided to the component via block format.

An active link is defined by the activeSelector property, which defaults to 'li.active:not(li.ember-transitioning-out), li.ember-transitioning-in'. This allows us to eagerly transition the follower before the route has fully transitioned.

Helpful Links

Legal

Echobind LLC (c) 2016@echobindLicensed under the MIT license

 相关资料
  • Built With Ember Website A list of ambitious web applications built using ember.js. This project was inspired by a Google Drive spreadsheet that was shared on Twitter sometime ago. We thought that it

  • 描述 (Description) 若要使用的链接left和right的导航条的一部分,只需添加《a》与类标签link 。 例子 (Example) 下面的示例显示在Framework7左上角和右上角两侧的链接 - <!DOCTYPE html> <html> <head> <meta name = "viewport" content = "width = device-widt

  • 描述 (Description) 导航条链接可以通过添加只设置图标icon-only类的链接。 它将使链接显示在一个固定大小的44×44像素。 例子 (Example) 下面的例子演示了使用与在Framework7只有图标导航条链接 - <!DOCTYPE html> <html> <head> <meta name = "viewport" content = "width =

  • 本章将教您如何使用CSS设置超链接的不同属性。 您可以设置超链接的以下属性 - 当我们讨论CSS的伪类时,我们将重新审视相同的属性。 :link表示未访问的超链接。 :visited表示访问过的超链接。 :hover表示当前用户鼠标指针悬停在其上的元素。 :active表示用户当前单击的元素。 通常,所有这些属性都保存在HTML文档的标题部分中。 记住a:hover必须在a:link和a:在CSS

  • {{link-to}}组件可用于创建到路由的链接。 语法 (Syntax) {{#link-to route}} //code here {{/link-to}} 下表列出了链接的属性 - S.No. 链接和说明 1 Multiple Segments 对于多个段,如果路由是嵌套的,则可以为每个段提供模型或标识符。 2 使用Link-to作为内联助手 通过提供链接文本作为帮助程序的第一个参

  • 描述 (Description) 当您单击文本或图像时,它会创建一个超链接,打开另一个文档。 例子 (Example) 以下示例演示了在Foundation中使用base typography links - <!doctype html> <head> <meta charset = "utf-8" /> <meta http-equiv = "x-ua-compa