โลเซนจ์

โลเซนจ์แสดงถึงเอนทิตีโดยใช้ไอคอน ป้ายกำกับ และรูปภาพ

คุณสมบัติหลัก

label: ข้อความป้ายกำกับที่แสดงภายในโลเซนจ์
tone: โทนสีของโลเซนจ์ โทนที่มีให้เลือก: 'plain', 'pending', 'information', 'success', 'danger', 'neutral', 'caution'
fill: บูลีนที่ระบุว่าลอเซนจ์ควรมีพื้นหลังที่เติมเต็ม (true) หรือสไตล์เส้นขอบ (false)
removevalue: บูลีนที่ระบุว่าจะแสดงไอคอนลบภายในโลเซนจ์ (true) หรือไม่ (false)
url: URL ของรูปภาพอวตารที่จะแสดงภายในโลเซนจ์
visible: บูลีนที่ระบุว่าลอเซนจ์มองเห็นได้ (true) หรือซ่อนอยู่ (false)
loading: บูลีนที่ระบุว่าจะแสดงสปินเนอร์การโหลดภายในโลเซนจ์ (true) หรือไม่ (false)
icon: ไอคอนที่จะแสดงภายในโลเซนจ์
postfixIcon: ไอคอนที่จะแสดงที่ส่วนท้ายของโลเซนจ์
interactive: บูลีนที่ระบุว่าลอเซนจ์เป็นแบบอินเทอร์แอกทีฟ (true) หรือไม่ (false)
dropdown: บูลีนที่ระบุว่าจะแสดงลูกศรดรอปดาวน์ภายในโลเซนจ์ (true) หรือไม่ (false)

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

โลเซนจ์พื้นฐานที่มีข้อความจะถูกสร้างด้วยพร็อพเพอร์ตี้ label

Lozenge

vue

<spr-lozenge label="Lozenge" />

โทนสีและการเติม

ปรับแต่งสไตล์สีของโลเซนจ์ (tone) และเลือกระหว่างรูปลักษณ์ที่เติมเต็มหรือเส้นขอบ (fill) เพื่อระบุสถานะหรือเน้น

plain

pending

information

success

neutral

danger

caution

plain

pending

information

success

neutral

danger

caution

vue

<div class="spr-flex spr-items-center spr-gap-2 spr-overflow-auto spr-py-3">
  <spr-lozenge label="plain"/>
  <spr-lozenge label="pending" tone="pending" />
  <spr-lozenge label="information" tone="information" />
  <spr-lozenge label="success" tone="success" />
  <spr-lozenge label="neutral" tone="neutral" />
  <spr-lozenge label="danger" tone="danger" />
  <spr-lozenge label="caution" tone="caution" />
</div>
<div class="spr-flex spr-items-center spr-gap-2 spr-overflow-auto spr-py-3">
  <spr-lozenge label="plain" fill />
  <spr-lozenge label="pending" tone="pending" fill />
  <spr-lozenge label="information" tone="information" fill />
  <spr-lozenge label="success" tone="success" fill />
  <spr-lozenge label="neutral" tone="neutral" fill />
  <spr-lozenge label="danger" tone="danger" fill />
  <spr-lozenge label="caution" tone="caution" fill />
</div>

อวตาร

คุณสามารถใช้พร็อพเพอร์ตี้ url เพื่อแสดงรูปภาพอวตาร หรือใช้ slot avatar สำหรับคอมโพเนนต์อวตารแบบกำหนดเอง

pending

information

success

neutral

danger

caution

plain

pending

information

success

neutral

danger

caution

plain

vue

<spr-lozenge label="pending" tone="pending" url="https://tinyurl.com/2vzn782p" />
<spr-lozenge label="information" tone="information" url="https://tinyurl.com/2vzn782p" />
<spr-lozenge label="success" tone="success" url="https://tinyurl.com/2vzn782p" />
<spr-lozenge label="neutral" tone="neutral" url="https://tinyurl.com/2vzn782p" />
<spr-lozenge label="danger" tone="danger" url="https://tinyurl.com/2vzn782p" />
<spr-lozenge label="caution" tone="caution" url="https://tinyurl.com/2vzn782p" />

<spr-lozenge label="pending" tone="pending" fill url="https://tinyurl.com/2vzn782p" />
<spr-lozenge label="information" tone="information" fill url="https://tinyurl.com/2vzn782p" />
<spr-lozenge label="success" tone="success" fill url="https://tinyurl.com/2vzn782p" />
<spr-lozenge label="neutral" tone="neutral" fill url="https://tinyurl.com/2vzn782p" />
<spr-lozenge label="danger" tone="danger" fill url="https://tinyurl.com/2vzn782p" />
<spr-lozenge label="caution" tone="caution" fill url="https://tinyurl.com/2vzn782p" />

