跳到主要内容

Suggestions 快捷建议

展示选项与调用方提供的选择、禁用和等待状态。

交互示例​

交互示例加载中…

用法​

<Suggestions items={suggestions} onSelect={(item) => setSelectedId(item.id)} />

行为与接入​

onSelect 返回原项，选中状态由每项的 selected 控制。disabled 或 loading 时不交付选择事件。

icon 保留调用方提供的图标名称，以 14 布局单位和当前主题主色展示；普通与选中状态使用相同图标样式，图标不随应用字号整体放大。没有 icon 时只展示文字。

默认从起始方向排列，align="center" 可居中。组件不自行选中、填入输入框或发送消息；需要哪一种结果，由场景在回调中决定。

API​

查看完整 TypeScript 类型

以下内容由包根公开类型生成，与当前源码保持一致。

import type { IconName } from '@unif/react-native-design';

import type { StyleProp, ViewStyle } from 'react-native';

export interface SuggestionItem {
  id: string;
  label: string;
  /** 14 布局单位的主题主色图标，普通与选中状态保持相同图标样式。 */
  icon?: IconName;
  selected?: boolean;
  loading?: boolean;
  disabled?: boolean;
}

export interface SuggestionsProps {
  items: readonly SuggestionItem[];
  onSelect?(item: SuggestionItem): void;
  align?: 'start' | 'center';
  style?: StyleProp<ViewStyle>;
  testID?: string;
}