跳到主要内容

Chip

Chip是表示属性、文本、实体或操作的紧凑元素。

Chip帮助人们输入信息、进行选择、过滤内容或触发操作。使用chip来显示特定上下文的选项。

import React from 'react';
import { Chip } from 'ui-library';

const Example = () => {
  return (
    <div>
      <Chip label="Option 1" />
      <Chip label="Option 2" />
      <Chip label="Option 3" />
    </div>
  );
};

示例​

Assist chips​

Assist chips是带有“leading”图标和“on_click”事件的chip。它们表示在UI中以智能或自动化方式动态出现的操作。

Assist chips的一种替代方案是buttons，它们应该以持续和一致的方式出现。

import React from 'react';
import { Chip, Icon } from 'ui-library';

const Example = () => {
  const handleClick = () => {
    // handle click event
  };

  return (
    <div>
      <Chip
        label="Save to favorites"
        leading={<Icon name="favorite_border_outlined" />}
        onClick={handleClick}
      />
      <Chip
        label="9 min walk"
        leading={<Icon name="map_sharp" />}
        onClick={handleClick}
      />
    </div>
  );
};

Filter chips​

Filter chips是带有“on_select”事件的chip。它们使用在“label”中提供的标签或描述性词语来过滤内容。它们可以是开关或复选框的很好替代方案。

import React, { useState } from 'react';
import { Chip, Icon } from 'ui-library';

const Example = () => {
  const [selectedChips, setSelectedChips] = useState([]);

  const handleSelect = (chip) => {
    // handle select event
    setSelectedChips((prevSelectedChips) => {
      if (prevSelectedChips.includes(chip)) {
        return prevSelectedChips.filter((c) => c !== chip);
      } else {
        return [...prevSelectedChips, chip];
      }
    });
  };

  return (
    <div>
      {selectedChips.includes('Washer / Dryer') && <Chip label="Washer / Dryer" />}
      {selectedChips.includes('Ramp access') && <Chip label="Ramp access" />}
      {selectedChips.includes('Dogs OK') && <Chip label="Dogs OK" />}
      {selectedChips.includes('Cats OK') && <Chip label="Cats OK" />}
      {selectedChips.includes('Smoke-free') && <Chip label="Smoke-free" />}
      <Chip
        label="Washer / Dryer"
        onSelect={() => handleSelect('Washer / Dryer')}
        selected={selectedChips.includes('Washer / Dryer')}
      />
      <Chip
        label="Ramp access"
        onSelect={() => handleSelect('Ramp access')}
        selected={selectedChips.includes('Ramp access')}
      />
      <Chip
        label="Dogs OK"
        onSelect={() => handleSelect('Dogs OK')}
        selected={selectedChips.includes('Dogs OK')}
      />
      <Chip
        label="Cats OK"
        onSelect={() => handleSelect('Cats OK')}
        selected={selectedChips.includes('Cats OK')}
      />
      <Chip
        label="Smoke-free"
        onSelect={() => handleSelect('Smoke-free')}
        selected={selectedChips.includes('Smoke-free')}
      />
    </div>
  );
};

属性​

label​

表示chip的主要内容的标签。通常是文本。

leading​

在chip的label左侧显示的控件。通常是图标。

onClick​

chip被点击时触发的事件。

onSelect​

chip被选中时触发的事件。

selected​

指示chip是否被选中的布尔值。

disabled​

禁用chip。

事件​

onClick​

chip被点击时触发的事件。

onSelect​

chip被选中时触发的事件。当用户点击chip时触发。将 selected 属性更改为相反的值。无法与 on_click 事件一起指定。