อวตารแบบสล็อต

คุณยังสามารถใช้ slot avatar เพื่อปรับแต่งคอมโพเนนต์อวตารได้

Users

vue

<template>
  <spr-lozenge label="Users" tone="information">
    <template #icon>
      <Icon icon="ph:users-three" />
    </template>

    <template #avatar>
      <img class="h-full w-full rounded-full object-cover" src="https://tinyurl.com/2vzn782p" alt="avatar" />
    </template>
  </spr-lozenge>
</template>

<script lang="ts" setup>
import { Icon } from '@iconify/vue';
</script>

ไอคอนคำนำหน้าและคำต่อท้าย

คุณสามารถใช้พร็อพเพอร์ตี้ icon หรือ slot icon เพื่อเพิ่มไอคอนคำนำหน้าให้กับโลเซนจ์ โดยค่าเริ่มต้น พร็อพเพอร์ตี้ icon หรือ slot จะแสดงเป็นไอคอนคำนำหน้าก่อนป้ายกำกับ
หากต้องการเพิ่มไอคอนคำต่อท้าย ให้ใช้พร็อพเพอร์ตี้ postfixIcon หรือ slot postfixIcon ซึ่งจะช่วยให้คุณแสดงไอคอนหลังป้ายกำกับได้

pending

information

success

neutral

danger

caution

plain

pending

information

success

neutral

danger

caution

plain

pending

information

success

neutral

danger

caution

plain

pending

information

success

neutral

danger

caution

plain

vue

<template>
  <!-- ไอคอนคำนำหน้า -->
  <spr-lozenge label="pending" tone="pending" icon="ph:users-three" />
  <spr-lozenge label="pending" tone="pending">
    <template #icon>
      <Icon icon="ph:users-three" />
    </template>
  </spr-lozenge>

  <!-- ไอคอนคำต่อท้าย -->
  <spr-lozenge label="pending" tone="pending" postfix-icon="ph:users-three" />
  <spr-lozenge label="pending" tone="pending">
    <template #postfixIcon>
      <Icon icon="ph:users-three" />
    </template>
  </spr-lozenge>
</template>

<script lang="ts" setup>
import { Icon } from '@iconify/vue';
</script>

แบบอินเทอร์แอกทีฟ

พร็อพเพอร์ตี้ interactive เปิดใช้งานสถานะแบบอินเทอร์แอกทีฟสำหรับโลเซนจ์ ทำให้สามารถตอบสนองต่อการดำเนินการของผู้ใช้ เช่น การโฮเวอร์และกด ซึ่งมีประโยชน์ในการทำให้โลเซนจ์ทำงานเหมือนปุ่มหรือตัวเรียกเมนู

plain

pending

information

success

neutral

danger

caution

plain

pending

information

success

neutral

danger

caution

vue

<div class="spr-flex spr-items-center spr-gap-2 spr-overflow-auto spr-py-3">
  <spr-lozenge label="plain" interactive />
  <spr-lozenge label="pending" tone="pending" interactive />
  <spr-lozenge label="information" tone="information" interactive />
  <spr-lozenge label="success" tone="success" interactive />
  <spr-lozenge label="neutral" tone="neutral" interactive />
  <spr-lozenge label="danger" tone="danger" interactive />
  <spr-lozenge label="caution" tone="caution" interactive />
</div>
<div class="spr-flex spr-items-center spr-gap-2 spr-overflow-auto spr-py-3">
  <spr-lozenge label="plain" fill interactive />
  <spr-lozenge label="pending" tone="pending" fill interactive />
  <spr-lozenge label="information" tone="information" fill interactive />
  <spr-lozenge label="success" tone="success" fill interactive />
  <spr-lozenge label="neutral" tone="neutral" fill interactive />
  <spr-lozenge label="danger" tone="danger" fill interactive />
  <spr-lozenge label="caution" tone="caution" fill interactive />
</div>

ดรอปดาวน์

พร็อพเพอร์ตี้ dropdown ทำให้โลเซนจ์ทำงานเป็นองค์ประกอบแบบอินเทอร์แอกทีฟที่กำหนดไว้ล่วงหน้าพร้อมไอคอนดรอปดาวน์คำต่อท้ายเริ่มต้น (ph:caret-down-fill)

vue

<template>
  <spr-dropdown
    id="lozengeDropdown"
    v-model="dropdownSelection"
    :menu-list="menuList"
    lozenge
    @update:model-value="dropdownUpdateHandler"
  >
    <spr-lozenge v-bind="lozengeProps" dropdown />
  </spr-dropdown>
</template>

<script lang="ts" setup>
import { ref, computed } from 'vue';

