or run

npx @tessl/cli init
Log in

Version

Tile

Overview

Evals

Files

docs

demo-layout.mddevice-preview.mdenhanced-previewer.mdindex.mdpreviewer-actions.md
tile.json

tessl/npm-dumi-theme-mobile

Mobile-focused theme for Dumi documentation generator that provides responsive layouts, touch-optimized navigation, and mobile-specific components for creating documentation websites that work seamlessly on mobile devices.

Workspace
tessl
Visibility
Public
Created
Last updated
Describes
npmpkg:npm/dumi-theme-mobile@2.3.x

To install, run

npx @tessl/cli install tessl/npm-dumi-theme-mobile@2.3.0

index.mddocs/

Dumi Theme Mobile

Dumi Theme Mobile is a mobile-focused theme for the Dumi documentation generator that provides responsive layouts, touch-optimized navigation, and mobile-specific components for creating documentation websites that work seamlessly on mobile devices. It extends Dumi's default theme with mobile enhancements while maintaining full compatibility with the core dumi system.

Package Information

  • Package Name: dumi-theme-mobile
  • Package Type: npm
  • Language: TypeScript
  • Installation: npm install dumi-theme-mobile --save-dev

Core Imports

This package follows dumi's theme convention where components are automatically resolved through theme aliases. No direct imports are needed - dumi detects and loads theme components automatically based on the dumi-theme- prefix.

Theme Resolution:

// Dumi automatically resolves these theme components:
// dumi/theme/layouts/DemoLayout       -> dumi-theme-mobile/layouts/DemoLayout
// dumi/theme/slots/Device             -> dumi-theme-mobile/slots/Device
// dumi/theme/builtins/Previewer       -> dumi-theme-mobile/builtins/Previewer
// dumi/theme/slots/PreviewerActions   -> dumi-theme-mobile/slots/PreviewerActions

Basic Usage

Install as a dev dependency and configure in your dumi configuration:

// .dumirc.ts
export default {
  themeConfig: {
    // Configure device width (default: 375px)
    deviceWidth: 375,
    
    // Configure HD scaling rules
    hd: {
      rules: [
        {
          mode: 'vw',
          options: [100, 750],
          minWidth: 750
        }
      ]
    }
  }
};

Architecture

Dumi Theme Mobile extends the dumi theme system with:

  • Component Override System: Uses dumi's theme resolution to override default components
  • Mobile-First Design: Prioritizes mobile experience with responsive layouts
  • HD Scaling Integration: Built-in support for high-DPI displays via umi-hd
  • Touch Enhancement: Touch event simulation for desktop development
  • Device Preview: Mobile device frame simulation for accurate preview

Capabilities

Mobile Demo Layout

Enhanced demo layout that provides mobile-optimized rendering with HD scaling and touch emulation for demo pages.

// Available through dumi theme system as DemoLayout
// Component takes no props - uses hooks to access data
const MobileDemoLayout: React.FC;

// Route message constant for iframe communication
const ROUTE_MSG_TYPE: "dumi:update-iframe-route";

Mobile Demo Layout

Device Preview

Mobile device frame component that renders demos within a simulated mobile device interface.

interface IDeviceProps {
  url: string;
  inlineHeight?: number;
}

// Available through dumi theme system as Device slot  
const Device: React.FC<IDeviceProps>;

Device Preview

Enhanced Previewer

Mobile-enhanced previewer component that wraps dumi's default previewer with mobile-specific functionality.

import type { IPreviewerProps } from 'dumi';

// Available through dumi theme system as Previewer builtin
// Uses IPreviewerProps from dumi directly - no custom interface
const MobilePreviewer: React.FC<IPreviewerProps>;

Enhanced Previewer

Previewer Actions with QR Code

Enhanced previewer actions that add QR code functionality for easy mobile testing.

import type { ComponentProps } from 'react';
import PreviewerActions from 'dumi/theme-default/slots/PreviewerActions';

// Inline type definition - extends default PreviewerActions props
type MobilePreviewerActionsProps = ComponentProps<typeof PreviewerActions> & {
  qrCodeUrl?: string;
};

// Available through dumi theme system as PreviewerActions slot
const MobilePreviewerActions: React.FC<MobilePreviewerActionsProps>;

Previewer Actions

Configuration Types

export interface IThemeConfig {
  /**
   * HD solution configurations based on umi-hd
   * @see https://github.com/umijs/umi-hd
   */
  hd?: {
    rules: {
      /** Minimum width for this rule to apply */
      minWidth?: number;
      /** Maximum width for this rule to apply */
      maxWidth?: number;
      /** HD scaling mode */
      mode: 'vl' | 'flex' | 'vw' | 'vh';
      /** Mode-specific options */
      options?: number | [number, number];
    }[];
  };
  /**
   * Set device width in pixels for desktop preview
   * @default undefined (uses browser default)
   */
  deviceWidth?: number;
}

/**
 * Available HD scaling modes from umi-hd (actual implementation uses 'any' type)
 * Each mode provides different scaling strategies for high-DPI displays
 */
interface HDModes {
  /** Variable Layout: Flexible scaling based on viewport */
  vl: any;
  /** Flexbox-based scaling */
  flex: any;
  /** Viewport width based scaling */
  vw: any;
  /** Viewport height based scaling */
  vh: any;
}

Dependencies

Runtime Dependencies:

  • @ant-design/icons-svg: Icon components for UI elements
  • f2-touchemulator: Touch event simulation for desktop browsers
  • qrcode.react: QR code generation for mobile preview URLs
  • umi-hd: HD scaling solutions for high-DPI displays

Peer Dependencies:

  • dumi: ^2.2.0 (required theme host)
  • react: >=16.8 (React framework)
  • react-dom: >=16.8 (React DOM rendering)