卡片 Card

通用的容器组件，多用于包裹其他元素。

basic

你可以为卡片添加任何样式。

basic card

预览代码

<script setup lang="ts">
  defineOptions({ name: 'ex-card-basic' })
</script>

<template>
  <g-card>
    <p>basic card</p>
  </g-card>
</template>

hoverable

带有 hover 效果的卡片。

hoverable card

预览代码

<script setup lang="ts">
  defineOptions({ name: 'ex-card-hoverable' })
</script>

<template>
  <g-card hoverable>
    <p>hoverable card</p>
  </g-card>
</template>

shadow

带有 shadow 效果的卡片。

Geist Desing

shadow card

预览代码

<script setup lang="ts">
  defineOptions({ name: 'ex-card-shadow' })
</script>

<template>
  <g-card shadow>
    <h4>Geist Desing</h4>
    <p>shadow card</p>
  </g-card>
</template>

Attributes

属性	描述	类型	推荐值	默认
hoverable	打开 hover 效果	`boolean`	-	`false`
shadow	打开 shadow 效果	`boolean`	-	`false`

卡片 Card ​

basic

hoverable

shadow

Geist Desing

Attributes

卡片 Card