import { LOZENGE_TONE } from '@/components/lozenge/lozenge';
import { MenuListType } from '@/components/list/list';
import { Header } from '@/components/table/table';

const menuList = ref(
  LOZENGE_TONE.map((tone: string) => ({
    text: `${tone.charAt(0).toUpperCase() + tone.slice(1)}`,
    value: tone,
    lozengeProps: {
      label: `${tone.charAt(0).toUpperCase() + tone.slice(1)}`,
      tone: tone,
      fill: true,
      url: 'https://tinyurl.com/2vzn782p',
      icon: 'ph:address-book-tabs',
    },
  })) as MenuListType[],
);

const dropdownSelection = ref('neutral');
const lozengeProps = computed(() => {
  return menuList.value.find((item) => item.value === dropdownSelection.value)?.lozengeProps;
});

const dropdownUpdateHandler = (newSelection: string) => {
  console.log('Dropdown selection updated:', newSelection);
};

const hollowMenuList = ref(
  LOZENGE_TONE.map((tone: string) => ({
    text: `${tone.charAt(0).toUpperCase() + tone.slice(1)}`,
    value: tone,
    lozengeProps: {
      label: `${tone.charAt(0).toUpperCase() + tone.slice(1)}`,
      tone: tone,
      fill: false,
      url: 'https://tinyurl.com/2vzn782p',
      icon: 'ph:address-book-tabs',
    },
  })) as MenuListType[],
);

const dropdownSelectionHollow = ref('neutral');
const hollowLozengeProps = computed(() => {
  return hollowMenuList.value.find((item) => item.value === dropdownSelectionHollow.value)?.lozengeProps;
});
</script>

หมายเหตุ

หากคุณระบุพร็อพเพอร์ตี้ postfixIcon หรือ slot มันจะแทนที่ไอคอนดรอปดาวน์เริ่มต้น

plain

vue

<spr-lozenge label="plain" dropdown>
  <template #postfixIcon>
    <Icon icon="ph:dots-three-vertical-bold" />
  </template>
</spr-lozenge>

การโหลด

vue

<template>
  <spr-lozenge loading />
</template>

ความกว้างสูงสุด

ใช้พร็อพเพอร์ตี้ max-width เพื่อจำกัดโลเซนจ์ที่มีป้ายกำกับยาว

A very long lozenge label that will be truncated

Unconstrained lozenge with long label

vue

<spr-lozenge label="A very long lozenge label that will be truncated" max-width="120px" tone="information" />

สล็อต

ชื่อ	คำอธิบาย
icon	ปรับแต่งคอมโพเนนต์ไอคอนคำนำหน้า
avatar	ปรับแต่งคอมโพเนนต์อวตาร
postfix-icon	ปรับแต่งคอมโพเนนต์ไอคอนคำต่อท้าย (แสดงหลังป้ายกำกับ)

การอ้างอิง API

พร็อพส์

