Skip to content

Latest commit

 

History

History
274 lines (207 loc) · 6.62 KB

Card.md

File metadata and controls

274 lines (207 loc) · 6.62 KB
Raw
sidebar_position
32

Card

The Card component is intended to be used for vertically aligned related content. It is a container that can hold a heading, content, and footer. It can also hold a left and right component that will be aligned to the left and right of the card body.

Props

<Card
  preset="reversed"
  verticalAlignment="space-between"
  LeftComponent={<Text>Left</Text>}
  RightComponent={<Text>Right</Text>}
  heading="Card Heading"
  headingStyle={{ color: "#a511dc" }}
  HeadingTextProps={{ weight: "bold" }}
  content="Card Content"
  contentStyle={{ color: "#a511dc" }}
  ContentTextProps={{ weight: "light" }}
  footer="Card Footer"
  footerStyle={{ color: "#a511dc" }}
  FooterTextProps={{ weight: "medium" }}
/>

preset

The preset prop is used to set the preset container style of the card. This affects the border and background color of the container. There are two preconfigured presets: default and reversed.

<Card preset="reversed" heading="Card Heading" content="Card Content" footer="Card Footer" />

verticalAlignment

The verticalAlignment prop is used to set the vertical alignment of the card's content. This affects the alignment of the heading, content, and footer. There are four preconfigured alignments: top, center, space-between, and force-footer-bottom. force-footer-bottom behaves like top, but will force the footer to the bottom of the card.

<Card
  verticalAlignment="space-between"
  heading="Card Heading"
  content="Card Content"
  footer="Card Footer"
/>

LeftComponent & RightComponent

The LeftComponent and RightComponent props are used to set the component that will be aligned to the left or right of the card body, respectively.

<Card
  LeftComponent={
    <AutoImage
      maxWidth={80}
      maxHeight={60}
      style={{ alignSelf: "center" }}
      source={{
        uri: "https://user-images.githubusercontent.com/1775841/184508739-f90d0ce5-7219-42fd-a91f-3382d016eae0.png",
      }}
    />
  }
  RightComponent={
    <Button preset="default" text="Click It" onPress={() => Alert.alert("pressed")} />
  }
  heading="Card Heading"
  content="Card Content"
  footer="Card Footer"
/>

heading

The heading prop is used to set the heading text of the card.

<Card heading="Card Heading" content="Card Content" footer="Card Footer" />

headingTx

The headingTx prop is used to set the heading text of the card using a translation key.

<Card headingTx="card.heading" content="Card Content" footer="Card Footer" />

headingTxOptions

The headingTxOptions prop is used to set the options for the translation key used by the headingTx prop.

<Card
  headingTx="card.heading"
  headingTxOptions={{ count: 2 }}
  content="Card Content"
  footer="Card Footer"
/>

headingStyle

The headingStyle prop is used to set the style of the heading text.

<Card
  heading="Card Heading"
  headingStyle={{ color: "red" }}
  content="Card Content"
  footer="Card Footer"
/>

HeadingTextProps

The HeadingTextProps prop is used to pass any additional props to the heading Text component. It will accept any prop that the Text component accepts.

<Card
  heading="Card Heading"
  HeadingTextProps={{ size: "lg" }}
  content="Card Content"
  footer="Card Footer"
/>

HeadingComponent

The HeadingComponent prop is used to set the component that will be used for the heading. This can be used to set a custom heading component.

<Card
  HeadingComponent={<Button preset="reversed" text="HeadingComponent" icon="ladybug" />}
  content="Card Content"
  footer="Card Footer"
/>

content

The content prop is used to set the content text of the card.

<Card heading="Card Heading" content="Card Content" footer="Card Footer" />

contentTx

The contentTx prop is used to set the content text of the card using a translation key.

<Card heading="Card Heading" contentTx="card.content" footer="Card Footer" />

contentTxOptions

The contentTxOptions prop is used to set the options for the translation key used by the contentTx prop.

<Card
  heading="Card Heading"
  contentTx="card.content"
  contentTxOptions={{ count: 2 }}
  footer="Card Footer"
/>

contentStyle

The contentStyle prop is used to set the style of the content text.

<Card
  heading="Card Heading"
  content="Card Content"
  contentStyle={{ backgroundColor: colors.error, color: colors.palette.neutral100 }}
  footer="Card Footer"
/>

ContentTextProps

The ContentTextProps prop is used to pass any additional props to the content Text component. It will accept any prop that the Text component accepts.

<Card
  heading="Card Heading"
  content="Card Content"
  ContentTextProps={{ size: "lg" }}
  footer="Card Footer"
/>

ContentComponent

The ContentComponent prop is used to set the component that will be used for the content. This can be used to set a custom content component.

<Card
  heading="Card Heading"
  ContentComponent={<Button preset="reversed" text="ContentComponent" icon="ladybug" />}
  footer="Card Footer"
/>

footer

The footer prop is used to set the footer text of the card.

<Card heading="Card Heading" content="Card Content" footer="Card Footer" />

footerTx

The footerTx prop is used to set the footer text of the card using a translation key.

<Card heading="Card Heading" content="Card Content" footerTx="card.footer" />

footerTxOptions

The footerTxOptions prop is used to set the options for the translation key used by the footerTx prop.

<Card
  heading="Card Heading"
  content="Card Content"
  footerTx="card.footer"
  footerTxOptions={{ count: 2 }}
/>

footerStyle

The footerStyle prop is used to set the style of the footer text.

<Card
  heading="Card Heading"
  content="Card Content"
  footer="Card Footer"
  footerStyle={{ color: "red" }}
/>

FooterTextProps

The FooterTextProps prop is used to pass any additional props to the footer Text component. It will accept any prop that the Text component accepts.

<Card
  heading="Card Heading"
  content="Card Content"
  footer="Card Footer"
  FooterTextProps={{ size: "lg" }}
/>

FooterComponent

The FooterComponent prop is used to set the component that will be used for the footer. This can be used to set a custom footer component.

<Card
  heading="Card Heading"
  content="Card Content"
  FooterComponent={<Button preset="reversed" text="FooterComponent" icon="ladybug" />}
/>