Action Panel

API 参考

ActionPanel

公开用户可以执行的 actions 列表。

通常,项目是上下文感知的,例如,基于所选的列表项目。Actions 带有语义部分,并且可以分配键盘快捷键。

第一和第二动作成为主要和次要动作。他们会自动分配默认的键盘快捷键。在 List,、Grid and Detail 中,表示主要操作, 表示次要操作。在 Form 中,主要是 ,次要是 。请记住,虽然您可以为主要和次要操作指定其他快捷方式,但它不会显示在操作面板中。

例子

import { ActionPanel, Action, List } from "@raycast/api";

export default function Command() {
  return (
    <List navigationTitle="Open Pull Requests">
      <List.Item
        title="Docs: Update API Reference"
        subtitle="#1"
        actions={
          <ActionPanel title="#1 in raycast/extensions">
            <Action.OpenInBrowser url="https://github.com/raycast/extensions/pull/1" />
            <Action.CopyToClipboard
              title="Copy Pull Request URL"
              content="https://github.com/raycast/extensions/pull/1"
            />
          </ActionPanel>
        }
      />
    </List>
  );
}

参数

名称
描述
类型
默认

children

不管是 section 还是 action,如果指定了 Action 元素,则会自动创建默认部分。

-

title

标题显示在面板顶部

string

-

ActionPanel.Section

一组视觉上分开的项。

当 ActionPanel 包含大量操作时,请使用部分来帮助引导用户执行相关操作。例如,为所有复制操作创建一个 section。

例子

import { ActionPanel, Action, List } from "@raycast/api";

export default function Command() {
  return (
    <List navigationTitle="Open Pull Requests">
      <List.Item
        title="Docs: Update API Reference"
        subtitle="#1"
        actions={
          <ActionPanel title="#1 in raycast/extensions">
            <ActionPanel.Section title="Copy">
              <Action.CopyToClipboard title="Copy Pull Request Number" content="#1" />
              <Action.CopyToClipboard
                title="Copy Pull Request URL"
                content="https://github.com/raycast/extensions/pull/1"
              />
              <Action.CopyToClipboard title="Copy Pull Request Title" content="Docs: Update API Reference" />
            </ActionPanel.Section>
            <ActionPanel.Section title="Danger zone">
              <Action title="Close Pull Request" onAction={() => console.log("Close PR #1")} />
            </ActionPanel.Section>
          </ActionPanel>
        }
      />
    </List>
  );
}

参数

名称
描述
类型
默认值

children

section 里的元素。

-

title

标题显示在该部分上方

string

-

ActionPanel.Submenu

一个非常具体的操作,在选择时将用其子级替换当前的 ActionPanel。

当操作需要从一系列选项中进行选择时,这非常方便。例如,向 GitHub 拉取请求添加标签或向待办事项添加受让人。

例子

import { Action, ActionPanel, Color, Icon, List } from "@raycast/api";

export default function Command() {
  return (
    <List navigationTitle="Open Pull Requests">
      <List.Item
        title="Docs: Update API Reference"
        subtitle="#1"
        actions={
          <ActionPanel title="#1 in raycast/extensions">
            <ActionPanel.Submenu title="Add Label">
              <Action
                icon={{ source: Icon.Circle, tintColor: Color.Red }}
                title="Bug"
                onAction={() => console.log("Add bug label")}
              />
              <Action
                icon={{ source: Icon.Circle, tintColor: Color.Yellow }}
                title="Enhancement"
                onAction={() => console.log("Add enhancement label")}
              />
              <Action
                icon={{ source: Icon.Circle, tintColor: Color.Blue }}
                title="Help Wanted"
                onAction={() => console.log("Add help wanted label")}
              />
            </ActionPanel.Submenu>
          </ActionPanel>
        }
      />
    </List>
  );
}

参数

名称
描述
类型
默认值

title*

子菜单显示的标题。

string

-

autoFocus

当父 ActionPanel(或 Actionpanel.Submenu)打开时,ActionPanel.Submenu 是否应自动获得焦点。

boolean

-

children

子菜单的项。

-

filtering

切换 Raycast 过滤。如果为 true,Raycast 将使用搜索栏中的查询来过滤项目。当为 false 时,扩展程序需要负责过滤。

boolean{ keepSectionOrder: boolean }

当指定 onSearchTextChange 时为 false,否则为 true

icon

显示子菜单的图标。

-

isLoading

是否应在搜索栏旁边显示或隐藏 loading 指示器

boolean

false

shortcut

子菜单的键盘快捷键。

-

throttle

定义 onSearchTextChange 处理程序是在每次按下键盘时触发还是延迟以限制事件。当将自定义过滤逻辑与异步操作(例如网络请求)结合使用时,建议设置为 true

boolean

false

onOpen

打开子菜单时触发的回调。

() => void

-

onSearchTextChange

当搜索栏文本发生变化时触发回调。

(text: string) => void

-

类型

ActionPanel.Children

ActionPanel.Children: ActionPanel.Section | ActionPanel.Section[] | ActionPanel.Section.Children | null

ActionPanel 组件支持的子组件。

ActionPanel.Section.Children

ActionPanel.Section.Children: Action | Action[] | ReactElement<ActionPanel.Submenu.Props> | ReactElement<ActionPanel.Submenu.Props>[] | null

ActionPanel.Section 组件支持的子组件。

ActionPanel.Submenu.Children

ActionPanel.Children: ActionPanel.Section | ActionPanel.Section[] | ActionPanel.Section.Children | null

ActionPanel.Submenu 组件支持的子组件。

最后更新于