Detail

API 参考

Detail

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

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

例子

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

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

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

export default function Command() {
  return <Detail markdown={`![Image Title](example.png)`} />;
}

参数

名称

描述

类型

默认

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

带有可选图标的单个值。

例子

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

一行显示的 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. 中的标签。

参数

名称

描述

类型

默认

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

最后更新于2年前