This repository was archived by the owner on Jun 23, 2023. It is now read-only.
-
Notifications
You must be signed in to change notification settings - Fork 2
docs: Add new card component documentation #12
Open
estheragbaje
wants to merge
6
commits into
main
Choose a base branch
from
add-card
base: main
Could not load branches
Branch not found: {{ refName }}
Loading
Could not load tags
Nothing to show
Loading
Are you sure you want to change the base?
Some commits from the old base branch may be removed from the timeline,
and old review comments may become outdated.
Open
Changes from all commits
Commits
Show all changes
6 commits
Select commit
Hold shift + click to select a range
f6566f9
feat: add card index file
estheragbaje 2e8fbce
chore: updated packages
estheragbaje 4ad4139
feat: added props table
estheragbaje c0161e8
feat: added theming file
estheragbaje 821dd6f
feat: updated react live scope
estheragbaje a8b6143
feat: added card svg
estheragbaje File filter
Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
There are no files selected for viewing
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,296 @@ | ||
| # Card | ||
|
|
||
| ## Import | ||
|
|
||
| Chakra UI exports 4 components to help you create a Card. | ||
|
|
||
| ```js | ||
| import { Card, CardHeader, CardBody, CardFooter } from '@chakra-ui/react'; | ||
| ``` | ||
|
|
||
| - **Card:** The parent wrapper that provides context for its children. | ||
| - **CardHeader:** The wrapper that contains a card's header. | ||
| - **CardBody:** The wrapper that houses the card's main content. | ||
| - **CardFooter:** The footer that houses the card actions. | ||
|
|
||
| ## Usage | ||
|
|
||
| ### Basic Card | ||
|
|
||
| Put in some content in the `CardBody` to get a basic card. | ||
|
|
||
| ```jsx live | ||
| <Card> | ||
| <CardBody> | ||
| <Text>View a summary of all your customers over the last month.</Text> | ||
| </CardBody> | ||
| </Card> | ||
| ``` | ||
|
|
||
| ### Card with Divider | ||
|
|
||
| There are instances when you have multiple content to display in the `CardBody` | ||
| and you may want to add dividers between them. | ||
|
|
||
| ```jsx live | ||
| <Card> | ||
| <CardHeader> | ||
| <Heading size='md'>Client Report</Heading> | ||
| </CardHeader> | ||
|
|
||
| <CardBody> | ||
| <Stack divider={<StackDivider />} spacing='4'> | ||
| <Box> | ||
| <Heading size='xs' textTransform='uppercase'> | ||
| Summary | ||
| </Heading> | ||
| <Text pt='2' fontSize='sm'> | ||
| View a summary of all your clients over the last month. | ||
| </Text> | ||
| </Box> | ||
| <Box> | ||
| <Heading size='xs' textTransform='uppercase'> | ||
| Overview | ||
| </Heading> | ||
| <Text pt='2' fontSize='sm'> | ||
| Check out the overview of your clients. | ||
| </Text> | ||
| </Box> | ||
| <Box> | ||
| <Heading size='xs' textTransform='uppercase'> | ||
| Analysis | ||
| </Heading> | ||
| <Text pt='2' fontSize='sm'> | ||
| See a detailed analysis of all your business clients. | ||
| </Text> | ||
| </Box> | ||
| </Stack> | ||
| </CardBody> | ||
| </Card> | ||
| ``` | ||
|
|
||
| ### Card with Image | ||
|
|
||
| Place the content within the `CardBody` to get a nice padding around. | ||
|
|
||
| ```jsx live | ||
| <Card maxW='sm'> | ||
| <CardBody> | ||
| <Image | ||
| src='https://images.unsplash.com/photo-1555041469-a586c61ea9bc?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1770&q=80' | ||
| alt='Green double couch with wooden legs' | ||
| borderRadius='lg' | ||
| /> | ||
| <Stack mt='6' spacing='3'> | ||
| <Heading size='md'>Living room Sofa</Heading> | ||
| <Text> | ||
| This sofa is perfect for modern tropical spaces, baroque inspired | ||
| spaces, earthy toned spaces and for people who love a chic design with a | ||
| sprinkle of vintage design. | ||
| </Text> | ||
| <Text color='blue.600' fontSize='2xl'> | ||
| $450 | ||
| </Text> | ||
| </Stack> | ||
| </CardBody> | ||
| <Divider /> | ||
| <CardFooter> | ||
| <ButtonGroup spacing='2'> | ||
| <Button variant='solid' colorScheme='blue'> | ||
| Buy now | ||
| </Button> | ||
| <Button variant='ghost' colorScheme='blue'> | ||
| Add to cart | ||
| </Button> | ||
| </ButtonGroup> | ||
| </CardFooter> | ||
| </Card> | ||
| ``` | ||
|
|
||
| ### Horizontal Card | ||
|
|
||
| The card component has `display: flex` by default. This means you make the | ||
| content in a horizontal direction by passing `direction="row`. | ||
|
|
||
| ```jsx live | ||
| <Card direction='row' overflow='hidden' variant='outline'> | ||
| <Image | ||
| objectFit='cover' | ||
| maxW='200px' | ||
| src='https://images.unsplash.com/photo-1667489022797-ab608913feeb?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxlZGl0b3JpYWwtZmVlZHw5fHx8ZW58MHx8fHw%3D&auto=format&fit=crop&w=800&q=60' | ||
| alt='Caffe Latte' | ||
| /> | ||
| <Stack> | ||
| <CardBody> | ||
| <Heading size='md'>The perfect latte</Heading> | ||
| <Text py='2'> | ||
| Caffè latte is a coffee beverage of Italian origin made with espresso | ||
| and steamed milk. | ||
| </Text> | ||
| </CardBody> | ||
| <CardFooter> | ||
| <Button variant='solid' colorScheme='blue'> | ||
| Buy Latte | ||
| </Button> | ||
| </CardFooter> | ||
| </Stack> | ||
| </Card> | ||
| ``` | ||
|
|
||
| ### Advanced Composition | ||
|
|
||
| You can compose `Card` with other components like `Avatar`, `Icon Button` and | ||
| more for a more advanced layout. | ||
|
|
||
| ```jsx live | ||
| <Card maxW='md'> | ||
| <CardHeader> | ||
| <HStack spacing='4'> | ||
| <Avatar name='Segun Adebayo' src='https://bit.ly/sage-adebayo' /> | ||
|
|
||
| <Box flex='1'> | ||
| <Heading size='sm'>Segun Adebayo</Heading> | ||
| <Text>Creator, Chakra UI</Text> | ||
| </Box> | ||
| <IconButton | ||
| variant='ghost' | ||
| colorScheme='gray' | ||
| aria-label='See menu' | ||
| icon={<BsThreeDotsVertical />} | ||
| /> | ||
| </HStack> | ||
| </CardHeader> | ||
| <CardBody> | ||
| <Text> | ||
| With Chakra UI, I wanted to sync the speed of development with the speed | ||
| of design. I wanted the developer to be just as excited as the designer to | ||
| create a screen. | ||
| </Text> | ||
| </CardBody> | ||
| <Image | ||
| objectFit='cover' | ||
| src='https://images.unsplash.com/photo-1531403009284-440f080d1e12?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1770&q=80' | ||
| alt='Chakra UI' | ||
| /> | ||
|
|
||
| <CardFooter justify='space-between'> | ||
| <Button flex='1' variant='ghost' leftIcon={<BiLike />}> | ||
| Like | ||
| </Button> | ||
| <Button flex='1' variant='ghost' leftIcon={<BiChat />}> | ||
| Comment | ||
| </Button> | ||
| <Button flex='1' variant='ghost' leftIcon={<BiShare />}> | ||
| Share | ||
| </Button> | ||
| </CardFooter> | ||
| </Card> | ||
| ``` | ||
|
|
||
| ### Multiple cards | ||
|
|
||
| Render multiple cards to display content by using the `SimpleGrid` or your | ||
| preferred layout method. | ||
|
|
||
| ```jsx live | ||
| <SimpleGrid columns={3} spacing={4}> | ||
| <Card> | ||
| <CardHeader> | ||
| <Heading size='md'> Customer dashboard</Heading> | ||
| </CardHeader> | ||
| <CardBody> | ||
| <Text>View a summary of all your customers over the last month.</Text> | ||
| </CardBody> | ||
| <CardFooter> | ||
| <Button>View here</Button> | ||
| </CardFooter> | ||
| </Card> | ||
| <Card> | ||
| <CardHeader> | ||
| <Heading size='md'> Customer dashboard</Heading> | ||
| </CardHeader> | ||
| <CardBody> | ||
| <Text>View a summary of all your customers over the last month.</Text> | ||
| </CardBody> | ||
| <CardFooter> | ||
| <Button>View here</Button> | ||
| </CardFooter> | ||
| </Card> | ||
| <Card> | ||
| <CardHeader> | ||
| <Heading size='md'> Customer dashboard</Heading> | ||
| </CardHeader> | ||
| <CardBody> | ||
| <Text>View a summary of all your customers over the last month.</Text> | ||
| </CardBody> | ||
| <CardFooter> | ||
| <Button>View here</Button> | ||
| </CardFooter> | ||
| </Card> | ||
| </SimpleGrid> | ||
| ``` | ||
|
|
||
| ### Centering content in a card | ||
|
|
||
| Card comes with an inherent `display="flex"` on it, so if you'd like to center | ||
| the content of your card, you can do this easily by passing `align="center"` to | ||
| the Card. | ||
|
|
||
| ```jsx live | ||
| <Card align='center'> | ||
| <CardHeader> | ||
| <Heading size='md'> Customer dashboard</Heading> | ||
| </CardHeader> | ||
| <CardBody> | ||
| <Text>View a summary of all your customers over the last month.</Text> | ||
| </CardBody> | ||
| <CardFooter> | ||
| <Button colorScheme='blue'>View here</Button> | ||
| </CardFooter> | ||
| </Card> | ||
| ``` | ||
|
|
||
| ## Variants | ||
|
|
||
| Chakra UI provides 4 card variants - `elevated`, `outline`, `filled`, and | ||
| `unstyled`. Use the `variant` prop to change the style of your card. If the | ||
| variant prop is not passed, the default variant, `elevated` is used. | ||
|
|
||
| ```jsx live | ||
| <Stack spacing='4'> | ||
| {['elevated', 'outline', 'filled', 'unstyled'].map((variant) => ( | ||
| <Card key={variant} variant={variant}> | ||
| <CardHeader> | ||
| <Heading size='md'> {variant}</Heading> | ||
| </CardHeader> | ||
| <CardBody> | ||
| <Text>variant = {variant}</Text> | ||
| </CardBody> | ||
| </Card> | ||
| ))} | ||
| </Stack> | ||
| ``` | ||
|
|
||
| ## Sizes | ||
|
|
||
| Chakra UI provides 3 Card sizes. Use the `size` prop to change the size and set | ||
| the value to `sm`, `md`, or `lg`. | ||
|
|
||
| ```jsx live | ||
| <Stack spacing='4'> | ||
| {['sm', 'md', 'lg'].map((size) => ( | ||
| <Card key={size} size={size}> | ||
| <CardHeader> | ||
| <Heading size='md'> {size}</Heading> | ||
| </CardHeader> | ||
| <CardBody> | ||
| <Text>size = {size}</Text> | ||
| </CardBody> | ||
| </Card> | ||
| ))} | ||
| </Stack> | ||
| ``` | ||
|
|
||
| ## Props | ||
|
|
||
| <PropsTable of='Card' /> | ||
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,7 @@ | ||
| # Theming | ||
|
|
||
| :::info | ||
|
|
||
| We are working on providing content for this. Feel free to help us out here https://github.com/chakra-ui/chakra-ui-docs | ||
|
|
||
| ::: |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Oops, something went wrong.
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
You might want to check if the examples are rendered properly. I've added a way to make the live preview box different sizes so you don't have scrolling examples
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
I'm not sure I get what you mean. The examples render correctly with the
livetag, although there's a scroll in the preview. In what way did you make the examples non-scrolling?There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
If you check other components live blocks in the code. There is in some places sm,md,lg to describe which high it should have. This is because some components are to big for the default high of the iframe.