卡片 Card |
您所在的位置：网站首页 › 全屏选项卡嵌套瀑布流 › 卡片 Card |
卡片 Card
| 何时使用 最基础的卡片容器，可承载文字、列表、图片、段落，常用于后台概览页面。 代码演示Default size cardMoreCard content Card content Card content Small size cardMoreCard content Card content Card content 典型卡片包含标题、内容、操作区域。 External Link Icon  Card titleCard content Card content Card content 无边框在灰色背景上使用无边框的卡片。 External Link IconCard content Card content Card content 简洁卡片只包含内容区域。 External Link Icon Europe Street beatwww.instagram.com更灵活的内容展示可以利用 Card.Meta 支持更灵活的内容。 External Link IconCard titleCard contentCard titleCard contentCard titleCard content栅格卡片在系统概览页面常常和栅格进行配合。 External Link Icon预加载的卡片数据读入前会有文本块样式。 External Link IconCard TitleContentContentContentContentContentContentContent网格型内嵌卡片一种常见的卡片内容区隔模式。 External Link IconCard titleInner Card titleMoreInner Card contentInner Card titleMoreInner Card content内部卡片可以放在普通卡片内部，展示多层级结构的信息。 External Link IconCard titleMoretab1tab2content1 articleappprojectMoreapp content 带页签的卡片可承载更多内容。 External Link Icon 一种支持封面、头像、标题和描述信息的卡片。 External Link IconAPI通用属性参考：通用属性 卡片内容Card参数说明类型默认值版本actions卡片操作组，位置在卡片底部Array-activeTabKey当前激活页签的 keystring-bordered是否有边框booleantruecover卡片封面ReactNode-defaultActiveTabKey初始化选中页签的 key，如果没有设置 activeTabKeystring第一个页签的 keyextra卡片右上角的操作区域ReactNode-hoverable鼠标移过时可浮起booleanfalseloading当卡片内容还在加载中时，可以用 loading 展示一个占位booleanfalsesizecard 的尺寸default | smalldefaulttabBarExtraContenttab bar 上额外的元素ReactNode-tabList页签标题列表TabItemType[]-tabPropsTabs--title卡片标题ReactNode-type卡片类型，可设置为 inner 或 不设置string-classNames配置卡片内置模块的 classNameRecord-5.14.0styles配置卡片内置模块的 styleRecord-5.14.0onTabChange页签切换的回调(key) => void-Card.Grid参数说明类型默认值版本className网格容器类名string-hoverable鼠标移过时可浮起booleantruestyle定义网格容器类名的样式CSSProperties-Card.Meta参数说明类型默认值版本avatar头像/图标ReactNode-className容器类名string-description描述内容ReactNode-style定义容器类名的样式CSSProperties-title标题内容ReactNode-styles 和 classNames 属性名称说明版本header设置卡片头部区域5.14.0body设置卡片内容区域5.14.0extra设置卡片右上角的操作区域5.14.0title设置卡片标题5.14.0actions设置卡片底部操作组5.14.0cover设置标题封面5.14.0主题变量（Design Token）组件 Token如何定制？Token 名称描述类型默认值actionsBg操作区背景色string#ffffffactionsLiMargin操作区每一项的外间距string12px 0extraColor额外区文字颜色stringrgba(0, 0, 0, 0.88)headerBg卡片头部背景色stringtransparentheaderFontSize卡片头部文字大小number16headerFontSizeSM小号卡片头部文字大小number14headerHeight卡片头部高度number56headerHeightSM小号卡片头部高度number38tabsMarginBottom内置标签页组件下间距number-17全局 Token如何定制？ |
【本文地址】
公司简介
联系我们
今日新闻 |
点击排行 |
|
推荐新闻 |
图片新闻 |
|
专题文章 |