Card 卡片

• NPC-UI 是一个轻量的前端组件库
• 像游戏角色一样为开发者提供丰富的元素

这是小标题

查看更多

• NPC-UI 是一个轻量的前端组件库
• 像游戏角色一样为开发者提供丰富的元素

默认标题

查看更多

• NPC-UI 是一个轻量高效的前端组件库
• 像游戏中的智能角色一样为开发者提供丰富的交互元素

插槽标题

查看更多

• NPC-UI 是一个轻量高效的前端组件库
• 像游戏中的智能角色一样为开发者提供丰富的交互元素

这是底部

Card卡片

这是 Card 基础例子

<script setup lang="ts">

</script>

<template>
  <div class="card-demo">
    <NpCard>
      <ul>
        <li>NPC-UI 是一个轻量的前端组件库</li>
        <li>像游戏角色一样为开发者提供丰富的元素</li>
      </ul>
    </NpCard>
  </div>
  <div class="card-demo">
    <NpCard :border="false" size="small" title="这是小标题">
      <template #extra>
        <a href="">查看更多</a>
      </template>
      <ul>
        <li>NPC-UI 是一个轻量的前端组件库</li>
        <li>像游戏角色一样为开发者提供丰富的元素</li>
      </ul>
    </NpCard>
  </div>
  <div class="card-demo">
    <NpCard :circle="false" title="默认标题">
      <template #extra>
        <a href="">查看更多</a>
      </template>
      <ul>
        <li>NPC-UI 是一个轻量高效的前端组件库</li>
        <li>像游戏中的智能角色一样为开发者提供丰富的交互元素</li>
      </ul>
    </NpCard>
  </div>
  <div class="card-demo">
    <NpCard :circle="false">
      <template #title>
        插槽标题
      </template>
      <template #extra>
        <a href="">查看更多</a>
      </template>
      <ul>
        <li>NPC-UI 是一个轻量高效的前端组件库</li>
        <li>像游戏中的智能角色一样为开发者提供丰富的交互元素</li>
      </ul>
      <template #footer>
        这是底部
      </template>
    </NpCard>
  </div>
</template>

<style scoped>
.card-demo {
  margin: 20px;
  display: flex;
  flex-direction: row;
  gap: 20px;
}
</style>

• 使用cover插槽
• 默认插槽要有文字描述，否则没必要使用

Card卡片

这是 cover 插槽的例子

<script setup lang="ts">

</script>

<template>
  <div class="card-demo">
    <NpCard v-for="num in 2" :key="num" size="small">
      <template #cover>
        <img src="https://os.alipayobjects.com/rmsportal/QBnOOoLaAfKPirc.png" alt="">
      </template>
      <ul v-if="num % 2 === 0">
        <li>使用cover插槽</li>
        <li>默认插槽要有文字描述，否则没必要使用</li>
      </ul>
    </NpCard>
  </div>
</template>

<style scoped>
.card-demo {
  margin: 20px;
  display: flex;
  flex-direction: row;
  gap: 20px;
}
</style>