Chip

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

Android

Included in Expo Go

GitHub

npm

更新日志

Recommended version:

~58.0.1

Expo UI Chips 与官方 Jetpack Compose Chip API 匹配。每种芯片都是单独的组件：AssistChip、FilterChip、InputChip 和 SuggestionChip。

安装

Terminal

- npx expo install @expo/ui

- yarn expo install @expo/ui

- pnpm expo install @expo/ui

- bun expo install @expo/ui

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

用法

辅助芯片

辅助芯片可帮助用户执行操作或开始任务，例如预订航班或打开地图。它们通常作为临时 UI 元素，在用户输入后显示。

AssistChipExample.tsx

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

export default function AssistChipExample() {
  return (
    <Host matchContents>
      <AssistChip
        onClick={() => console.log('Opening flight booking...')}>
        <AssistChip.Label>
          <Text>Book flight</Text>
        </AssistChip.Label>
        <AssistChip.LeadingIcon>
          <Icon source={require('./assets/flight.xml')} size={18} />
        </AssistChip.LeadingIcon>
      </AssistChip>
    </Host>
  );
}

筛选芯片

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

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>Images</Text>
        </FilterChip.Label>
      </FilterChip>
    </Host>
  );
}

输入芯片

输入芯片表示用户输入的独立信息片段，例如文本字段中的标签。它们支持头像、尾随图标，也可以关闭。

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>
  );
}

建议芯片

建议芯片通过动态生成的建议帮助用户明确意图，例如聊天中的快速回复选项或搜索筛选条件。

SuggestionChipExample.tsx

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

export default function SuggestionChipExample() {
  return (
    <Host matchContents>
      <SuggestionChip
        onClick={() => console.log('Searching nearby...')}>
        <SuggestionChip.Label>
          <Text>Nearby</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: 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: 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: 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: 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`	-