mirror of
https://gitlab.com/KenanZhu/AutoLibraryManuals.git
synced 2026-11-05 05:35:51 +08:00
Initial commit
This commit is contained in:
35 files changed
+2020
No files matched your search
@@ -0,0 +1,207 @@
|
||||
---
|
||||
title: 'Components'
|
||||
description: 'Callouts, cards, steps, tabs, and more'
|
||||
icon: 'puzzle-piece'
|
||||
---
|
||||
|
||||
Mintlify components let you build rich, interactive documentation pages using MDX. Here are some commonly used ones.
|
||||
|
||||
See the [components overview](https://mintlify.com/docs/components) in the Mintlify documentation for a complete list.
|
||||
|
||||
## Callouts
|
||||
|
||||
Use callouts to draw attention to important information.
|
||||
|
||||
<Note>A **Note** is for general information that helps the reader.</Note>
|
||||
|
||||
<Tip>A **Tip** highlights a helpful shortcut or best practice.</Tip>
|
||||
|
||||
<Warning>A **Warning** flags something that could cause problems.</Warning>
|
||||
|
||||
<Info>An **Info** callout provides supplementary context.</Info>
|
||||
|
||||
```mdx
|
||||
<Note>A **Note** is for general information that helps the reader.</Note>
|
||||
|
||||
<Tip>A **Tip** highlights a helpful shortcut or best practice.</Tip>
|
||||
|
||||
<Warning>A **Warning** flags something that could cause problems.</Warning>
|
||||
|
||||
<Info>An **Info** callout provides supplementary context.</Info>
|
||||
```
|
||||
|
||||
## Cards
|
||||
|
||||
Cards link readers to other pages or resources.
|
||||
|
||||
<Columns cols={2}>
|
||||
<Card title="API Reference" icon="terminal" href="/api-reference/introduction">
|
||||
Auto-generated docs from your OpenAPI spec.
|
||||
</Card>
|
||||
<Card title="Quickstart" icon="rocket" href="/quickstart">
|
||||
Get your docs running in three steps.
|
||||
</Card>
|
||||
</Columns>
|
||||
|
||||
```mdx
|
||||
<Columns cols={2}>
|
||||
<Card title="API Reference" icon="terminal" href="/api-reference/introduction">
|
||||
Auto-generated docs from your OpenAPI spec.
|
||||
</Card>
|
||||
<Card title="Quickstart" icon="rocket" href="/quickstart">
|
||||
Get your docs running in three steps.
|
||||
</Card>
|
||||
</Columns>
|
||||
```
|
||||
|
||||
Use `<Columns cols={N}>` to control the grid width. Cards without `href` render as informational panels.
|
||||
|
||||
## Steps
|
||||
|
||||
Steps present numbered procedures clearly.
|
||||
|
||||
<Steps>
|
||||
<Step title="Install the package">
|
||||
```bash
|
||||
npm install my-package
|
||||
```
|
||||
</Step>
|
||||
<Step title="Initialize">
|
||||
Run the init command in your project root.
|
||||
```bash
|
||||
npx my-package init
|
||||
```
|
||||
</Step>
|
||||
<Step title="You're ready">
|
||||
Start using the package in your code.
|
||||
</Step>
|
||||
</Steps>
|
||||
|
||||
````mdx
|
||||
<Steps>
|
||||
<Step title="Install the package">
|
||||
```bash
|
||||
npm install my-package
|
||||
```
|
||||
</Step>
|
||||
<Step title="Initialize">
|
||||
Run the init command in your project root.
|
||||
</Step>
|
||||
<Step title="You're ready">
|
||||
Start using the package in your code.
|
||||
</Step>
|
||||
</Steps>
|
||||
````
|
||||
|
||||
## Tabs
|
||||
|
||||
Tabs let readers switch between alternative content — different languages, environments, or platforms.
|
||||
|
||||
<Tabs>
|
||||
<Tab title="npm">
|
||||
```bash
|
||||
npm install my-package
|
||||
```
|
||||
</Tab>
|
||||
<Tab title="yarn">
|
||||
```bash
|
||||
yarn add my-package
|
||||
```
|
||||
</Tab>
|
||||
<Tab title="pnpm">
|
||||
```bash
|
||||
pnpm add my-package
|
||||
```
|
||||
</Tab>
|
||||
</Tabs>
|
||||
|
||||
````mdx
|
||||
<Tabs>
|
||||
<Tab title="npm">
|
||||
```bash
|
||||
npm install my-package
|
||||
```
|
||||
</Tab>
|
||||
<Tab title="yarn">
|
||||
```bash
|
||||
yarn add my-package
|
||||
```
|
||||
</Tab>
|
||||
<Tab title="pnpm">
|
||||
```bash
|
||||
pnpm add my-package
|
||||
```
|
||||
</Tab>
|
||||
</Tabs>
|
||||
````
|
||||
|
||||
## Accordions
|
||||
|
||||
Accordions collapse content behind a toggle — useful for FAQs or optional detail.
|
||||
|
||||
<AccordionGroup>
|
||||
<Accordion title="What does this product do?">
|
||||
A brief answer to the first question. Keep it concise.
|
||||
</Accordion>
|
||||
<Accordion title="How is pricing calculated?">
|
||||
Another answer here. Use as much space as you need.
|
||||
</Accordion>
|
||||
</AccordionGroup>
|
||||
|
||||
```mdx
|
||||
<AccordionGroup>
|
||||
<Accordion title="What does this product do?">
|
||||
A brief answer to the first question.
|
||||
</Accordion>
|
||||
<Accordion title="How is pricing calculated?">
|
||||
Another answer here.
|
||||
</Accordion>
|
||||
</AccordionGroup>
|
||||
```
|
||||
|
||||
## Frames
|
||||
|
||||
Wrap images or other content in a `Frame` to add a styled border and rounded corners.
|
||||
|
||||
<Frame>
|
||||
<img src="https://mintlify-assets.b-cdn.net/bigbend.jpg" alt="Big Bend landscape" />
|
||||
</Frame>
|
||||
|
||||
```mdx
|
||||
<Frame>
|
||||
<img src="/images/screenshot.png" alt="App screenshot" />
|
||||
</Frame>
|
||||
```
|
||||
|
||||
## Code groups
|
||||
|
||||
`CodeGroup` displays multiple code snippets as tabs — ideal for showing the same example in multiple languages.
|
||||
|
||||
<CodeGroup>
|
||||
```typescript TypeScript
|
||||
const response = await fetch('https://api.example.com/users');
|
||||
const users = await response.json();
|
||||
```
|
||||
|
||||
```python Python
|
||||
import requests
|
||||
response = requests.get('https://api.example.com/users')
|
||||
users = response.json()
|
||||
```
|
||||
|
||||
```bash curl
|
||||
curl https://api.example.com/users
|
||||
```
|
||||
</CodeGroup>
|
||||
|
||||
````mdx
|
||||
<CodeGroup>
|
||||
```typescript TypeScript
|
||||
const response = await fetch('https://api.example.com/users');
|
||||
```
|
||||
|
||||
```python Python
|
||||
response = requests.get('https://api.example.com/users')
|
||||
```
|
||||
</CodeGroup>
|
||||
````
|
||||
Reference in new issue
Block a user