or run

npx @tessl/cli init

Version

Tile

Overview

Evals

Files

docs

context-state.md help-system.md index.md layout-configuration.md main-layout.md page-components.md utilities.md

tile.json

Layout Configuration

Comprehensive settings and configuration system for themes, layout modes, and runtime customization of ProLayout.

Capabilities

ProSettings Interface

Complete configuration interface for all layout settings and customization options.

/**
 * Complete layout settings configuration interface
 */
interface ProSettings {
  /** Navigation theme */
  navTheme?: 'realDark' | 'light';
  
  /** Layout mode */
  layout?: 'side' | 'top' | 'mix';
  
  /** Content width mode (only works when layout is top) */
  contentWidth?: 'Fluid' | 'Fixed';
  
  /** Sticky header */
  fixedHeader?: boolean;
  
  /** Sticky sidebar */
  fixSiderbar?: boolean;
  
  /** Menu configuration object */
  menu?: MenuSettings;
  
  /** Layout title */
  title?: string | false;
  
  /** Custom iconfont Symbol script URL */
  iconfontUrl?: string;
  
  /** Primary brand color */
  colorPrimary?: string;
  
  /** Color weakness filter */
  colorWeak?: boolean;
  
  /** Split menus (only in mix mode) */
  splitMenus?: boolean;
  
  /** Hide sidebar when menu is empty */
  suppressSiderWhenMenuEmpty?: boolean;
  
  /** Sidebar menu type */
  siderMenuType?: 'sub' | 'group';
  
  /** Header render control */
  headerRender?: false;
  
  /** Footer render control */
  footerRender?: false;
  
  /** Menu render control */
  menuRender?: false;
  
  /** Menu header render control */
  menuHeaderRender?: false;
}

interface MenuSettings {
  /** Menu internationalization */
  locale?: boolean;
  
  /** Hide menu when collapsed */
  hideMenuWhenCollapsed?: boolean;
  
  /** Show title when collapsed */
  collapsedShowTitle?: boolean;
  
  /** Show group title when collapsed */
  collapsedShowGroupTitle?: boolean;
  
  /** Default open all menu items */
  defaultOpenAll?: boolean;
  
  /** Ignore flat menu behavior */
  ignoreFlatMenu?: boolean;
  
  /** Menu loading state */
  loading?: boolean;
  
  /** Loading change callback */
  onLoadingChange?: (loading?: boolean) => void;
  
  /** Request parameters */
  params?: Record<string, any>;
  
  /** Async menu data request */
  request?: (
    params: Record<string, any>,
    defaultMenuData: MenuDataItem[]
  ) => Promise<MenuDataItem[]>;
  
  /** Menu aggregation mode */
  type?: 'sub' | 'group';
  
  /** Disable auto close */
  autoClose?: false;
}

// Type aliases for backward compatibility
type Settings = ProSettings;

SettingDrawer Component

Interactive drawer component for runtime layout customization and theme switching.

/**
 * Interactive settings drawer for runtime layout customization
 * @param props - Settings drawer configuration
 * @returns React element with settings drawer
 */
function SettingDrawer(props: SettingDrawerProps): React.ReactElement;

interface SettingDrawerProps {
  /** Current settings values */
  settings?: ProSettings;
  
  /** Settings change callback */
  onSettingChange?: (settings: ProSettings) => void;
  
  /** Hide copy configuration button */
  hideCopyButton?: boolean;
  
  /** Hide hint alert */
  hideHintAlert?: boolean;
  
  /** Hide loading change setting */
  hideLoading?: boolean;
  
  /** Disable URL synchronization */
  disableUrlParams?: boolean;
  
  /** Enable dark theme switching */
  enableDarkTheme?: boolean;
  
  /** Color list for theme selection */
  colorList?: {
    key: string;
    color: string;
  }[];
  
  /** Default settings */
  defaultSettings?: ProSettings;
  
  /** Settings keys to display */
  settingKeys?: Array<keyof ProSettings>;
}

interface SettingDrawerState {
  /** Drawer open state */
  collapse?: boolean;
  
  /** Current language */
  language?: string;
}

Usage Examples:

import React, { useState } from "react";
import ProLayout, { SettingDrawer } from "@ant-design/pro-layout";
import type { ProSettings } from "@ant-design/pro-layout";

// Basic settings drawer
function LayoutWithSettings() {
  const [settings, setSettings] = useState<ProSettings>({
    navTheme: 'light',
    layout: 'side',
    contentWidth: 'Fluid',
    fixedHeader: false,
    fixSiderbar: true,
    colorPrimary: '#1677FF',
  });

  return (
    <>
      <ProLayout
        {...settings}
        title="My App"
        onCollapse={(collapsed) => 
          setSettings(prev => ({ ...prev, collapsed }))
        }
      >
        <div>Your content</div>
      </ProLayout>
      
      <SettingDrawer
        settings={settings}
        onSettingChange={(newSettings) => {
          setSettings(newSettings);
        }}
        enableDarkTheme
      />
    </>
  );
}

