---
title: "ios美区教程"
description: "The components every page can use, and the MDX that renders each one."
---

> Documentation Index
> Fetch the complete documentation index at: https://sdoc.mayekun.com/llms.txt
> Use this file to discover all available pages before exploring further.

# ios美区教程

Every `.mdx` file can use these components without an import. Each one is a file in `src/components/ui/`, so you can change how it looks or works.

## Aside

Set a note, tip, caution, or warning apart from the text around it.

> **Note**
>
> Pages are validated at build time.

> **Before you deploy**
>
> Set `site` in `astro.config.ts` to your production URL.

```mdx
<Aside type="note">
  Pages are validated at build time.
</Aside>

<Aside type="caution" title="Before you deploy">
  Set `site` in `astro.config.ts` to your production URL.
</Aside>
```

| Prop | Value |
|---|---|
| `type` | `note` (default), `tip`, `caution`, or `danger` |
| `title` | Text above the content. Defaults to the type's name. |
| `icon` | Any `ph:` icon name, in place of the type's icon. |

For a title with formatting, pass it as a slot: `<Fragment slot="title">Uses <code>env</code></Fragment>`.

## Steps

Number a procedure. Each step has a title and its own content.

1. **Create the page**

   Add `src/content/docs/deploy.mdx` with a `title`.
2. **Preview it**

   Run `npm run dev` and open the page.

```mdx
<Steps>
  <Step title="Create the page">
    Add `src/content/docs/deploy.mdx` with a `title`.
  </Step>
  <Step title="Preview it">
    Run `npm run dev` and open the page.
  </Step>
</Steps>
```

| Prop | Value |
|---|---|
| `start` on `Steps` | The first step's number. Defaults to 1. |
| `title` on `Step` | The step's heading. Also accepts a `title` slot. |

## Tabs

Show the same content in several variants. Give tabs a `syncKey`, and the reader's choice carries over to every set of tabs with the same key.

### macOS

Press <kbd>⌘</kbd> <kbd>K</kbd> to search.

### Windows

Press <kbd>Ctrl</kbd> <kbd>K</kbd> to search.

```mdx
<Tabs syncKey="os">
  <TabItem label="macOS">
    Press <kbd>⌘</kbd> <kbd>K</kbd> to search.
  </TabItem>
  <TabItem label="Windows">
    Press <kbd>Ctrl</kbd> <kbd>K</kbd> to search.
  </TabItem>
</Tabs>
```

| Prop | Value |
|---|---|
| `syncKey` on `Tabs` | Tabs with the same key switch together, and remember the choice. |
| `label` on `TabItem` | The tab's name. Required. |

## Package managers

Write an install command once and show it for npm, pnpm, Yarn, and Bun.

```sh
npm i your-package
yarn add your-package
pnpm add your-package
bun add your-package
```

```mdx
<PackageManagers pkg="your-package" />
```

Add `dev` for a dev dependency, or `type="run" args="build"` for a script.

## Cards

Link readers to the next places to go, in a grid that stacks on small screens.

- **Write a page** — Create an `.mdx` file in `src/content/docs/`.
- **Change the theme** — Edit the colour and type tokens in `src/styles/globals.css`.

```mdx
<CardGrid>
  <Card title="Write a page" icon="ph:pencil-simple">
    Create an `.mdx` file in `src/content/docs/`.
  </Card>
  <Card title="Change the theme" icon="ph:palette">
    Edit the colour and type tokens in `src/styles/globals.css`.
  </Card>
</CardGrid>
```

| Prop | Value |
|---|---|
| `title` on `Card` | The card's heading. Also accepts a `title` slot. |
| `icon` on `Card` | Any `ph:` icon name. Also accepts an `icon` slot. |

Icons come from [Phosphor](https://phosphoricons.com): use any name with the `ph:` prefix.

## Partials

Write a passage once and include it on any page. Partials live in `src/content/partials/`.

This text lives in `src/content/partials/example.mdx` and is pulled in with
`<Render file="example" />`. Edit the partial once and every page that renders
it stays in sync — handy for install steps, support notes, or any boilerplate
you'd otherwise copy between pages.

```mdx
<Render file="example" />
```

## Restyle any part

Every part of every component has a `data-slot` attribute, so you can restyle one piece from `src/styles/globals.css` without editing the component.

```css title="src/styles/globals.css"
[data-slot="card-title"] {
  letter-spacing: -0.01em;
}
```

Corners come from two tokens in the same file: `--nb-radius` for cards, callouts, code blocks and buttons, and `--nb-radius-sm` for the small marks inside them. Change them to re-round the whole site.

## Add more

Accordions, file trees, link cards, embeds, and more install from the registry when you need them. Each one lands as a file in `src/components/ui/`, like the components above.

```sh
npx @cloudflare/nimbus-docs add accordion
yarn dlx @cloudflare/nimbus-docs add accordion
pnpm dlx @cloudflare/nimbus-docs add accordion
bunx @cloudflare/nimbus-docs add accordion
```

Source: https://sdoc.mayekun.com/ios%E7%BE%8E%E5%8C%BA%E6%95%99%E7%A8%8B/index.mdx