Chip React 元件

Chip（標籤） React 元件以小型區塊表示複雜的實體，例如連絡人。它們可以包含照片、簡短的標題字串和簡要資訊

Chip 元件

包含下列元件

Chip

Chip 屬性

屬性	類型	預設值	說明
<Chip> 屬性
text	字串		Chip 標籤文字
media	字串		Chip 媒體的文字內容
mediaBgColor	字串		Chip 媒體元素的背景顏色。其中一種預設顏色
mediaTextColor	字串		Chip 媒體元素的文字顏色。其中一種預設顏色
deleteable	布林值	false	定義 Chip 是否有額外的「刪除」按鈕
outline	布林值	false	使 Chip 成為輪廓
tooltip	字串		工具提示文字，在滑鼠移入/按下時顯示
tooltipTrigger	字串	hover	定義如何觸發（開啟）工具提示。可以是 `hover`、`click` 或 `manual`
<Chip> 圖示相關屬性
iconSize	字串數字		圖示大小（像素）
iconColor	字串		圖示顏色。其中一種預設顏色
icon	字串		自訂圖示類別
iconF7	字串		F7 圖示字型圖示名稱
iconMaterial	字串		Material 圖示字型圖示名稱
iconIos	字串		如果使用 iOS 主題時要使用的圖示。包含圖示系列和圖示名稱，以冒號分隔，例如 `f7:house`
iconMd	字串		如果使用 MD 主題時要使用的圖示。包含圖示系列和圖示名稱，以冒號分隔，例如 `material:home`

Chip 事件

事件	說明
<Chip> 事件
click	事件會在按下 Chip 時觸發
delete	事件會在按下 Chip 刪除按鈕時觸發

Chip 插槽

Chip React 元件有額外的插槽，可供自訂元素使用

text - 元素會插入在 chip 文字標籤的位置
default - （與 text 相同）
media - 元素會插入在 chip 的媒體元素中

範例

chips.jsx

import React from 'react';
import { Navbar, Page, BlockTitle, Chip, Block, Icon, f7 } from 'framework7-react';

export default () => {
  const deleteChip = (e) => {
    const target = e.target;
    f7.dialog.confirm('Do you want to delete this tiny demo Chip?', () => {
      f7.$(target).parents('.chip').remove();
    });
  };

  return (
    <Page>
      <Navbar title="Chips"></Navbar>
      <BlockTitle>Chips With Text</BlockTitle>
      <Block strongIos outlineIos>
        <Chip text="Example Chip" />
        <Chip text="Another Chip" />
        <Chip text="One More Chip" />
        <Chip text="Fourth Chip" />
        <Chip text="Last One" />
      </Block>
      <BlockTitle>Outline Chips</BlockTitle>
      <Block strongIos outlineIos>
        <Chip outline text="Example Chip" />
        <Chip outline text="Another Chip" />
        <Chip outline text="One More Chip" />
        <Chip outline text="Fourth Chip" />
        <Chip outline text="Last One" />
      </Block>
      <BlockTitle>Icon Chips</BlockTitle>
      <Block strongIos outlineIos>
        <Chip text="Add Contact" mediaBgColor="blue">
          <Icon slot="media" ios="f7:plus_circle" md="material:add_circle" />
        </Chip>
        <Chip text="London" mediaBgColor="green">
          <Icon slot="media" ios="f7:compass" md="material:location_on" />
        </Chip>
        <Chip text="John Doe" mediaBgColor="red">
          <Icon slot="media" ios="f7:person" md="material:person" />
        </Chip>
      </Block>
      <BlockTitle>Contact Chips</BlockTitle>
      <Block strongIos outlineIos>
        <Chip text="Jane Doe">
          <img slot="media" src="https://cdn.framework7.io/placeholder/people-100x100-9.jpg" />
        </Chip>
        <Chip text="John Doe">
          <img slot="media" src="https://cdn.framework7.io/placeholder/people-100x100-3.jpg" />
        </Chip>
        <Chip text="Adam Smith">
          <img slot="media" src="https://cdn.framework7.io/placeholder/people-100x100-7.jpg" />
        </Chip>
        <Chip text="Jennifer" mediaBgColor="pink" media="J" />
        <Chip text="Chris" mediaBgColor="yellow" media="C" />
        <Chip text="Kate" mediaBgColor="red" media="K" />
      </Block>
      <BlockTitle>Deletable Chips / Tags</BlockTitle>
      <Block strongIos outlineIos>
        <Chip text="Example Chip" deleteable onDelete={deleteChip} />
        <Chip
          text="Chris"
          media="C"
          mediaBgColor="orange"
          textColor="black"
          deleteable
          onDelete={deleteChip}
        />
        <Chip text="Jane Doe" deleteable onDelete={deleteChip}>
          <img slot="media" src="https://cdn.framework7.io/placeholder/people-100x100-9.jpg" />
        </Chip>
        <Chip text="One More Chip" deleteable onDelete={deleteChip} />
        <Chip text="Jennifer" mediaBgColor="pink" media="J" deleteable onDelete={deleteChip} />
        <Chip text="Adam Smith" deleteable onDelete={deleteChip}>
          <img slot="media" src="https://cdn.framework7.io/placeholder/people-100x100-7.jpg" />
        </Chip>
      </Block>
      <BlockTitle>Color Chips</BlockTitle>
      <Block strongIos outlineIos>
        <Chip text="Red Chip" color="red" />
        <Chip text="Green Chip" color="green" />
        <Chip text="Blue Chip" color="blue" />
        <Chip text="Orange Chip" color="orange" />
        <Chip text="Pink Chip" color="pink" />
        <Chip outline text="Red Chip" color="red" />
        <Chip outline text="Green Chip" color="green" />
        <Chip outline text="Blue Chip" color="blue" />
        <Chip outline text="Orange Chip" color="orange" />
        <Chip outline text="Pink Chip" color="pink" />
      </Block>
    </Page>
  );
};

改善此文件

在此頁面上

Chip 元件
Chip 屬性
Chip 事件
Chip 插槽
範例