1.1.9 • Published 3 months ago

@synerise/ds-card-select v1.1.9

Weekly downloads
227
License
ISC
Repository
github
Last release
3 months ago

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

API

PropertyDescriptionTypeDefault
classNameThe className of the containerstring-
sizeThe size of the cardsmall / mediummedium
raisedDefines border styleboolean-
iconDefines the iconReactNode-
iconSizeOverwrites the predefined (82px for medium size, 48px for small size) size of the iconnumber-
titleDefines the title of the cardReactNode-
descriptionDefines the description of the card (not available for small size)ReactNode-
valueDefines if the card is selected by a userbooleanfalse
tickVisibleDefines the display of the checkboxbooleantrue
disabledDefines if the card is disabled (onChange still fires)boolean-
customTickVisibleDefines if the checkbox is customboolean-
customTickVisibleComponentCustom checkbox componentReactNode-
stretchToFitAligns the height of each cardboolean-
themePalette of colorsstring-
elementsPositionDefines the position of the elements on the cardleft / right / centercenter

| tagProps | Defines a ribbon-style tag | TagProps | - | | tagTooltipProps | Defines tooltip for the ribbon tag | TooltipProps | - | | infoTooltipProps | Defines a tooltip with information about the purpose of the card | TooltipProps | - |

TagProps

accepts a subset of TagProps. See @synerise/ds-tag for API

Omit<TagProps, 'shape' | 'removable' | 'asPill' | 'onRemove' | 'image' | 'texts'>

CardSelectGroup

PropertyDescriptionTypeDefault
classNameThe name of the containerstring-
columnsDefines the number of columns. Defaults to 2, set to null to render all items in a single rownumber / null-
childrenDeprecated. Use items prop insteadReactNode-
itemsArray of CardSelect props to render CardSelect child elementsCardSelectProps & { key: string / numer}-
widthDefines the size of the gap between items. Deprecated, use size propsmall / large16px for small, 24px for large size
sizeThe size of the CardSelect items and gap between themsmall / mediummedium

Methods

PropertyDescriptionTypeDefault
onChangeHandler for the state change(state: boolean) => void-
onClickHandler for click (onChange will not fire if onClick is provided)() => void-
1.1.1

6 months ago

1.1.0

6 months ago

1.1.9

3 months ago

1.1.8

4 months ago

1.1.7

4 months ago

1.1.6

4 months ago

1.1.5

5 months ago

1.1.4

5 months ago

1.1.3

5 months ago

1.1.2

5 months ago

1.0.0

6 months ago

0.9.9

6 months ago

0.9.8

6 months ago

0.9.7

6 months ago

0.9.4

7 months ago

0.9.6

7 months ago

0.9.5

7 months ago

0.9.3

7 months ago

0.9.2

7 months ago

0.9.0

7 months ago

0.9.1

7 months ago

0.8.2

8 months ago

0.8.1

8 months ago

0.8.0

9 months ago

0.7.24

10 months ago

0.7.23

10 months ago

0.7.29

9 months ago

0.7.26

10 months ago

0.7.25

10 months ago

0.7.28

9 months ago

0.7.27

9 months ago

0.7.22

11 months ago

0.7.21

11 months ago

0.7.20

11 months ago

0.7.19

11 months ago

0.7.18

11 months ago

0.7.17

12 months ago

0.7.2

1 year ago

0.7.1

1 year ago

0.7.4

1 year ago

0.7.3

1 year ago

0.7.0

1 year ago

0.5.44

1 year ago

0.7.9

1 year ago

0.7.6

1 year ago

0.7.5

1 year ago

0.7.8

1 year ago

0.7.7

1 year ago

0.6.0

1 year ago

0.7.11

1 year ago

0.7.10

1 year ago

0.7.13

12 months ago

0.7.12

1 year ago

0.7.15

12 months ago

0.7.14

12 months ago

0.7.16

12 months ago

0.5.43

1 year ago

0.5.42

1 year ago

0.5.41

1 year ago

0.5.40

1 year ago

0.5.39

1 year ago

0.5.38

1 year ago

0.5.37

1 year ago

0.5.36

2 years ago

0.5.35

2 years ago

0.5.34

2 years ago

0.5.33

2 years ago

0.5.32

2 years ago

0.5.31

2 years ago

0.5.30

2 years ago

0.5.29

2 years ago

0.5.21

2 years ago

0.5.22

2 years ago

0.5.27

2 years ago

0.5.28

2 years ago

0.5.25

2 years ago

0.5.26

2 years ago

0.5.23

2 years ago

0.5.24

2 years ago

0.5.20

2 years ago

0.5.18

2 years ago

0.5.19

2 years ago

0.5.17

3 years ago

0.5.16

3 years ago

0.5.15

3 years ago

0.5.14

3 years ago

0.5.13

3 years ago

0.5.10

3 years ago

0.5.11

3 years ago

0.5.12

3 years ago

0.5.7

3 years ago

0.5.6

3 years ago

