Neural Processing Mechanisms
Miss any of our Open RFC calls?Watch the recordings here! »

This package has been deprecated

Author message:

This component is deprecated, please migrate to @rei/cedar

@rei/cdr-link

1.0.5 • Public • Published

CdrLink

For the most up-to-date information, see REI Cedar documentation.

Properties

tag string 'a'
name type default

Sets valid HTML element tag. Possible values: { ‘a’ | ‘button’ }

modifier string N/A
name type default

Modifies the style variant for this component. Possible values: { ‘standalone’ }

href string "#”
name type default

Sets URL to cdr-link href property. The tag prop requires value of <a>

Slots

default
name
Sets the innerHTML for cdr-link. This includes text and html markup

Installation

Resources are available within the cdrLink package:

  • Component: @rei/cdr-link
  • Component styles: cdr-link.css

To incorporate the required assets for a component, use the following steps:

1. Install using NPM

Install the cdrLink package using npm in your terminal:

Terminal

    npm i -s @rei/cdr-link

2. Import dependencies

main.js

// import your required css.
import "@rei/cdr-link/dist/cdr-link.css";
 
// If your link will display an icon ensure you also include the icon’s css file.
import "@rei/cdr-link/dist/cdr-icon.css";

3. Add component to a template

local.vue

<template>
...
    <cdr-link href="rei.com">Ten Essentials.</cdr-link>
...
</template>
 
<script>
import { CdrLink } from '@rei/cdr-link';
export default {
  ...
  components: {
     CdrLink  
  }
}
</script>

Usage

By default, the component renders using an anchor element and requires an href attribute or tag to render a valid accessible link.

  <cdr-link href="http://rei.com">
    Visit REI
  </cdr-link>

Use the tag prop to render the link as a <button> element that presents a link appearance without an href attribute.

  <cdr-link tag="button">
    Show Details
  </cdr-link>

Style Modifiers

To effect the visual presentation pass the following variants to the modifier attribute of the cdrLink component.

  • Standalone: Include as an independent call to action to expand content, remove filters, or provide additional information

Keywords

none

Install

npm i @rei/cdr-link

DownloadsWeekly Downloads

4

Version

1.0.5

License

ISC

Unpacked Size

13.6 kB

Total Files

7

Last publish

Collaborators

  • avatar
  • avatar
  • avatar
  • avatar
  • avatar
  • avatar
  • avatar
  • avatar
  • avatar