1.1.9 • Published 27 days ago

@synerise/ds-card-select v1.1.9

Weekly downloads
227
License
ISC
Repository
github
Last release
27 days 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

3 months ago

1.1.0

4 months ago

1.1.9

27 days ago

1.1.8

1 month ago

1.1.7

1 month ago

1.1.6

2 months ago

1.1.5

2 months ago

1.1.4

3 months ago

1.1.3

3 months ago

1.1.2

3 months ago

1.0.0

4 months ago

0.9.9

4 months ago

0.9.8

4 months ago

0.9.7

4 months ago

0.9.4

4 months ago

0.9.6

4 months ago

0.9.5

4 months ago

0.9.3

5 months ago

0.9.2

5 months ago

0.9.0

5 months ago

0.9.1

5 months ago

0.8.2

5 months ago

0.8.1

6 months ago

0.8.0

7 months ago

0.7.24

8 months ago

0.7.23

8 months ago

0.7.29

7 months ago

0.7.26

7 months ago

0.7.25

7 months ago

0.7.28

7 months ago

0.7.27

7 months ago

0.7.22

8 months ago

0.7.21

8 months ago

0.7.20

8 months ago

0.7.19

9 months ago

0.7.18

9 months ago

0.7.17

9 months ago

0.7.2

1 year ago

0.7.1

1 year ago

0.7.4

12 months ago

0.7.3

12 months ago

0.7.0

1 year ago

0.5.44

1 year ago

0.7.9

11 months ago

0.7.6

11 months ago

0.7.5

12 months ago

0.7.8

11 months ago

0.7.7

11 months ago

0.6.0

1 year ago

0.7.11

10 months ago

0.7.10

10 months ago

0.7.13

10 months ago

0.7.12

10 months ago

0.7.15

10 months ago

0.7.14

10 months ago

0.7.16

10 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

1 year ago

0.5.35

1 year ago

0.5.34

1 year ago

0.5.33

1 year ago

0.5.32

1 year ago

0.5.31

1 year 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

2 years ago

0.5.16

2 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

3 years ago

0.5.3

3 years ago

0.5.5

3 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

4 years ago

0.4.27

4 years ago

0.4.25

4 years ago

0.4.24

4 years ago

0.4.23

4 years ago

0.4.22

4 years ago

0.4.21

4 years ago

0.4.20

4 years ago

0.4.19

4 years ago

0.4.18

4 years ago

0.4.17

4 years ago

0.4.16

4 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

5 years ago

0.2.11

5 years ago

0.2.10

5 years ago

0.2.9

5 years ago

0.2.8

5 years ago

0.2.7

5 years ago

0.2.6

5 years ago

0.2.5

5 years ago

0.2.4

5 years ago

0.2.3

5 years ago

0.2.2

5 years ago

0.2.1

5 years ago

0.2.0

5 years ago

0.1.30

5 years ago

0.1.29

5 years ago

0.1.28

5 years ago

0.1.27

5 years ago

0.1.26

5 years ago

0.1.25

5 years ago

0.1.24

5 years ago

0.1.23

5 years ago

0.1.22

5 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