晶片 React 組件

晶片屬性
範例

晶片 (標籤) React 組件在小區塊中表示複雜實體，例如聯絡人。它們可以包含照片、簡短的標題字串和簡要資訊

晶片組件

包括以下組件

晶片

晶片屬性

名稱	類型	預設值	描述
colors	物件		具有 Tailwind CSS 顏色類別的物件
colors.fillBgIos	字串	'bg-black bg-opacity-10 dark:bg-white dark:bg-opacity-10'
colors.fillBgMaterial	字串	'bg-md-light-secondary-container dark:bg-md-dark-secondary-container'
colors.fillTextIos	字串	'text-current'
colors.fillTextMaterial	字串	'text-md-light-on-secondary-container dark:text-md-dark-on-secondary-container'
colors.outlineBorderIos	字串	'border-black border-opacity-20 dark:border-white dark:border-opacity-20'
colors.outlineBorderMaterial	字串	'border-md-light-outline dark:border-md-dark-outline'
colors.outlineTextIos	字串	'text-current'
colors.outlineTextMaterial	字串	'text-md-light-on-surface dark:text-md-dark-on-surface'
component	字串	'div'	組件的 HTML 元素
deleteButton	布林值	false	定義晶片是否具有額外的 "刪除" 按鈕
media	ReactNode		晶片媒體區域的內容 (例如圖示)
outline	布林值	false	使晶片帶有外框
onDelete	函數(e)		在點擊晶片的刪除按鈕時觸發的事件

範例

Chips.jsx

import React from 'react';
import {
  Page,
  Navbar,
  NavbarBackLink,
  Chip,
  Block,
  BlockTitle,
} from 'konsta/react';

export default function ChipsPage() {
  return (
    <Page>
      <Navbar
        title="Chips"
        />

      <BlockTitle>Chips With Text</BlockTitle>
      <Block strongIos outlineIos>
        <Chip className="m-0.5">Example Chip</Chip>
        <Chip className="m-0.5">Another Chip</Chip>
        <Chip className="m-0.5">One More Chip</Chip>
        <Chip className="m-0.5">Fourth Chip</Chip>
        <Chip className="m-0.5">Last One</Chip>
      </Block>

      <BlockTitle>Outline Chips</BlockTitle>
      <Block strongIos outlineIos>
        <Chip outline className="m-0.5">
          Example Chip
        </Chip>
        <Chip outline className="m-0.5">
          Another Chip
        </Chip>
        <Chip outline className="m-0.5">
          One More Chip
        </Chip>
        <Chip outline className="m-0.5">
          Fourth Chip
        </Chip>
        <Chip outline className="m-0.5">
          Last One
        </Chip>
      </Block>

      <BlockTitle>Contact Chips</BlockTitle>
      <Block strongIos outlineIos>
        <Chip
          className="m-0.5"
          media={
            <img
              alt="avatar"
              className="ios:h-7 material:h-6 rounded-full"
              src="https://cdn.framework7.io/placeholder/people-100x100-9.jpg"
            />
          }
        >
          Jane Doe
        </Chip>
        <Chip
          className="m-0.5"
          media={
            <img
              alt="avatar"
              className="ios:h-7 material:h-6 rounded-full"
              src="https://cdn.framework7.io/placeholder/people-100x100-3.jpg"
            />
          }
        >
          John Doe
        </Chip>
        <Chip
          className="m-0.5"
          media={
            <img
              alt="avatar"
              className="ios:h-7 material:h-6 rounded-full"
              src="https://cdn.framework7.io/placeholder/people-100x100-7.jpg"
            />
          }
        >
          Adam Smith
        </Chip>
      </Block>

      <BlockTitle>Deletable Chips / Tags</BlockTitle>
      <Block strongIos outlineIos>
        <Chip
          className="m-0.5"
          deleteButton
          onDelete={() => console.log('Delete Chip')}
        >
          Example Chip
        </Chip>
        <Chip
          className="m-0.5"
          deleteButton
          onDelete={() => console.log('Delete Chip')}
          media={
            <img
              alt="avatar"
              className="ios:h-7 material:h-6 rounded-full"
              src="https://cdn.framework7.io/placeholder/people-100x100-7.jpg"
            />
          }
        >
          Adam Smith
        </Chip>
      </Block>
      <BlockTitle>Color Chips</BlockTitle>
      <Block strongIos outlineIos>
        <Chip
          className="m-0.5"
          colors={{ fillBg: 'bg-red-500', fillText: 'text-white' }}
        >
          Red Chip
        </Chip>
        <Chip
          className="m-0.5"
          colors={{ fillBg: 'bg-green-500', fillText: 'text-white' }}
        >
          Green Chip
        </Chip>
        <Chip
          className="m-0.5"
          colors={{ fillBg: 'bg-blue-500', fillText: 'text-white' }}
        >
          Blue Chip
        </Chip>
        <Chip
          className="m-0.5"
          colors={{ fillBg: 'bg-yellow-500', fillText: 'text-white' }}
        >
          Yellow Chip
        </Chip>
        <Chip
          className="m-0.5"
          colors={{ fillBg: 'bg-pink-500', fillText: 'text-white' }}
        >
          Pink Chip
        </Chip>
        <Chip
          className="m-0.5"
          outline
          colors={{
            outlineBorder: 'border-red-500',
            outlineText: 'text-red-500',
          }}
        >
          Red Chip
        </Chip>
        <Chip
          className="m-0.5"
          outline
          colors={{
            outlineBorder: 'border-green-500',
            outlineText: 'text-green-500',
          }}
        >
          Green Chip
        </Chip>
        <Chip
          className="m-0.5"
          outline
          colors={{
            outlineBorder: 'border-blue-500',
            outlineText: 'text-blue-500',
          }}
        >
          Blue Chip
        </Chip>
        <Chip
          className="m-0.5"
          outline
          colors={{
            outlineBorder: 'border-yellow-500',
            outlineText: 'text-yellow-500',
          }}
        >
          Yellow Chip
        </Chip>
        <Chip
          className="m-0.5"
          outline
          colors={{
            outlineBorder: 'border-pink-500',
            outlineText: 'text-pink-500',
          }}
        >
          Pink Chip
        </Chip>
      </Block>
    </Page>
  );
}