Chip

用于显示紧凑元素的 Jetpack Compose Chip 组件。

Android

Included in Expo Go

GitHub

npm

更新日志

Bundled version:

~56.0.6

Expo UI Chips 与官方 Jetpack Compose Chip API 保持一致。每种 chip 类型都是一个独立组件：AssistChip、FilterChip、InputChip 和 SuggestionChip。

安装

Terminal

- npx expo install @expo/ui

If you are installing this in an existing React Native app, make sure to install expo in your project.

用法

辅助 chip

辅助 chip 帮助用户执行操作或开始任务，例如预订航班或打开地图。它们通常会在响应用户输入时作为临时 UI 元素出现。

AssistChipExample.tsx

import { Host, AssistChip, Icon, Text } from '@expo/ui/jetpack-compose';

export default function AssistChipExample() {
  return (
    <Host matchContents>
      <AssistChip onClick={() => console.log('正在打开航班预订...')}>
        <AssistChip.Label>
          <Text>预订航班</Text>
        </AssistChip.Label>
        <AssistChip.LeadingIcon>
          <Icon source={require('./assets/flight.xml')} size={18} />
        </AssistChip.LeadingIcon>
      </AssistChip>
    </Host>
  );
}

筛选 chip

筛选 chip 允许用户从一组选项中细化内容。它们支持选中状态，通常用于搜索栏或内容筛选。

FilterChipExample.tsx

import { useState } from 'react';
import { Host, FilterChip, Text } from '@expo/ui/jetpack-compose';

export default function FilterChipExample() {
  const [selected, setSelected] = useState(false);

  return (
    <Host matchContents>
      <FilterChip selected={selected} onClick={() => setSelected(!selected)}>
        <FilterChip.Label>
          <Text>图片</Text>
        </FilterChip.Label>
      </FilterChip>
    </Host>
  );
}

输入 chip

输入 chip 表示用户输入的离散信息片段，例如文本字段中的标签。它们支持头像、尾随图标，并且可以被关闭。

InputChipExample.tsx

import { useState } from 'react';
import { Host, InputChip, Icon, Text, FlowRow } from '@expo/ui/jetpack-compose';

export default function InputChipExample() {
  const [chips, setChips] = useState(['Work', 'Travel', 'News']);

  return (
    <Host matchContents>
      <FlowRow horizontalArrangement={{ spacedBy: 8 }}>
        {chips.map(label => (
          <InputChip
            key={label}
            selected
            onClick={() => setChips(prev => prev.filter(c => c !== label))}>
            <InputChip.Label>
              <Text>{label}</Text>
            </InputChip.Label>
            <InputChip.TrailingIcon>
              <Icon source={require('./assets/close.xml')} size={18} />
            </InputChip.TrailingIcon>
          </InputChip>
        ))}
      </FlowRow>
    </Host>
  );
}

建议 chip

建议 chip 通过展示动态生成的建议来帮助缩小用户意图范围，例如聊天中的快速回复选项或搜索细化建议。

SuggestionChipExample.tsx

import { Host, SuggestionChip, Text } from '@expo/ui/jetpack-compose';

export default function SuggestionChipExample() {
  return (
    <Host matchContents>
      <SuggestionChip onClick={() => console.log('正在搜索附近...')}>
        <SuggestionChip.Label>
          <Text>附近</Text>
        </SuggestionChip.Label>
      </SuggestionChip>
    </Host>
  );
}

API

import { AssistChip, FilterChip, InputChip, SuggestionChip } from '@expo/ui/jetpack-compose';

Components

`AssistChip`

Android

Type: React.Element<AssistChipProps>

An assist chip that helps users complete actions and primary tasks.

AssistChipProps

`border`

Android

Optional • Type: ChipBorder

Border configuration.

`children`

Android

Type: React.ReactNode

Children containing Label, LeadingIcon, and TrailingIcon slots.

`colors`

Android

Optional • Type: AssistChipColors

Colors for the chip's container, label, and icons.

`elevation`

Android

Optional • Type: number

Elevation in dp.

`enabled`

Android

Optional • Type: boolean • Default: true

Whether the chip is enabled and can be clicked.

`modifiers`

Android

Optional • Type: ModifierConfig[]

Modifiers for the component.

`onClick`

Android

Optional • Type: () => void

