+
{renderCover(props, slots, prefixCls)}
<ɵHeader v-slots={slots} size="sm" header={props.header} />
{renderBody(props, children, hasGrid, prefixCls)}
{renderFooter(props, slots, prefixCls)}
+ {renderCornerMark(props, prefixCls)}
)
}
},
})
+const renderCornerMark = (props: CardProps, prefixCls: string) => {
+ const { selectable } = props
+ if (!selectable) {
+ return undefined
+ }
+
+ return (
+
+ )
+}
+
const renderCover = (props: CardProps, slots: Slots, prefixCls: string) => {
let coverNode: VNodeTypes | undefined
if (slots.cover) {
diff --git a/packages/components/card/src/types.ts b/packages/components/card/src/types.ts
index 973fa6dee..a28b5f6d9 100644
--- a/packages/components/card/src/types.ts
+++ b/packages/components/card/src/types.ts
@@ -35,6 +35,13 @@ export const cardProps = {
loading: IxPropTypes.bool.def(false),
size: IxPropTypes.oneOf
(['sm', 'md', 'lg']),
footer: IxPropTypes.array(),
+ disabled: IxPropTypes.bool.def(false),
+ selected: IxPropTypes.bool.def(false),
+ selectable: IxPropTypes.bool.def(false),
+
+ // event
+ 'onUpdate:selected': IxPropTypes.emit<(selected: boolean) => void>(),
+ onChange: IxPropTypes.emit<(selected: boolean) => void>(),
}
export type CardProps = ExtractInnerPropTypes
diff --git a/packages/components/card/style/index.less b/packages/components/card/style/index.less
index 6f86cf464..defcbbe33 100644
--- a/packages/components/card/style/index.less
+++ b/packages/components/card/style/index.less
@@ -117,6 +117,80 @@
}
}
+ &-selectable {
+ position: relative;
+ overflow: hidden;
+ cursor: pointer;
+ border: @card-border-width @card-border-style @card-border-color-selectable;
+ box-shadow: none;
+
+ &:hover {
+ border: @card-border-width @card-border-style @card-border-color-selectable-hover;
+ box-shadow: @card-box-shadow-selectable;
+
+ .@{card-prefix}-mark{
+ border-color: @card-border-color-selectable @card-border-color-selectable transparent transparent;
+ }
+ }
+ }
+
+ &-mark-wrap {
+ position: absolute;
+ top: 0;
+ right: 0;
+ width: @card-icon-width;
+ height: @card-icon-height;
+ }
+
+ &-mark {
+ width: 0;
+ height: 0;
+ border-style: @card-border-style;
+ border-width: (@card-icon-height / 2) (@card-icon-width / 2);
+ border-color: @card-icon-color @card-icon-color transparent transparent;
+ border-radius: 0 @card-border-width 0;
+ }
+
+ &-mark-icon {
+ font-size: @font-size-xl;
+ position: absolute;
+ top: -6px;
+ right: -4px;
+ }
+
+ &-selected {
+ border: @card-border-width @card-border-style @color-primary;
+ box-shadow: @card-box-shadow-selectable;
+
+ .@{card-prefix}-mark {
+ border-color: @color-primary @color-primary transparent transparent;
+ }
+
+ &:hover {
+ border: @card-border-width @card-border-style @color-primary;
+ box-shadow: @card-box-shadow-selectable;
+
+ .@{card-prefix}-mark {
+ border-color: @color-primary @color-primary transparent transparent;
+ }
+ }
+ }
+
+ &-disabled {
+ opacity: 0.4;
+ cursor: not-allowed;
+
+ &.@{card-prefix}-selectable:hover {
+ border: @card-border-width @card-border-style @card-border-color-selectable;
+ box-shadow: none;
+ }
+
+ &.@{card-prefix}-selected:hover {
+ border: @card-border-width @card-border-style @color-primary;
+ box-shadow: @card-box-shadow-selectable;
+ }
+ }
+
.@{idux-prefix}-header {
&-content {
> .@{idux-prefix}-header-suffix {
diff --git a/packages/components/card/style/themes/default.variable.less b/packages/components/card/style/themes/default.variable.less
index 1ba89b084..59fd38339 100644
--- a/packages/components/card/style/themes/default.variable.less
+++ b/packages/components/card/style/themes/default.variable.less
@@ -8,6 +8,13 @@
@card-border-color: @color-graphite-l30;
@card-border-color-hover: transparent;
@card-border-radius: @border-radius-sm;
+@card-border-color-selectable: @color-graphite-l20;
+@card-border-color-selectable-selected: @color-primary;
+@card-border-color-selectable-hover: @color-primary-l10;
+@card-icon-color: @color-graphite-l30;
+@card-icon-width: @font-size-xl;
+@card-icon-height: @font-size-lg;
+@card-box-shadow-selectable: 0 2px 8px 0 rgba(30, 35, 43, 0.12);
@card-box-shadow: @shadow-bottom-sm;
@card-gradient-min: fade(@color-grey, 20%);
@card-gradient-max: fade(@color-grey, 60%);