Onu-UICard UPDATED
Cards are used to group and display content in a way that is easily readable.
Basic usage
Card includes title, content and operations.
Card is made up of header and content. header is optional, and its content distribution depends on a named slot.
Simple card
The Card only contains content.
Only title
The Card only contains title.
Divider
The Card can set divider attribute style.
Shadow
You can define when to show the card shadows.
The shadow attribute determines when the card shadows are displayed. It can be always, hover or never.
Descriptions
You can set description attribute to define Card's description.
Cover and Actions
You can set actions Slot to define Card Action Bar , also you can set cover prop to show Card's cover.
Embed style card
You can set embed attribute to define Card's embed style.
In light mode, sometimes you may need to make background a bit darker to distinguish card from white background.
Custome Actions
comprehensive
Here is the fully defined form of the card exaples.
Card Props
| Name | Type | Default | Description |
|---|---|---|---|
| title | string | undefined | Card title. |
| description | string | undefined | Card description. |
| content | string | undefined | Card content. |
| cover | string | undefined | Card header's cover. |
| size | 'sm' | 'md' | 'md' | Size of the card. |
| shadow | 'always' | 'hover' | never | When to show card's shadow |
| divider | boolean | false | Whether show embed style card. |
| embed | boolean | false | Whether show Card divider. |
| header | string | VNode | undefined | Customer card's header. |
| extra | string | VNode | undefined | Customer card's header extra. |
| actions | string | VNode | undefined | Customer card's actions bar. |
Card Slots
| Name | Parameters | Description |
|---|---|---|
| default | () | Customize default content. |
| header | () | Customize content of the Card header. |
| extra | () | Customize content of the Card extra. |
| actions | () | Customize content of the Card actions. |