การ์ด

คอนเทนเนอร์ที่ยืดหยุ่นพร้อมส่วนหัว เนื้อหา และส่วนท้ายที่ไม่บังคับ ใช้เพื่อจัดกลุ่มข้อมูลที่เกี่ยวข้อง

การใช้งานพื้นฐาน

เนื้อหาการ์ด

Lorem ipsectetur adipiscing elit. Sed etiam, sed etiam.
Lorem ipsectetur adipiscing elit. Sed etiam, sed etiam.

<template>
  <spr-card>
    <template #content>
      <div>เนื้อหาการ์ด</div>
      <div>Lorem ipsectetur adipiscing elit. Sed etiam, sed etiam.</div>
    </template>
  </spr-card>
</template>

โทน

การ์ดรองรับโทนต่างๆ เพื่อระบุสถานะหรือระดับความสำคัญต่างๆ โทนที่มีอยู่คือ: plain, neutral, success, information, pending, caution, accent, และ danger

ธรรมดา

เป็นกลาง

สำเร็จ

ข้อมูล

รอดำเนินการ

เตือน

เฉพาะ

อันตราย

ส่วนหัวและส่วนท้าย

การส่ง title จะแสดงส่วนหัวโดยอัตโนมัติ ใช้สล็อต footer เพื่อเพิ่มส่วนท้าย

หัวข้อการ์ด

เนื้อหาการ์ด

Lorem ipsectetur adipiscing elit. Sed etiam, sed etiam.

Lorem ipsectetur adipiscing elit. Sed etiam, sed etiam.

<template>
  <spr-card title="หัวข้อการ์ด">
    <template #content>
      <div>เนื้อหาการ์ด</div>
      <div>Lorem ipsectetur adipiscing elit. Sed etiam, sed etiam.</div>
      <div>Lorem ipsectetur adipiscing elit. Sed etiam, sed etiam.</div>
    </template>
    <template #footer>
      <div class="spr-ms-auto spr-flex spr-items-center spr-gap-size-spacing-3xs">
        <spr-button variant="secondary">รอง</spr-button>
        <spr-button tone="success">หลัก</spr-button>
      </div>
    </template>
  </spr-card>
</template>

บังคับซ่อนส่วนหัวและส่วนท้าย

ส่ง props show-header และ show-footer เป็น false เพื่อซ่อนส่วนหัวและส่วนท้ายแม้ว่าจะมีเนื้อหามา

เนื้อหาการ์ด

Lorem ipsectetur adipiscing elit. Sed etiam, sed etiam.

Lorem ipsectetur adipiscing elit. Sed etiam, sed etiam.

<template>
  <spr-card title="หัวข้อการ์ด" :show-header="false" :show-footer="false">
    <template #content>
      <div>เนื้อหาการ์ด</div>
      <div>Lorem ipsectetur adipiscing elit. Sed etiam, sed etiam.</div>
      <div>Lorem ipsectetur adipiscing elit. Sed etiam, sed etiam.</div>
    </template>
    <template #footer>
      <div class="spr-ms-auto spr-flex spr-items-center spr-gap-size-spacing-3xs">
        <spr-button variant="secondary">รอง</spr-button>
        <spr-button tone="success">หลัก</spr-button>
      </div>
    </template>
  </spr-card>
</template>

ไอคอน

ส่ง prop header-icon เพื่อแสดงไอคอนในส่วนหัว Prop title จำเป็นสำหรับไอคอนที่จะมองเห็นได้

หัวข้อการ์ด

เนื้อหาการ์ด

Lorem ipsectetur adipiscing elit. Sed etiam, sed etiam.

<template>
  <spr-card title="หัวข้อการ์ด" header-icon="ph:check-circle-duotone">
    <template #content>
      <div>เนื้อหาการ์ด</div>
      <div>Lorem ipsectetur adipiscing elit. Sed etiam, sed etiam.</div>
    </template>
    <template #footer>
      <div class="spr-ms-auto spr-flex spr-items-center spr-gap-size-spacing-3xs">
        <spr-button variant="secondary">รอง</spr-button>
        <spr-button tone="success">หลัก</spr-button>
      </div>
    </template>
  </spr-card>
