UNPKG

@opensig/opendesign

Version:

155 lines (154 loc) 3.77 kB
const CardCoverFitTypes = ["cover", "contain", "fill", "none", "scale-down"]; const CardHoverCursorTypes = ["auto", "pointer"]; const TextOverflowTypes = ["fade", "ellipsis"]; const cardProps = { /** * @zh-CN 卡片方向('v'为竖向,'h'为横向,'hr'为反向横向) * @en-US Card direction('v' for vertical, 'h' for horizontal, 'hr' for reversed horizontal) * @default 'v' */ layout: { type: String, default: "v" }, /** * @zh-CN 封面图片url * @en-US Card cover image URL */ cover: { type: String }, /** * @zh-CN 封面长宽比 * @en-US Cover aspect ratio */ coverRatio: { type: Number }, /** * @zh-CN 封面填充方式 * @en-US Cover fit type * @default 'cover' */ coverFit: { type: String, default: "cover" }, /** * @zh-CN 图标 * @en-US Icon */ icon: { type: [String, Object] }, /** * @zh-CN title开头的行内图标 * @en-US Title prefix icon */ titleIcon: { type: [String, Object] }, /** * @zh-CN 标题 * @en-US Title */ title: { type: String }, /** * @zh-CN 标题行数(影响标题盒子高度) * @en-US Title row count (affects the height of the title box) */ titleRow: { type: Number }, /** * @zh-CN 标题最大行数(超过此行数会显示省略号) * @en-US Title maximum row count (exceeds this row count will show ellipsis) */ titleMaxRow: { type: Number }, /** * @zh-CN 详情 * @en-US Detail */ detail: { type: String }, /** * @zh-CN 详情行数(影响详情盒子高度) * @en-US Detail row count (affects the height of the detail box) */ detailRow: { type: Number }, /** * @zh-CN 详情最大行数(超过此行数会显示省略号) * @en-US Detail maximum row count (exceeds this row count will show ellipsis) */ detailMaxRow: { type: Number }, /** * @zh-CN 是否有鼠标悬停效果 * @en-US Whether the card has a hover effect */ hoverable: { type: Boolean }, /** * @zh-CN 鼠标悬停时的光标样式 * @en-US Cursor style when hovering over the card * @default 'auto' */ cursor: { type: String, default: "auto" }, /** * @zh-CN 封面盒子的类名(用来定制封面样式) * @en-US Class name for the cover box (used to customize the cover style) */ coverClass: { type: [String, Array, Object] }, /** * @zh-CN 跳转链接(该属性有值时,卡片会被渲染为链接) * @en-US Link URL (when this property has a value, the card will be rendered as a link) */ href: { type: String }, /** * @zh-CN 卡片尺寸是否跟随视口大小变化而变化 * @en-US Whether the card size changes with the viewport size */ noResponsive: { type: Boolean }, /** * @zh-CN 控制详情超出隐藏显示效果,'fade' 表示渐隐效果,'ellipsis' 表示 '...' 效果 * @en-US The control details exceed the hidden display effect. 'fade' indicates the fade-out effect, and 'ellipsis' indicates '...' Effect */ textOverflow: { type: String, default: "fade" }, /** * @zh-CN 文本溢出时,悬停是否以气泡展示完整内容(仅对 prop 传入的 title/detail 生效,通过 slot 传入时需调用者自行实现) * @en-US Whether to show a popover with the full content on hover when text overflows (only applies to title/detail passed via props; for slot content, the caller must implement it themselves) * @default false * @since 1.2.5 */ showOverflowTooltip: { type: Boolean, default: false } }; export { CardCoverFitTypes, CardHoverCursorTypes, TextOverflowTypes, cardProps };