芯片

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

Android

Included in Expo Go

Recommended version:

~57.0.3

Expo UI 芯片与官方 Jetpack Compose Chip API 相匹配。每种芯片类型都是一个独立的组件：AssistChip、FilterChip、InputChip 和 SuggestionChip。

🌐 Expo UI Chips match the official Jetpack Compose Chip API. Each chip type is a separate component: AssistChip, FilterChip, InputChip, and SuggestionChip.

Filter, assist, and suggestion Material 3 chips

安装

🌐 Installation

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.

用法

🌐 Usage

辅助芯片

🌐 Assist chip

辅助芯片帮助用户采取行动或开始任务，例如预订航班或打开地图。它们通常作为对用户输入的临时界面元素出现。

🌐 Assist chips help users take actions or start tasks, such as booking a flight or opening a map. They often appear as temporary UI elements in response to user input.

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

滤波芯片

🌐 Filter chip

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

🌐 Filter chips allow users to refine content from a set of options. They support a selected state and are commonly used in search bars or content filtering.

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

输入芯片

🌐 Input chip

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

🌐 Input chips represent discrete pieces of information entered by a user, such as tags in a text field. They support avatars, trailing icons, and can be dismissed.

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

建议芯片

🌐 Suggestion chip

建议芯片通过提供动态生成的建议来帮助缩小用户的意图，例如聊天中的快速回复选项或搜索优化。

🌐 Suggestion chips help narrow a user's intent by presenting dynamically generated suggestions, such as quick-reply options in a chat or search refinements.

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`

Type: React.Element<AssistChipProps>

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

AssistChipProps

`border`

Optional • Type: ChipBorder

Border configuration.

`children`

Type: ReactNode

Children containing Label, LeadingIcon, and TrailingIcon slots.

`colors`

Optional • Type: AssistChipColors

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

`elevation`

Optional • Type: number

Elevation in dp.

`enabled`

Optional • Type: boolean • Default: true

Whether the chip is enabled and can be clicked.

`modifiers`

Optional • Type: ModifierConfig[]

Modifiers for the component.

`onClick`

Optional • Type: () => void

Callback fired when the chip is clicked.

`FilterChip`

Type: React.Element<FilterChipProps>

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

FilterChipProps

`border`

Optional • Type: ChipBorder

Border configuration.

`children`

Type: ReactNode

Children containing Label, LeadingIcon, and TrailingIcon slots.

`colors`

Optional • Type: FilterChipColors

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

`elevation`

Optional • Type: number

Elevation in dp.

`enabled`

Optional • Type: boolean

Whether the chip is enabled and can be interacted with.

`modifiers`

Optional • Type: ModifierConfig[]

Modifiers for the component.

`onClick`

Optional • Type: () => void

Callback fired when the chip is clicked.

`selected`

Type: boolean

Whether the chip is currently selected.

`InputChip`

Type: React.Element<InputChipProps>

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

InputChipProps

`border`

Optional • Type: ChipBorder

Border configuration.

`children`

Type: ReactNode

Children containing Label, Avatar, and TrailingIcon slots.

`colors`

Optional • Type: InputChipColors

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

`elevation`

Optional • Type: number

Elevation in dp.

`enabled`

Optional • Type: boolean • Default: true

Whether the chip is enabled and can be interacted with.

`modifiers`

Optional • Type: ModifierConfig[]

Modifiers for the component.

`onClick`

Optional • Type: () => void

Callback fired when the chip is clicked.

`selected`

Optional • Type: boolean • Default: false

Whether the chip is selected.

`SuggestionChip`

Type: React.Element<SuggestionChipProps>

A suggestion chip that offers contextual suggestions and recommendations.

SuggestionChipProps

`border`

Optional • Type: ChipBorder

Border configuration.

`children`

Type: ReactNode

Children containing Label and Icon slots.

`colors`

Optional • Type: SuggestionChipColors

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

`elevation`

Optional • Type: number

Elevation in dp.

`enabled`

Optional • Type: boolean • Default: true

Whether the chip is enabled and can be clicked.

`modifiers`

Optional • Type: ModifierConfig[]

Modifiers for the component.

`onClick`

Optional • Type: () => void

Callback fired when the chip is clicked.

Types

`AssistChipColors`

Colors for AssistChip.

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

`ChipBorder`

Border configuration for chips.

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

`FilterChipColors`

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`

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`

Colors for SuggestionChip.

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