</template>

คำบรรยาย

ส่ง prop subtitle เพื่อแสดงคำบรรยายใต้หัวข้อ Prop title จำเป็น

หัวข้อการ์ด

นี่คือตัวอย่างคำบรรยาย

เนื้อหาการ์ด

Lorem ipsectetur adipiscing elit. Sed etiam, sed etiam.

<template>
  <spr-card title="หัวข้อการ์ด" subtitle="นี่คือตัวอย่างคำบรรยาย" header-icon="ph:check-circle-duotone">
    <template #content>
      <div>เนื้อหาการ์ด</div>
      <div>Lorem ipsectetur adipiscing elit. Sed etiam, sed etiam.</div>
    </template>
    <template #footer>
      <div class="spr-ms-auto spr-flex spr-items-center spr-gap-size-spacing-3xs">
        <spr-button variant="secondary">รอง</spr-button>
        <spr-button tone="success">หลัก</spr-button>
      </div>
    </template>
  </spr-card>
</template>

ส่วนหัวที่กำหนดเอง

ใช้สล็อต header เพื่อเพิ่มเนื้อหาในส่วนหัว จะถูกวางไว้ข้างหัวข้อ

หัวข้อการ์ด

9

เนื้อหาการ์ด

Lorem ipsectetur adipiscing elit. Sed etiam, sed etiam.

<template>
  <spr-card title="หัวข้อการ์ด" header-icon="ph:newspaper-duotone">
    <template #header>
      <div class="spr-flex spr-grow spr-items-center spr-justify-between">
        <spr-badge text="9" variant="danger" size="small" />
        <spr-button variant="secondary" size="small">รอง</spr-button>
      </div>
    </template>
    <template #content>
      <div>เนื้อหาการ์ด</div>
      <div>Lorem ipsectetur adipiscing elit. Sed etiam, sed etiam.</div>
    </template>
  </spr-card>
</template>

หาก prop title ถูกละเว้น สล็อต header สามารถปรับแต่งส่วนหัวได้อย่างสมบูรณ์

เนื้อหาการ์ด

Lorem ipsectetur adipiscing elit. Sed etiam, sed etiam.

<template>
  <spr-card>
    <template #header>
      <div>
        <img
          src="@/assets/images/banner-sample.svg"
          class="spr-pointer-events-none spr-h-[18px] spr-w-full spr-rounded-t-border-radius-xl spr-object-cover"
        />
      </div>
    </template>
    <template #content>
      <div>เนื้อหาการ์ด</div>
      <div>Lorem ipsectetur adipiscing elit. Sed etiam, sed etiam.</div>
    </template>
  </spr-card>
</template>

ความกว้างเส้นขอบ

ส่ง prop border-width เพื่อปรับแต่งความกว้างเส้นขอบของการ์ด ยอมรับค่าความกว้าง CSS ที่ถูกต้องใดๆ

หัวข้อการ์ด

เนื้อหาการ์ด

Lorem ipsectetur adipiscing elit. Sed etiam, sed etiam.

Lorem ipsectetur adipiscing elit. Sed etiam, sed etiam.

<template>
  <spr-card title="หัวข้อการ์ด" border-width="6px">
    <template #content>
      <div>เนื้อหาการ์ด</div>
      <div>Lorem ipsectetur adipiscing elit. Sed etiam, sed etiam.</div>
      <div>Lorem ipsectetur adipiscing elit. Sed etiam, sed etiam.</div>
    </template>
    <template #footer>
      <div class="spr-ms-auto spr-flex spr-items-center spr-gap-size-spacing-3xs">
        <spr-button variant="secondary">รอง</spr-button>
        <spr-button tone="success">หลัก</spr-button>
      </div>
    </template>
  </spr-card>
</template>

รัศมีเส้นขอบ

ส่ง prop border-radius-size เพื่อปรับแต่งรัศมีเส้นขอบของการ์ด ยอมรับขนาดที่กำหนดไว้ล่วงหน้า: xl, lg, md, sm, xs, และ 2xs

หัวข้อการ์ด

เนื้อหาการ์ด

Lorem ipsectetur adipiscing elit. Sed etiam, sed etiam.