Callback fired when the chip is clicked.

`FilterChip`

Android

Type: React.Element<FilterChipProps>

A filter chip component for refining content with selection/deselection.

FilterChipProps

`border`

Android

Optional • Type: ChipBorder

Border configuration.

`children`

Android

Type: React.ReactNode

Children containing Label, LeadingIcon, and TrailingIcon slots.

`colors`

Android

Optional • Type: FilterChipColors

Colors for the chip's container, label, icon, and selected states.

`elevation`

Android

Optional • Type: number

Elevation in dp.

`enabled`

Android

Optional • Type: boolean

Whether the chip is enabled and can be interacted with.

`modifiers`

Android

Optional • Type: ModifierConfig[]

Modifiers for the component.

`onClick`

Android

Optional • Type: () => void

Callback fired when the chip is clicked.

`selected`

Android

Type: boolean

Whether the chip is currently selected.

`InputChip`

Android

Type: React.Element<InputChipProps>

An input chip that represents user input and can be dismissed.

InputChipProps

`border`

Android

Optional • Type: ChipBorder

Border configuration.

`children`

Android

Type: React.ReactNode

Children containing Label, Avatar, and TrailingIcon slots.

`colors`

Android

Optional • Type: InputChipColors

Colors for the chip's container, label, icons, and selected states.

`elevation`

Android

Optional • Type: number

Elevation in dp.

`enabled`

Android

Optional • Type: boolean • Default: true

Whether the chip is enabled and can be interacted with.

`modifiers`

Android

Optional • Type: ModifierConfig[]

Modifiers for the component.

`onClick`

Android

Optional • Type: () => void

Callback fired when the chip is clicked.

`selected`

Android

Optional • Type: boolean • Default: false

Whether the chip is selected.

`SuggestionChip`

Android

Type: React.Element<SuggestionChipProps>

A suggestion chip that offers contextual suggestions and recommendations.

SuggestionChipProps

`border`

Android

Optional • Type: ChipBorder

Border configuration.

`children`

Android

Type: React.ReactNode

Children containing Label and Icon slots.

`colors`

Android

Optional • Type: SuggestionChipColors

Colors for the chip's container, label, and icon.

`elevation`

Android

Optional • Type: number

Elevation in dp.

`enabled`

Android

Optional • Type: boolean • Default: true

Whether the chip is enabled and can be clicked.

`modifiers`

Android

Optional • Type: ModifierConfig[]

Modifiers for the component.

`onClick`

Android

Optional • Type: () => void

Callback fired when the chip is clicked.

Types

`AssistChipColors`

Android

Colors for AssistChip.

Property	Type	Description
containerColor(optional)	`ColorValue`	-
labelColor(optional)	`ColorValue`	-
leadingIconContentColor(optional)	`ColorValue`	-
trailingIconContentColor(optional)	`ColorValue`	-

`ChipBorder`

Android

Border configuration for chips.

Property	Type	Description
color(optional)	`ColorValue`	Border color.
width(optional)	`number`	Border width in dp. Default:`1`

`FilterChipColors`

Android

Colors for FilterChip.

Property	Type	Description
containerColor(optional)	`ColorValue`	-
iconColor(optional)	`ColorValue`	-
labelColor(optional)	`ColorValue`	-
selectedContainerColor(optional)	`ColorValue`	-
selectedLabelColor(optional)	`ColorValue`	-
selectedLeadingIconColor(optional)	`ColorValue`	-
selectedTrailingIconColor(optional)	`ColorValue`	-

`InputChipColors`

Android

Colors for InputChip.

Property	Type	Description
containerColor(optional)	`ColorValue`	-
labelColor(optional)	`ColorValue`	-
leadingIconColor(optional)	`ColorValue`	-
selectedContainerColor(optional)	`ColorValue`	-
selectedLabelColor(optional)	`ColorValue`	-
selectedLeadingIconColor(optional)	`ColorValue`	-
selectedTrailingIconColor(optional)	`ColorValue`	-
trailingIconColor(optional)	`ColorValue`	-

`SuggestionChipColors`

Android

Colors for SuggestionChip.

Property	Type	Description
containerColor(optional)	`ColorValue`	-
iconContentColor(optional)	`ColorValue`	-
labelColor(optional)	`ColorValue`	-