Comment on page
Detail
Render a markdown string
Render an image from the assets directory
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={``} />;
}
Prop | Description | Type | Default |
|---|---|---|---|
actions | React.ReactNode | - | |
isLoading | Indicates whether a loading bar should be shown or hidden below the search bar | boolean | false |
markdown | The CommonMark string to be rendered. | string | - |
metadata | The Detail.Metadata to be rendered in the right side area | React.ReactNode | - |
navigationTitle | The main title for that view displayed in Raycast | string | Command title |
You can specify custom image dimensions by adding a
raycast-width and raycast-height query string to the markdown image. For example: A Metadata view that will be shown in the right-hand-side of the
Detail.Use it to display additional structured data about the main content shown in the
Detail view.
Detail-metadata illustration
import { Detail } from "@raycast/api";
// Define markdown here to prevent unwanted indentation.
const markdown = `
# Pikachu
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>
}
/>
);
}
Prop | Description | Type | Default |
|---|---|---|---|
children* | The elements of the Metadata view. | React.ReactNode | - |
A single value with an optional icon.
Detail-metadata-label illustration
import { Detail } from "@raycast/api";
// Define markdown here to prevent unwanted indentation.
const markdown = `
# Pikachu
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>
}
/>
);
}
Prop | Description | Type | Default |
|---|---|---|---|
title* | The title of the item. | string | - |
icon | An icon to illustrate the value of the item. | - | |
text | The text value of the item. Specifying color will display the text in the provided color. Defaults to Color.SecondaryText. | - |
An item to display a link.
Detail-metadata-link illustration
import { Detail } from "@raycast/api";
// Define markdown here to prevent unwanted indentation.
const markdown = `
# Pikachu
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>
}
/>
);
}
Prop | Description | Type | Default |
|---|---|---|---|
target* | The target of the link. | string | - |
text* | The text value of the item. | string | - |
title* | The title shown above the item. | string | - |
Detail-metadata-taglist illustration
import { Detail } from "@raycast/api";
// Define markdown here to prevent unwanted indentation.
const markdown = `
# Pikachu
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>
}
/>
);
}
Prop | Description | Type | Default |
|---|---|---|---|
children* | The tags contained in the TagList. | React.ReactNode | - |
title* | The title shown above the item. | string | - |
A Tag in a
Detail.Metadata.TagList.Prop | Description | Type | Default |
|---|---|---|---|
color | Changes the text color to the provided color and sets a transparent background with the same color. | - | |
icon | The optional icon tag icon. Required if the tag has no text. | - | |
text | The optional tag text. Required if the tag has no icon. | string | - |
onAction | Callback that is triggered when the item is clicked. | () => void | - |
A metadata item that shows a separator line. Use it for grouping and visually separating metadata items.
import { Detail } from "@raycast/api";
// Define markdown here to prevent unwanted indentation.
const markdown = `
# Pikachu
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>
}
/>
);
}
Last modified 4mo ago