Lorem ipsectetur adipiscing elit. Sed etiam, sed etiam.

<template>
  <spr-card title="หัวข้อการ์ด" border-radius-size="sm">
    <template #content>
      <div>เนื้อหาการ์ด</div>
      <div>Lorem ipsectetur adipiscing elit. Sed etiam, sed etiam.</div>
      <div>Lorem ipsectetur adipiscing elit. Sed etiam, sed etiam.</div>
    </template>
    <template #footer>
      <div class="spr-ms-auto spr-flex spr-items-center spr-gap-size-spacing-3xs">
        <spr-button variant="secondary">รอง</spr-button>
        <spr-button tone="success">หลัก</spr-button>
      </div>
    </template>
  </spr-card>
</template>

API Reference

Props

ชื่อ	ประเภท	ค่าเริ่มต้น	คำอธิบาย
id	string	''	ตัวระบุเฉพาะสำหรับองค์ประกอบอินพุต ใช้สำหรับเชื่อมโยงอินพุตกับป้ายกำกับเพื่อการเข้าถึง
tone	'plain' | 'neutral' | 'success' | 'information' | 'pending' | 'caution' | 'accent' | 'danger'	''	ตั้งหัวข้อของการ์ดในส่วนหัว
title	string	''	ตั้งหัวข้อของการ์ดในส่วนหัว
subtitle	string	''	ตั้งคำบรรยายของการ์ดที่แสดงใต้หัวข้อ ต้องมีหัวข้อจึงจะมองเห็นได้
header-icon	string	''	แสดงไอคอนในส่วนหัวโดยใช้รูปแบบชื่อไอคอน Iconify ต้องมีหัวข้อจึงจะมองเห็นได้
show-header	boolean	true	ควบคุมการมองเห็นของส่วนหัว
show-footer	boolean	true	ควบคุมการมองเห็นของส่วนท้าย
border-width	สไตล์ความกว้าง	'1px'	ตั้งความกว้างเส้นขอบของการ์ด
border-radius-size	'xl' | 'lg' | 'md' | 'sm' | 'xs' | '2xs'	'xl'	ตั้งรัศมีเส้นขอบของการ์ด รวมถึงส่วนหัวและส่วนท้าย
has-collapsible	boolean	false	ระบุว่าการ์ดถูกใช้กับคอมโพเนนต์ที่ยุบได้ ซึ่งส่งผลต่อสไตล์เส้นขอบ
is-collapsible-open	boolean	false	ติดตามว่ามีการขยายเนื้อหาหรือไม่เมื่อใช้กับคอมโพเนนต์ที่ยุบได้เพื่อใช้สไตล์เส้นขอบที่เหมาะสม
has-content-padding	boolean	true	ควบคุมว่ามีการใช้การเว้นระยะกับพื้นที่เนื้อหาของการ์ดหรือไม่
flexbox	boolean	false	เมื่อเป็น true จะใช้เลย์เอาต์ flexbox กับการ์ด ทำให้เป็นคอนเทนเนอร์ flex ที่มีทิศทางคอลัมน์
customBorderSize	string | null	null	ตั้งขนาดเส้นขอบที่กำหนดเองสำหรับการ์ด หากไม่ได้ตั้งค่า จะใช้ขนาดเส้นขอบเริ่มต้น

Slots

ชื่อ	คำอธิบาย
header	เนื้อหาที่กำหนดเองสำหรับส่วนหัวของการ์ด จะถูกแสดงข้างหัวข้อหากมีมา หรือสามารถแทนที่ส่วนหัวเริ่มต้นได้อย่างสมบูรณ์หากไม่ได้ตั้งหัวข้อ
content	เนื้อหาหลักของการ์ด สล็อตนี้แนะนำสำหรับการจัดระเบียบเนื้อหาภายในการ์ด
default	สล็อตทางเลือกสำหรับเนื้อหา ใช้เฉพาะเมื่อไม่ได้มีสล็อตเนื้อหามา
footer	เนื้อหาที่กำหนดเองสำหรับส่วนท้ายของการ์ด โดยปกติใช้สำหรับปุ่มการดำเนินการหรือข้อมูลสรุป

การใช้ผลิตภัณฑ์