History

Khushil Mistry 470ffae634 Link text has text-transform: capitalize, contrary to Material specs, is removed.		2018-03-09 04:20:26 +05:30
..
Link.d.ts	Restructure typescript definitions (#1114 )	2017-01-18 08:37:37 +01:00
Link.js	Importing PropTypes from prop-types rather than react (#1413 )	2017-04-17 16:14:17 +02:00
index.d.ts	Restructure typescript definitions (#1114 )	2017-01-18 08:37:37 +01:00
index.js	Update dependencies and linter (#1180 )	2017-01-26 18:05:32 +01:00
readme.md	Autoinject theme for Link	2016-05-29 20:03:41 +02:00
theme.css	Link text has text-transform: capitalize, contrary to Material specs, is removed.	2018-03-09 04:20:26 +05:30

readme.md

Link

The link is a very simple component that acts mostly as a wrapper for the HTML anchor. It's not included in Material Design Specification but we provide it as an easy way to create links with icons and counters. Let's see an example:

import Link from 'react-toolbox/lib/link';

const LinksTest = () => (
  <nav>
    <Link active href="/#/components/link" label="Work" count={4} icon='business' />
    <Link href="/#/components/link" label="Blog" icon='speaker_notes' />
    <Link href="/#/components/link" label="Explore" icon='explore' />
  </nav>
);

If you want to provide a theme via context, the component key is RTLink.

Properties

You can add as many properties as you want to be directly transferred to the output anchor element. Apart from them you have the following properties:

Name	Type	Default	Description
`active`	`Boolean`	`false`	If true, adds active style to link.
`className`	`String`	`''`	Sets a custom class name to add styles to the link.
`count`	`Number`		Sets a count number.
`icon`	`String` or `Element`		An icon key string to include a `FontIcon` component in front of the text.
`label`	`String`		The text string used for the text content of the link.

Theme

Name	Description
`active`	Added to the root element if the Link is active.
`icon`	Used for the icon element if it's present.
`link`	Used for the root element.