0.5.4

4 years ago

0.5.3

4 years ago

0.5.5

4 years ago

0.5.0

4 years ago

0.5.2

4 years ago

0.5.1

4 years ago

0.4.58

4 years ago

0.4.57

4 years ago

0.4.56

4 years ago

0.4.55

4 years ago

0.4.53

4 years ago

0.4.54

4 years ago

0.4.52

4 years ago

0.4.51

4 years ago

0.4.50

4 years ago

0.4.49

4 years ago

0.4.48

4 years ago

0.4.47

4 years ago

0.4.46

4 years ago

0.4.45

4 years ago

0.4.42

4 years ago

0.4.40

4 years ago

0.4.39

4 years ago

0.4.38

4 years ago

0.4.37

4 years ago

0.4.36

4 years ago

0.4.35

4 years ago

0.4.34

4 years ago

0.4.33

4 years ago

0.4.31

4 years ago

0.4.32

4 years ago

0.4.30

4 years ago

0.4.29

4 years ago

0.4.28

4 years ago

0.4.26

5 years ago

0.4.27

5 years ago

0.4.25

5 years ago

0.4.24

5 years ago

0.4.23

5 years ago

0.4.22

5 years ago

0.4.21

5 years ago

0.4.20

5 years ago

0.4.19

5 years ago

0.4.18

5 years ago

0.4.17

5 years ago

0.4.16

5 years ago

0.4.15

5 years ago

0.4.14

5 years ago

0.4.13

5 years ago

0.4.12

5 years ago

0.4.11

5 years ago

0.4.10

5 years ago

0.4.9

5 years ago

0.4.8

5 years ago

0.4.7

5 years ago

0.4.6

5 years ago

0.4.5

5 years ago

0.4.4

5 years ago

0.4.3

5 years ago

0.4.2

5 years ago

0.4.1

5 years ago

0.3.55

5 years ago

0.4.0

5 years ago

0.3.53

5 years ago

0.3.52

5 years ago

0.3.51

5 years ago

0.3.50

5 years ago

0.3.49

5 years ago

0.3.48

5 years ago

0.3.47

5 years ago

0.3.46

5 years ago

0.3.45

5 years ago

0.3.44

5 years ago

0.3.43

5 years ago

0.3.42

5 years ago

0.3.41

5 years ago

0.3.40

5 years ago

0.3.39

5 years ago

0.3.38

5 years ago

0.3.37

5 years ago

0.3.36

5 years ago

0.3.35

5 years ago

0.3.34

5 years ago

0.3.33

5 years ago

0.3.32

5 years ago

0.3.31

5 years ago

0.3.30

5 years ago

0.3.29

5 years ago

0.3.28

5 years ago

0.3.27

5 years ago

0.3.26

5 years ago

0.3.25

5 years ago

0.3.24

5 years ago

0.3.23

5 years ago

0.3.22

5 years ago

0.3.21

5 years ago

0.3.20

5 years ago

0.3.19

5 years ago

0.3.18

5 years ago

0.3.17

5 years ago

0.3.16

5 years ago

0.3.15

5 years ago

0.3.14

5 years ago

0.3.13

5 years ago

0.3.12

5 years ago

0.3.11

5 years ago

0.3.10

5 years ago

0.3.9

5 years ago

0.3.8

5 years ago

0.3.7

5 years ago

0.3.6

5 years ago

0.3.5

5 years ago

0.3.4

5 years ago

0.3.3

5 years ago

0.3.2

5 years ago

0.3.1

5 years ago

0.2.15

5 years ago

0.3.0

5 years ago

0.2.14

5 years ago

0.2.13

5 years ago

0.2.12

6 years ago

0.2.11

6 years ago

0.2.10

6 years ago

0.2.9

6 years ago

0.2.8

6 years ago

0.2.7

6 years ago

0.2.6

6 years ago

0.2.5

6 years ago

0.2.4

6 years ago

0.2.3

6 years ago

0.2.2

6 years ago

0.2.1

6 years ago

0.2.0

6 years ago

0.1.30

6 years ago

0.1.29

6 years ago

0.1.28

6 years ago

0.1.27

6 years ago

0.1.26

6 years ago

0.1.25

6 years ago

0.1.24

6 years ago

0.1.23

6 years ago

0.1.22

6 years ago

0.1.21

6 years ago

0.1.20

6 years ago

0.1.19

6 years ago

0.1.18

6 years ago

0.1.17

6 years ago

0.1.16

6 years ago

0.1.15

6 years ago

0.1.14

6 years ago

0.1.11

6 years ago

0.1.12

6 years ago

0.1.13

6 years ago

0.1.10

6 years ago

0.1.9

6 years ago

0.1.8

6 years ago

0.1.7

6 years ago

0.1.6

6 years ago

0.1.5

6 years ago

0.1.4

6 years ago

0.1.3

6 years ago

0.1.2

6 years ago

0.1.1

6 years ago

0.1.0

6 years ago

0.0.1

6 years ago