dumi Documentation

dumi provides a specialized theme for mobile component development. Key features include:

1. Mobile Device Demo Preview: Demos are forced to load in iframe mode to simulate mobile environments.
2. H5 High-Definition (HD) Support: Built on umi-hd for high-density screen scaling.
3. Full Feature Compatibility: Supports all default theme features, including compact and background demo configurations.
4. Responsive Fallback: The demo previewer automatically falls back to the default theme mode if responsiveness is required.

By default, the Tab title is derived from the {key} in the $tab-{key}.md filename. To provide a custom, user-friendly title for a Tab, use the title field in the file's FrontMatter.

---
title: Tab 示例
---

Install the @dumijs/vue-meta package using pnpm to start extracting Vue component metadata.

pnpm i @dumijs/vue-meta

dumi supports out-of-the-box conventional Page Tabs to group related content (like API, Examples, and Design Specs) under a single route.

To create a tab, use the naming convention $tab-{key}.md for a Markdown file that shares the same base name as the main document. For example, if your main file is page-tab.md, a file named page-tab.$tab-example.md will appear as a tab named example on the page-tab page.

File Structure Example:

.
└── docs
    └── guide
        ├── page-tab.md
        └── page-tab.$tab-example.md  # This becomes the 'example' tab

When using the locales configuration, create multi-language versions of your Markdown files by appending the locale id to the filename before the .md extension.

Example structure:

.
└── docs
    ├── index.md        # Default language (e.g., Chinese)
    └── index.en-US.md  # English version

.
└── docs
    ├── index.md        # 已有的中文版首页
    └── index.en-US.md  # 新创建的英文版首页

You can transform a Markdown page into a homepage using Frontmatter configuration.

• features: Displays a grid of component features (typically 3 per row). Each feature can have an emoji, title, link, and description (supports HTML).
• hero: Configures the hero section at the top of the page.
  • title: Large heading.
  • description: Subtext (supports HTML).
  • actions: An array of buttons. The last button in the array is rendered as the primary button.
• sidebar: A boolean to show or hide the sidebar on that specific page.

Customize the user experience of your documentation site using these file conventions:

• Loading Component: Create .dumi/loading.(js|jsx|ts|tsx) to define a global loading component. This is useful for showing custom animations while asynchronous chunks are loading during route transitions.
• 404 Page: Create .dumi/pages/404.(js|jsx|ts|tsx) to define a custom 404 error page.
• Favicon: Place a favicon file at .dumi/favicon.(ico|gif|png|jpg|jpeg|svg|avif|webp). dumi will automatically insert the corresponding <link> tag. Alternatively, you can manually specify the favicon via the favicons configuration option.

dumi provides a built-in <Badge> component to add labels or tags to Markdown content (such as headings).

Available types via the type prop:

• Default: <Badge>text</Badge>
• Warning: <Badge type="warning">text</Badge>
• Error: <Badge type="error">text</Badge>
• Success: <Badge type="success">text</Badge>

### Info Badge <Badge>info</Badge>

### Warning Badge <Badge type="warning">warning</Badge>

### Error Badge <Badge type="error">error</Badge>

### Success Badge <Badge type="success">success</Badge>

dumi supports Vue Single File Components (SFC). You can use the <script setup> syntax with TypeScript and scoped styles. To apply specific background colors to a demo block, use a comment directive like <!-- background: '#f6f7f9' --> at the top of the file.

<!--
  background: '#f6f7f9'
-->
<script setup lang="ts">
import { ref } from 'vue';

defineProps<{
  foo?: string;
  bar?: number;
}>();

const msg = ref('Hello World!');
const color = ref('chartreuse');
</script>

<template>
  <h1 class="msg">{{ msg }}</h1>
  <div>
    <input v-model="msg" />
  </div>
</template>

<style scoped>
.msg {
  color: v-bind('color');
}
</style>