ชื่อ	คำอธิบาย	ประเภท	ค่าเริ่มต้น
label	เนื้อหาข้อความหลักที่แสดงในโลเซนจ์	string	'label'
tone	กำหนดชุดสีของโลเซนจ์เพื่อระบุสถานะหรือการจัดหมวดหมู่ แต่ละโทนมีความหมายเชิงความหมาย: `plain`: ค่าเริ่มต้น การจัดสไตล์แบบเป็นกลาง `pending`: สำหรับสถานะที่กำลังดำเนินการหรือรออยู่ `information`: สำหรับเนื้อหาข้อมูล `success`: สำหรับการดำเนินการที่เป็นบวกหรือเสร็จสิ้น `neutral`: สำหรับเนื้อหาทั่วไปที่ไม่เน้น `danger`: สำหรับข้อผิดพลาดหรือคำเตือนที่ต้องการความสนใจ `caution`: สำหรับข้อมูลคำเตือน	'plain' \| 'pending' \| 'information' \| 'success' \| 'neutral' \| 'caution' \| 'danger'	'plain'
fill	ควบคุมสไตล์ภาพของโลเซนจ์ เมื่อ `true` โลเซนจ์จะมีสีพื้นหลังทึบ เมื่อ `false` จะมีสไตล์เส้นขอบพร้อมพื้นหลังโปร่งใส	boolean	false
removable	เมื่อ `true` โลเซนจ์สามารถถูกลบโดยผู้ใช้ได้ (แสดงไอคอนลบ)	boolean	false
url	URL สำหรับรูปภาพอวตารที่จะแสดงภายในโลเซนจ์ หากระบุ จะแสดงอวตารที่จุดเริ่มต้นของโลเซนจ์	string	''
visible	ควบคุมการมองเห็นของโลเซนจ์ เมื่อ `false` โลเซนจ์จะไม่แสดงผล	boolean	true
loading	เมื่อ `true` จะแสดงสถานะการโหลดแบบโครงกระดูกแทนเนื้อหาจริง บ่งชี้ว่ากำลังโหลดข้อมูล	boolean	false
icon	ชื่อไอคอน Iconify ที่จะแสดงเป็นไอคอนคำนำหน้า (ก่อนป้ายกำกับ) หรือใช้ slot `icon` สำหรับไอคอนแบบกำหนดเอง	string	''
postfix-icon	ชื่อไอคอน Iconify ที่จะแสดงเป็นไอคอนคำต่อท้าย (หลังป้ายกำกับ) หรือใช้ slot `postfix-icon` สำหรับไอคอนแบบกำหนดเอง	string	''
interactive	เมื่อ `true` โลเซนจ์จะตอบสนองต่อการโต้ตอบของผู้ใช้ด้วยสถานะโฮเวอร์และแอกทีฟ ทำให้เหมาะสำหรับองค์ประกอบที่คลิกได้	boolean	false
dropdown	เมื่อ `true` โลเซนจ์จะทำงานเป็นตัวเรียกดรอปดาวน์พร้อมไอคอนลูกศรเริ่มต้นและการจัดสไตล์แบบอินเทอร์แอกทีฟ ซึ่งจะตั้งค่า `interactive` เป็น `true` โดยอัตโนมัติ	boolean	false
max-width	กำหนดความกว้างสูงสุดสำหรับคอนเทนเนอร์โลเซนจ์ ยอมรับค่าความกว้าง CSS ที่ถูกต้อง (เช่น `120px`, `12rem`, `clamp(100px, 50%, 240px)`, ค่าโทเค็นการออกแบบ หรือ `none`) ข้อความที่เกินความกว้างนี้จะถูกตัดทอนด้วยจุดไข่ปลา	string	'none'

อีเวนต์

ชื่อ	คำอธิบาย	พารามิเตอร์
onRemove	ถูกปล่อยออกมาจากการคลิกปุ่มลบในโลเซนจ์ที่สามารถลบได้	(event: MouseEvent)

สล็อต

ชื่อ	คำอธิบาย
icon	เนื้อหาแบบกำหนดเองสำหรับพื้นที่ไอคอนคำนำหน้า (แสดงก่อนป้ายกำกับ) ใช้ slot นี้เพื่อแทรกไอคอนหรือคอมโพเนนต์แบบกำหนดเองแทนการใช้พร็อพเพอร์ตี้ `icon`
avatar	เนื้อหาแบบกำหนดเองสำหรับพื้นที่อวตาร ใช้ slot นี้เพื่อแทรกคอมโพเนนต์อวตารแบบกำหนดเองแทนการใช้พร็อพเพอร์ตี้ `url`
postfixIcon	เนื้อหาแบบกำหนดเองสำหรับพื้นที่ไอคอนคำต่อท้าย (แสดงหลังป้ายกำกับ) ใช้ slot นี้เพื่อแทรกไอคอนหรือคอมโพเนนต์แบบกำหนดเองแทนการใช้พร็อพเพอร์ตี้ `postfixIcon`

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

ปุ่ม

ปฏิทิน

แผงด้านข้าง

ตาราง

เครื่องมือเลือกวันที่

ช่องป้อนข้อมูล

เรดิโอ

เลือก

โลเซนจ์

คุณสมบัติหลัก

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

โทนสีและการเติม

อวตาร

อวตารแบบสล็อต

ไอคอนคำนำหน้าและคำต่อท้าย

แบบอินเทอร์แอกทีฟ

ดรอปดาวน์

การโหลด

ความกว้างสูงสุด

สล็อต

การอ้างอิง API

พร็อพส์

อีเวนต์

สล็อต

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

โลเซนจ์ ​

คุณสมบัติหลัก ​

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

โทนสีและการเติม ​

อวตาร ​

อวตารแบบสล็อต ​

ไอคอนคำนำหน้าและคำต่อท้าย ​

แบบอินเทอร์แอกทีฟ ​

ดรอปดาวน์ ​

การโหลด ​

ความกว้างสูงสุด ​

สล็อต ​

การอ้างอิง API ​

พร็อพส์ ​

อีเวนต์ ​

สล็อต ​

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

โลเซนจ์

คุณสมบัติหลัก

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

โทนสีและการเติม

อวตาร

อวตารแบบสล็อต

ไอคอนคำนำหน้าและคำต่อท้าย

แบบอินเทอร์แอกทีฟ

ดรอปดาวน์

การโหลด

ความกว้างสูงสุด

สล็อต

การอ้างอิง API

พร็อพส์

อีเวนต์

สล็อต

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