|
1 | 1 | --- |
2 | | -title: CheckCard - Check Card |
3 | | -order: 5 |
4 | 2 | nav: |
5 | | - title: Components |
6 | | - order: 100 |
7 | | - path: /components |
| 3 | + title: Card |
| 4 | +group: Card |
| 5 | +title: CheckCard - Multi-select Card |
| 6 | +order: 1 |
| 7 | +atomId: CheckCard |
8 | 8 | --- |
9 | 9 |
|
10 | | -# CheckCard - Check Card |
| 10 | +# CheckCard - Multi-select Card |
11 | 11 |
|
12 | | -## When to Use |
| 12 | +The CheckCard is a card that can contain various related descriptive information and can be selected. Features: |
13 | 13 |
|
14 | | -CheckCard - Check Card is a powerful component suitable for the following scenarios: |
| 14 | +- ① Can contain various related descriptive information, such as title, description, image, labels, etc. |
| 15 | +- ② Has a clear boundary. |
| 16 | +- ③ Has a clear selected state. |
15 | 17 |
|
16 | | -- Scenario description 1 |
17 | | -- Scenario description 2 |
18 | | -- Scenario description 3 |
| 18 | +## When to use |
19 | 19 |
|
20 | | -## Code Examples |
| 20 | +- When you need to display multiple descriptive information of selected objects. |
| 21 | +- When the number of selected objects is not large. |
| 22 | + |
| 23 | +## Code Demo |
21 | 24 |
|
22 | 25 | ### Basic Usage |
23 | 26 |
|
24 | | -```tsx |
25 | | -import { CheckCard } from '@ant-design/pro-components'; |
| 27 | +The most commonly used example of a card, including avatar, title, description, etc., and can be selected. |
| 28 | + |
| 29 | +<code src="../../../demos/card/CheckCard/basic.tsx" ></code> |
| 30 | + |
| 31 | +<code src="../../../demos/card/CheckCard/single.tsx" description="When there are multiple options, you can use the `CheckCard.Group` to group them. The default option card component is in single selection mode." thumbnail="https://gw.alipayobjects.com/zos/bmw-prod/be0fcade-afae-4e85-95ef-a3cc90f6d4b3/kc60kq47_w1362_h412.jpeg" ></code> |
| 32 | + |
| 33 | +<code src="../../../demos/card/CheckCard/multiple.tsx" thumbnail="https://gw.alipayobjects.com/zos/bmw-prod/06963ad4-ba2b-4733-a1c5-778e7f696ac1/kc61xhvk_w1364_h280.jpeg" description="Set the `multiple` property of `CheckCard.Group` to enable multiple selection. Note that in multiple selection mode, the form item returns an array." ></code> |
| 34 | + |
| 35 | +### Different Sizes |
| 36 | + |
| 37 | +Configure the `size` property to change the size of the card. Currently available options are `large`, `default`, and `small`, with only the width being different. |
| 38 | + |
| 39 | +<code src="../../../demos/card/CheckCard/size.tsx" ></code> |
| 40 | + |
| 41 | +Of course, you can also customize the size of the card using the `style` or `className` properties. |
| 42 | + |
| 43 | +### Custom Size |
| 44 | + |
| 45 | +<code src="../../../demos/card/CheckCard/custom.tsx" ></code> |
| 46 | + |
| 47 | +### Using in Form |
| 48 | + |
| 49 | +CheckCard can be used together with form components. Here is an example. |
| 50 | + |
| 51 | +<code src="../../../demos/card/CheckCard/form.tsx" oldtitle="CheckCard - Using in Form" thumbnail="https://gw.alipayobjects.com/zos/bmw-prod/c8fa2080-5a46-4f50-ae99-846b1804f56d/kc62b0ug_w1360_h656.jpeg" ></code> |
| 52 | + |
| 53 | +### Composing Styles |
| 54 | + |
| 55 | +The avatar, title, and description areas can be freely combined or presented separately. The component will adjust the alignment for you. |
| 56 | + |
| 57 | +<code src="../../../demos/card/CheckCard/compose.tsx" ></code> |
| 58 | + |
| 59 | +### Custom Avatar |
| 60 | + |
| 61 | +You can customize the avatar area using the `avatar` property. |
| 62 | + |
| 63 | +<code src="../../../demos/card/CheckCard/avatar.tsx" ></code> |
| 64 | + |
| 65 | +### Custom Title |
26 | 66 |
|
27 | | -export default () => { |
28 | | - return <CheckCard />; |
29 | | -}; |
30 | | -``` |
| 67 | +You can customize the title area using the `title` property. |
| 68 | + |
| 69 | +<code src="../../../demos/card/CheckCard/title.tsx" ></code> |
| 70 | + |
| 71 | +### Custom Description |
| 72 | + |
| 73 | +The description area can be customized using the `description` property with a React node. |
| 74 | + |
| 75 | +<code src="../../../demos/card/CheckCard/description.tsx" ></code> |
| 76 | + |
| 77 | +### Default Checked |
| 78 | + |
| 79 | +Set the `defaultChecked` property to `true` to specify that the option is checked by default. |
| 80 | + |
| 81 | +<code src="../../../demos/card/CheckCard/defaultChecked.tsx" ></code> |
| 82 | + |
| 83 | +### Action Area |
| 84 | + |
| 85 | +Use the `extra` property to add an action area to the card. |
| 86 | + |
| 87 | +<code src="../../../demos/card/CheckCard/extra.tsx" ></code> |
| 88 | + |
| 89 | +### Loading State |
| 90 | + |
| 91 | +Set the `loading` property to `true` to indicate that the content is still loading. |
| 92 | + |
| 93 | +<code src="../../../demos/card/CheckCard/loading.tsx" ></code> |
| 94 | + |
| 95 | +### Image Only Option |
| 96 | + |
| 97 | +By only setting the `cover` property, you can create an image-only option. |
| 98 | + |
| 99 | +<code src="../../../demos/card/CheckCard/image.tsx" ></code> |
31 | 100 |
|
32 | 101 | ## API |
33 | 102 |
|
34 | | -| Parameter | Description | Type | Default | |
35 | | -| --------- | -------------------- | -------- | ------- | |
36 | | -| prop1 | Property description | `string` | - | |
| 103 | +### CheckCard |
| 104 | + |
| 105 | +| Parameter | Description | Type | Default | |
| 106 | +| -------------- | ----------------------------------- | --------------------------------- | ----------- | |
| 107 | +| avatar | Avatar | `ReactNode` | - | |
| 108 | +| title | Title | `ReactNode` | - | |
| 109 | +| description | Description | `ReactNode` | - | |
| 110 | +| cover | Cover | `ReactNode` | - | |
| 111 | +| extra | Action area | `ReactNode` | - | |
| 112 | +| size | Size | `'large' \| 'default' \| 'small'` | `'default'` | |
| 113 | +| checked | Whether checked | `boolean` | - | |
| 114 | +| defaultChecked | Default checked state | `boolean` | `false` | |
| 115 | +| disabled | Whether disabled | `boolean` | `false` | |
| 116 | +| loading | Loading state | `boolean` | `false` | |
| 117 | +| onChange | Callback when checked state changes | `(checked: boolean) => void` | - | |
| 118 | +| onClick | Click callback | `(e: MouseEvent) => void` | - | |
| 119 | + |
| 120 | +### CheckCard.Group |
| 121 | + |
| 122 | +| Parameter | Description | Type | Default | |
| 123 | +| ------------ | ------------------------------- | ------------------------------------- | ------- | |
| 124 | +| multiple | Whether multiple selection | `boolean` | `false` | |
| 125 | +| value | Currently selected value | `string \| string[]` | - | |
| 126 | +| defaultValue | Default selected value | `string \| string[]` | - | |
| 127 | +| onChange | Callback when selection changes | `(value: string \| string[]) => void` | - | |
| 128 | +| options | Option configuration | `CheckCardOption[]` | - | |
37 | 129 |
|
38 | | -## Design Guidelines |
| 130 | +### CheckCardOption |
39 | 131 |
|
40 | | -CheckCard - Check Card follows Ant Design design guidelines, providing a consistent user experience. |
| 132 | +| Parameter | Description | Type | Default | |
| 133 | +| ----------- | ---------------- | ----------- | ------- | |
| 134 | +| title | Title | `ReactNode` | - | |
| 135 | +| description | Description | `ReactNode` | - | |
| 136 | +| avatar | Avatar | `ReactNode` | - | |
| 137 | +| cover | Cover | `ReactNode` | - | |
| 138 | +| extra | Action area | `ReactNode` | - | |
| 139 | +| value | Option value | `string` | - | |
| 140 | +| disabled | Whether disabled | `boolean` | `false` | |
0 commit comments