@snack-uikit/card

Card

Installation

npm i @snack-uikit/card

Changelog

Example

import { Card, SearchPrivate } from "@snack-uikit/card";

  <Card
    checked={checked}
    onClick={handleClick}
    image={<Card.Image {...cardImageProps}/>}
    header={<Card.Header {...cardHeaderProps} />}
    footer={<Card.Footer {...cardFooterProps}/>}
    functionBadge={<Card.FunctionBadge {...cardFunctionBadgeProps} />}
  >
    <ContentElement />
  </Card>

Card

Props

name	type	default value	description
disabled	boolean	-	Управление состоянием интерактивности
checked	boolean	-	Управление состоянием выбран/не выбран
outline	boolean	-	Управление состоянием наличия обводки
multipleSelection	boolean	-	Отображение галочки для режима массового выделения карточек
onClick	(e: MouseEvent<HTMLDivElement | HTMLAnchorElement, MouseEvent>) => void	-	Колбек на клик по карточке
size	enum Size: "s", "m", "l"	-	Размер
promoBadge	string | Pick<PromoTagProps, "text" | "appearance">	-	PromoBadge
children	ReactNode	-	Вложенный контент
header	ReactElement<HeaderProps, string | JSXElementConstructor<any>>	-	Вложенный Header
footer	ReactNode	-	Вложенный Footer
image	ReactNode	-	Вложенный Image
functionBadge	ReactNode	-	Вложенный FunctionBadge
className	string	-	CSS-класс для элемента с контентом
href	string	-	Ссылка карточки
onKeyDown	KeyboardEventHandler<HTMLDivElement>	-	Колбек нажатия клавиши клавиатуры
ref	LegacyRef<HTMLDivElement>	-	Allows getting a ref to the component instance. Once the component unmounts, React will set ref.current to null (or call the ref with null if you passed a callback ref). @see {@link https://react.dev/learn/referencing-values-with-refs#refs-and-the-dom React Docs}
key	Key	-