Press n or j to go to the next uncovered block, b, p or k for the previous block.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 | 11x 11x 11x 24x 24x 24x 11x 27x 27x 27x 27x 11x | import React, { forwardRef, Ref } from "react"; import classNames from "classnames"; import { createRocket } from "../_util/create-rocket"; import { StyledProps, InferProps } from "../_type"; import { forwardRefWithStatics } from "../_util/forward-ref-with-statics"; import { Justify } from "../justify"; import { useConfig } from "../_util/config-context"; import { H3 } from "../heading"; /** * 卡片组件 `<Card>` 属性集合。 */ export interface CardProps extends StyledProps { /** * 卡片内容,可包含 * * - `<Card.Header>` 卡片头部 * - `<Card.Body>` 卡片主体 * - `<Card.Footer>` 卡片底部 */ children?: React.ReactNode; /** * 是否显示为带边框样式 */ bordered?: boolean; /** * 是否铺满内容区 * * - `false` - 不铺满 * - `true` - 铺满(页面不包含顶部一级标题,即 `Layout.Content.Header`) * - `"withHeader"` - 铺满(页面包含顶部一级标题,即 `Layout.Content.Header`) */ full?: boolean | "withHeader"; } const CardHeader = createRocket("CardHeader", "div.@{prefix}-card__header"); const CardFooter = createRocket("CardFooter", "div.@{prefix}-card__footer"); /** * 卡片头部 `<Card.Header>` 属性集合。 */ export interface CardHeaderProps extends InferProps<typeof CardHeader> {} /** * 卡片主体 `<Card.Body>` 属性集合。 */ export interface CardBodyProps extends StyledProps { /** * 内容标题(可选) */ title?: React.ReactNode; /** * 内容小标题(可选) */ subtitle?: React.ReactNode; /** * 操作区(可选) */ operation?: React.ReactNode; /** * 内容 */ children?: React.ReactNode; } /** * 卡片底部 `<Card.Footer> 属性列表` */ export interface CardFooterProps extends InferProps<typeof CardFooter> {} const CardBody = forwardRef( (props: CardBodyProps, ref: Ref<HTMLDivElement>) => { const { classPrefix } = useConfig(); const { className, style, title, subtitle, operation, children } = props; return ( <div ref={ref} className={classNames(`${classPrefix}-card__body`, className)} style={style} > {(title || subtitle || operation) && ( <div className={`${classPrefix}-card__title`}> <Justify left={ <H3> {title} {subtitle && ( <span className={`${classPrefix}-card__subtitle`}> {subtitle} </span> )} </H3> } right={operation} /> </div> )} <div className={`${classPrefix}-card__content`}>{children}</div> </div> ); } ); export const Card = forwardRefWithStatics( (props: CardProps, ref: Ref<HTMLDivElement>) => { const { classPrefix } = useConfig(); const { className, style, children, bordered, full } = props; const cardClassName = classNames( `${classPrefix}-card`, { [`${classPrefix}-card--bordered`]: bordered, [`${classPrefix}-card--full`]: full === true, [`${classPrefix}-card--full-with-header`]: full === "withHeader", }, className ); return ( <div ref={ref} className={cardClassName} style={style}> {children} </div> ); }, // Card statics { Header: CardHeader, Body: CardBody, Footer: CardFooter, } ); Card.displayName = "Card"; |