Detail

API 参考

Detail

使用可选的元数据面板渲染 markdown (CommonMark) 字符串。

通常用作独立视图或从 List 导航时使用。

例子

渲染 Markdown 字符串

import { Detail } from "@raycast/api";

export default function Command() {
  return <Detail markdown="**Hello** _World_!" />;
}

从资源目录渲染图像

参数

名称	描述	类型	默认
actions	对 ActionPanel 的引用。	React.ReactNode	-
isLoading	是否应在搜索栏下方显示或隐藏 loading 栏	boolean	false
markdown	要渲染的 CommonMark 字符串。	string	-
metadata	要在右侧区域渲染的 Detail.Metadata	React.ReactNode	-
navigationTitle	Raycast 中显示的该视图的主标题	string	Command title

Detail.Metadata

元数据视图将显示在 Detail 的右侧。 使用它来显示有关 Detail 视图中显示的主要内容的附加结构化数据。

详细元数据说明

例子

import { Detail } from "@raycast/api";

// Define markdown here to prevent unwanted indentation.
const markdown = `
# Pikachu

![](https://assets.pokemon.com/assets/cms2/img/pokedex/full/025.png)

Pikachu that can generate powerful electricity have cheek sacs that are extra soft and super stretchy.
`;

export default function Main() {
  return (
    <Detail
      markdown={markdown}
      navigationTitle="Pikachu"
      metadata={
        <Detail.Metadata>
          <Detail.Metadata.Label title="Height" text={`1' 04"`} />
          <Detail.Metadata.Label title="Weight" text="13.2 lbs" />
          <Detail.Metadata.TagList title="Type">
            <Detail.Metadata.TagList.Item text="Electric" color={"#eed535"} />
          </Detail.Metadata.TagList>
          <Detail.Metadata.Separator />
          <Detail.Metadata.Link title="Evolution" target="https://www.pokemon.com/us/pokedex/pikachu" text="Raichu" />
        </Detail.Metadata>
      }
    />
  );
}

参数

名称	描述	类型	默认
children*	元数据视图的元素。	React.ReactNode	-

Detail.Metadata.Label

带有可选图标的单个值。

Detail-metadata-label illustration

例子

import { Detail } from "@raycast/api";

// Define markdown here to prevent unwanted indentation.
const markdown = `
# Pikachu

![](https://assets.pokemon.com/assets/cms2/img/pokedex/full/025.png)

Pikachu that can generate powerful electricity have cheek sacs that are extra soft and super stretchy.
`;

export default function Main() {
  return (
    <Detail
      markdown={markdown}
      navigationTitle="Pikachu"
      metadata={
        <Detail.Metadata>
          <Detail.Metadata.Label title="Height" text={`1' 04"`} icon="weight.svg" />
        </Detail.Metadata>
      }
    />
  );
}

参数

名称	描述	类型	默认
title*	项目的标题。	string	-
icon	项目的图标。	Image.ImageLike	-
text	指定颜色以显示文本。默认为 Color.SecondaryText。	string 或 { color: Color; value: string }	-

Detail.Metadata.Link

显示链接的项目。

详细元数据链接说明

例子

import { Detail } from "@raycast/api";

// Define markdown here to prevent unwanted indentation.
const markdown = `
# Pikachu

![](https://assets.pokemon.com/assets/cms2/img/pokedex/full/025.png)

Pikachu that can generate powerful electricity have cheek sacs that are extra soft and super stretchy.
`;

export default function Main() {
  return (
    <Detail
      markdown={markdown}
      navigationTitle="Pikachu"
      metadata={
        <Detail.Metadata>
          <Detail.Metadata.Link title="Evolution" target="https://www.pokemon.com/us/pokedex/pikachu" text="Raichu" />
        </Detail.Metadata>
      }
    />
  );
}

参数

名称	描述	类型	默认
target*	链接的目标。	string	-
text*	项目的文本值。	string	-
title*	显示在项目上方的标题。	string	-

Detail.Metadata.TagList

一行显示的 Tags 列表。

详细元数据标签列表说明

例子

import { Detail } from "@raycast/api";

// Define markdown here to prevent unwanted indentation.
const markdown = `
# Pikachu

![](https://assets.pokemon.com/assets/cms2/img/pokedex/full/025.png)

Pikachu that can generate powerful electricity have cheek sacs that are extra soft and super stretchy.
`;

export default function Main() {
  return (
    <Detail
      markdown={markdown}
      navigationTitle="Pikachu"
      metadata={
        <Detail.Metadata>
          <Detail.Metadata.TagList title="Type">
            <Detail.Metadata.TagList.Item text="Electric" color={"#eed535"} />
          </Detail.Metadata.TagList>
        </Detail.Metadata>
      }
    />
  );
}

参数

名称	描述	类型	Default
children*	TagList 中包含的标签。	React.ReactNode	-
title*	显示在项目上方的标题。	string	-

Detail.Metadata.TagList.Item

Detail.Metadata.TagList. 中的 标签。

参数

名称	描述	类型	默认
text*	标签的文本值	string	-
color	将文本颜色更改为提供的颜色，并设置相同颜色的透明背景。	Color.ColorLike	-
icon	标签文本前面的可选图标。	Image.ImageLike	-
onAction	单击该项目时触发的回调。	() => void	-

Detail.Metadata.Separator

显示分隔线的元数据项。使用它来分组和直观地分离元数据项。

import { Detail } from "@raycast/api";

// Define markdown here to prevent unwanted indentation.
const markdown = `
# Pikachu

![](https://assets.pokemon.com/assets/cms2/img/pokedex/full/025.png)

Pikachu that can generate powerful electricity have cheek sacs that are extra soft and super stretchy.
`;

export default function Main() {
  return (
    <Detail
      markdown={markdown}
      navigationTitle="Pikachu"
      metadata={
        <Detail.Metadata>
          <Detail.Metadata.Label title="Height" text={`1' 04"`} />
          <Detail.Metadata.Separator />
          <Detail.Metadata.Label title="Weight" text="13.2 lbs" />
        </Detail.Metadata>
      }
    />
  );
}