@synerise/ds-card-select
TypeScript icon, indicating that this package has built-in type declarations

0.5.37 • Public • Published

id: card-select title: Card Select

A card select is a form of presenting a selectable option on a separate, usually rectangle-shaped, object.

When to use it

  • To present a user with several types to choose from in one large module (for example, types of recommendations).

Component anatomy

This is a simple component, which means it doesn't consist of any other components.

Installation

npm i @synerise/ds-card-select

or

yarn add @synerise/ds-card-select

Usage


<CardSelect
              title="Card"
              description="With description"
              value={true}
              icon={<IconComponent />}
              onChange={() => store !== 0 && setStore(0)}
              tickVisible
            />

Demo

<iframe src="/storybook-static/iframe.html?id=components-cardselect--default"></iframe>

API

Property Description Type Default
className The name of the container string -
size The size of the card small / medium medium
raised Defines if the component casts shadow on the background boolean -
icon Defines the URL of the icon string -
iconSize Defines the size of the icon number 82 px for medium size, 48 px for small size
title Defines the title of the card string -
description Defines the description of the card (not available for small size) string -
value Defines if the card is selected by a user boolean false
tickVisible Defines the display of the checkbox boolean true
disabled Defines if the card is disabled (onChange still fires) boolean -
customTickVisible Defines if the checkbox is custom boolean -
customTickVisibleComponent Custom checkbox component ReactNode -
stretchToFit Aligns the height of each card boolean -
clearTooltip Defines the title of clear icon tooltip string -
thickSize The size of the thick small / medium medium
theme Palette of colors string -
elementsPosition Defines the position of the elements on the card string center
width Defines the width of Group of cards large / small large

Methods

Property Description Type Default
onChange Handler for the state change (state: boolean) => void -
onClick Handler for click (onChange will not fire if onClick is provided) () => void -

Dependencies (2)

Dev Dependencies (1)

Package Sidebar

Install

npm i @synerise/ds-card-select

Weekly Downloads

21

Version

0.5.37

License

ISC

Unpacked Size

72.2 kB

Total Files

19

Last publish

Collaborators

  • synerise