The Badge component is used to display a badge. For example:
index.mdx
import{ Badge }from'@theme';functionApp(){// Using text propreturn<Badgetext="info"type="info"/>;// Using custom childrenreturn(<Badge><imgstyle={{ height:'18px'}}src="https://lf3-static.bytednsdoc.com/obj/eden-cn/uhbfnupenuhf/rspress/rspress-logo.png"/><span>Rspress</span></Badge>);}
interfaceBadgeProps{/**
* The content to display inside the badge. Can be a string or React nodes.
*/ children?: React.ReactNode;/**
* The type of badge, which determines its color and style.
* @default 'tip'
*/ type?:'tip'|'info'|'warning'|'danger';/**
* The text content to display inside the badge (for backwards compatibility).
*/ text?:string;/**
* Whether to display the badge with an outline style.
* @default false
*/ outline?:boolean;}
It is generally used to set custom head content in documents (based on react-helmet-async). The usage is as follows:
index.tsx
// Below is a custom component, you can import it into your documentimport{ Helmet }from'rspress/runtime';functionApp(){return(<Helmet><metaproperty="og:description"content="Out-of-box Rspack build tools"/></Helmet>);}
Used to skip the ssr for some components. For example:
import{ NoSSR }from'rspress/runtime';constComponent=()=>{return(<NoSSR><div>The content here will only be rendered on the client side</div></NoSSR>);};
import{ Overview }from'rspress/theme';interfaceGroupItem{ text?:string; link?:string; headers?: Header[];}interfaceGroup{ name:string; items: GroupItem[];}interfaceOverviewProps{// content before data rendering content?: React.ReactNode;// data groups?: Group[];// default title defaultGroupTitle?:string;// headers displayed in the overview page of the file overviewHeaders?:number[];}
interfacePackageManagerTabsProps{ command:|string|{// Used to set commands for different package managers npm?:string; yarn?:string; pnpm?:string; bun?:string;};// Used to set additional tabs additionalTabs:{// Used to set additional package managers tool:string;// Used to set the icon of the additional package manager icon?: React.ReactNode;}[];}
When command is set to a string, it will default to displaying three tabs: npm, yarn, pnpm and bun, and the component will automatically add the corresponding package manager command before the command. If you need to display additional tabs, you can achieve this through additionalTabs.
TIP
In the install command, special processing has been done for yarn and bun. If your command is install some-packages, the install will be automatically replaced with add in the yarn/bun tab.
interfacePrevNextPageProps{// Set the link to the previous page or the next page through typetype:'prev'|'next';// Used to set the text of the previous page or the next page text:string;// Used to set the link to the previous page or the next page href:string;}
In order to make it easier for you to use these components, the rspress/theme package has been aliased inside the framework, so you can directly use @theme to import these components.
The props type of the Tabs component is as follows:
defaultValue is used to set the tab item selected by default. This value will be compared with the value field of the Tab component props, and if they are equal, the tab will be selected.
groupId is used to sync the selected tab item between multiple Tabs components.The groups with the same groupId will be synchronized.
tabPosition is used to set the position of the tab list, it has two values: left and center, the default is left.
The props types of the Tab component are as follows:
interfaceTabProps{ label:string;// Used to identify the current tab, if not passed, the default label will be used value?:string; children: React.ReactNode;}
The value field is used to identify the current tab, if not passed, the default label will be used.