// Advanced settings drawer with custom colors
function AdvancedSettingsDrawer() {
  const [settings, setSettings] = useState<ProSettings>({});
  
  const customColors = [
    { key: 'daybreak', color: '#1890ff' },
    { key: 'dust', color: '#F5222D' },
    { key: 'volcano', color: '#FA541C' },
    { key: 'sunset', color: '#FAAD14' },
    { key: 'cyan', color: '#13C2C2' },
    { key: 'green', color: '#52C41A' },
    { key: 'geekblue', color: '#2F54EB' },
    { key: 'purple', color: '#722ED1' },
  ];

  return (
    <SettingDrawer
      settings={settings}
      onSettingChange={setSettings}
      colorList={customColors}
      hideCopyButton={false}
      hideHintAlert={false}
      defaultSettings={{
        navTheme: 'light',
        layout: 'side',
        contentWidth: 'Fluid',
      }}
      settingKeys={[
        'navTheme',
        'layout',
        'contentWidth',
        'fixedHeader',
        'fixSiderbar',
        'colorPrimary',
      ]}
    />
  );
}

Default Settings

Predefined default configuration values for ProLayout.

/**
 * Default settings configuration
 */
const defaultSettings: ProSettings = {
  navTheme: 'light',
  layout: 'side',
  contentWidth: 'Fluid',
  fixedHeader: false,
  fixSiderbar: true,
  iconfontUrl: '',
  colorPrimary: '#1677FF',
  splitMenus: false,
};

Content Width Types

/**
 * Content width mode type
 */
type ContentWidth = 'Fluid' | 'Fixed';

Render Setting Types

/**
 * Render control settings for layout components
 */
interface RenderSetting {
  /** Control header rendering */
  headerRender?: false;
  
  /** Control footer rendering */
  footerRender?: false;
  
  /** Control menu rendering */
  menuRender?: false;
  
  /** Control menu header rendering */
  menuHeaderRender?: false;
}

Configuration Patterns

Basic Configuration

const basicSettings: ProSettings = {
  navTheme: 'light',
  layout: 'side',
  fixedHeader: true,
  colorPrimary: '#1890ff',
};

Dark Theme Configuration

const darkSettings: ProSettings = {
  navTheme: 'realDark',
  layout: 'side',
  fixedHeader: true,
  fixSiderbar: true,
  colorPrimary: '#1890ff',
};

Top Layout Configuration

const topLayoutSettings: ProSettings = {
  layout: 'top',
  contentWidth: 'Fixed',
  fixedHeader: true,
  navTheme: 'light',
};

Mix Layout Configuration

const mixLayoutSettings: ProSettings = {
  layout: 'mix',
  splitMenus: true,
  fixedHeader: true,
  navTheme: 'light',
  colorPrimary: '#722ED1',
};

Mobile-Optimized Configuration

const mobileSettings: ProSettings = {
  layout: 'side',
  fixedHeader: false,
  fixSiderbar: false,
  menu: {
    hideMenuWhenCollapsed: true,
    autoClose: false,
  },
};

Enterprise Configuration

const enterpriseSettings: ProSettings = {
  navTheme: 'light',
  layout: 'mix',
  contentWidth: 'Fixed',
  fixedHeader: true,
  fixSiderbar: true,
  splitMenus: true,
  colorPrimary: '#1677FF',
  title: 'Enterprise Portal',
  menu: {
    locale: true,
    defaultOpenAll: false,
    type: 'group',
  },
};

Theme Customization

Navigation Themes

Light Theme (navTheme: 'light'): Clean, bright interface suitable for most applications
Dark Theme (navTheme: 'realDark'): Dark interface for reduced eye strain and modern look

Brand Colors

ProLayout supports custom primary colors that automatically generate a consistent color palette:

const brandedSettings: ProSettings = {
  colorPrimary: '#722ED1', // Purple brand
  // or
  colorPrimary: '#13C2C2', // Cyan brand
  // or  
  colorPrimary: '#52C41A', // Green brand
};

Layout Modes

Side Layout

Traditional sidebar navigation:

{ layout: 'side', fixSiderbar: true }

Top Layout

Horizontal navigation:

{ layout: 'top', contentWidth: 'Fixed' }

Mix Layout

Hybrid navigation:

{ layout: 'mix', splitMenus: true }

Runtime Configuration

Settings Persistence

// Save settings to localStorage
const saveSettings = (settings: ProSettings) => {
  localStorage.setItem('pro-layout-settings', JSON.stringify(settings));
};

// Load settings from localStorage
const loadSettings = (): ProSettings => {
  const saved = localStorage.getItem('pro-layout-settings');
  return saved ? JSON.parse(saved) : defaultSettings;
};

URL Synchronization

The SettingDrawer can automatically sync settings with URL parameters for easy sharing of configurations.

Version

Tile

Files