This package has been deprecated

Author message:

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

@rei/cdr-radio

1.0.3 • Public • Published

Props

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

name type default
labelClass string n/a

Adds CSS class to the label for custom styles

name type default
inputClass string n/a

Adds CSS class to the input for custom styles

name type default
contentClass string n/a

Adds CSS class to the slot wrapper for custom styles

name type default
name string n/a

Sets the name of the radio button. Required.

name type default
value string, number, boolean, object, array, symbol, function false

Sets the value of the radio button. Required

name type default
modifier string n/a

Modifies the style variants for this component. Possible values: { ‘compact’ | 'hide-figure' }

Slots

name
default

Sets the innerHTML for cdr-radio. This is the readable text for the element

Events

name arguments
change value

$emit event fired on radio selection

Installation

Resources are available within the CdrRadio package:

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

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

1. Install using NPM

Install the CdrRadio package using npm in your terminal:

Terminal

npm i -s @rei/cdr-radio

2. Import Dependencies

main.js

// import your required CSS.
import "@rei/cdr-radio/dist/cdr-radio.css";

3. Add component to a template

local.vue

<template>
  <cdr-radio
    v-model="model"
    name="ship-pref"
    value="ship"
  >
    Ship to address
  </cdr-radio>
  <cdr-radio
    v-model="model"
    name="ship-pref"
    value="pickup"
  >
    Pick up in store
  </cdr-radio>
</template>

<script>
import { CdrRadio} from '@rei/cdr-radio';
export default {
  ...
  components: {
     CdrRadio
  }
}
</script>

Usage

The CdrRadio component requires v-model to track the value of selected radios. Use the hide-figure modifier to hide the radio button itself, which leaves text label as the clickable element. Add appropriate custom styles to convey selected and unselected states.

Modifiers

Following variants are available to the cdr-radio modifier attribute:

Value Description
'compact' Sets the spacing for smaller screen sizes
'hide-figure' Hides the radio button icon
<template>
  <cdr-radio
    v-model="model"
    name="model"
    value="model"
    modifier="hide-figure"
    input-class="no-box"
    content-class="no-box__content"
  >
    Add to cart
  </cdr-radio>
</template>
<style>
.no-box:checked ~ .no-box__content {
   color: green;

   &::after {
     content: '(checked)';
   }
 }
</style>

Readme

Keywords

none

Package Sidebar

Install

npm i @rei/cdr-radio

Weekly Downloads

2

Version

1.0.3

License

ISC

Unpacked Size

55.1 kB

Total Files

7

Last publish

Collaborators

  • kenji-crosland-rei
  • rei-user
  • mhewson
  • rei-cedar
  • peripateticus
  • heavymedl
  • benjag