# ClassicLayout The ClassicLayout component provides a comprehensive full-screen layout with header, footer, sidebar, right sidebar, and main content area. This classic application layout is ideal for complex applications that need multiple content zones and navigation areas. ## Features - **Full-Screen Layout**: Covers the entire viewport with header, content, and optional footer - **Dual Sidebars**: Left sidebar for navigation and optional right sidebar for tools/info - **Resizable Panels**: Both sidebars can be independently resized - **Header and Footer**: Fixed header and optional status/footer bar - **Flexible Configuration**: All areas are optional and highly configurable - **Split Panel Integration**: Uses Split component for smooth panel resizing ## Import ```typescript import { ClassicLayout } from '@ticatec/uniface-element/app-layout/ClassicLayout'; ``` ## Properties | Property | Type | Default | Description | |----------|------|---------|-------------| | `headerHeight` | `string` | `"48px"` | Sets the height of the header | | `statusHeight` | `string` | `"22px"` | Sets the height of the status/footer bar | | `sidebarWidth` | `string` | `"300px"` | Sets the initial width of the left sidebar | | `sidebarResize` | `boolean` | `false` | Enables left sidebar resizing | | `sidebarMaxWidth` | `string \| null` | `null` | Maximum width for the left sidebar | | `sidebarMinWidth` | `string \| null` | `null` | Minimum width for the left sidebar | | `rightBarWidth` | `string` | `"240px"` | Sets the initial width of the right sidebar | | `rightBarResize` | `boolean` | `false` | Enables right sidebar resizing | | `rightBarMaxWidth` | `string \| null` | `null` | Maximum width for the right sidebar | | `rightBarMinWidth` | `string \| null` | `null` | Minimum width for the right sidebar | ## Slots - **header**: Content displayed in the header area (spans full width) - **sidebar**: Content for the left sidebar (optional) - **right-sidebar**: Content for the right sidebar (optional) - **bottom**: Content for the footer/status bar (optional) - **Default Slot**: Main content displayed in the center area ## Basic Usage ```svelte

Left sidebar content

Right sidebar content

Status bar content

Main application content

``` ## Advanced Examples ### IDE-Style Application Layout ```svelte

Code Editor

Properties

Project Statistics

Files: {projectStats.files}

Lines: {projectStats.lines}

Characters: {projectStats.characters}

Problems

⚠️ Unused variable 'temp'

❌ Missing semicolon

Ready | Line 45, Column 12

TypeScript | UTF-8 | LF

{#each Array(20) as _, i}

{i + 1}

{/each}


<script lang="ts">
  import { Button } from '@ticatec/uniface-element/Button';
  
  let count = 0;
  
  const increment = () => {
    count += 1;
  };
</script>

<div class="app">
  <h1>Welcome to Svelte</h1>
  <Button on:click={increment}>
    Count: {count}
  </Button>
</div>

``` ### Dashboard Application Layout ```svelte

Notifications

{#each notifications as notification}

{notification.text}

{notification.time}

{/each}

System Status

Uptime: {systemStats.uptime}

Memory: {systemStats.memory}

CPU: {systemStats.cpu}

Storage: {systemStats.storage}

🟢 All systems operational • Last updated: {new Date().toLocaleTimeString()}

Connected users: 1,247

Welcome back, {currentUser.name}

Here's what's happening with your system today.

12,486

+5.2%

$48,392

+12.1%

1,247

-2.8%

98.2%

+0.5%

User login from IP 192.168.1.1

Database backup completed

New report generated

``` ## Best Practices 1. **Layout Planning**: Plan your layout zones carefully - header for branding/navigation, sidebars for tools/navigation, main for content 2. **Responsive Design**: Consider how the layout adapts on different screen sizes 3. **Content Hierarchy**: Use the header for primary navigation, sidebars for secondary tools 4. **Performance**: Keep sidebar content lightweight to maintain smooth resizing 5. **User Experience**: Provide clear visual separation between different areas 6. **Accessibility**: Use semantic HTML within slots and maintain proper focus management ## Accessibility Considerations - Use proper heading hierarchy across all layout areas - Ensure keyboard navigation works smoothly between panels - Provide skip links for screen reader users to jump between major sections - Use semantic HTML elements (header, nav, main, aside, footer) within appropriate slots - Maintain proper focus management when panels are resized - Ensure color contrast meets accessibility standards in all areas ## Browser Support - Modern browsers with CSS Flexbox support - Resize functionality requires pointer events support - Layout works in all browsers supporting modern CSS ## Notes - The component uses Split component internally for panel resize functionality - All slots are optional - you can use any combination of header, sidebars, main content, and footer - You can specify minimum and maximum widths for both sidebars independently - Header and footer heights can be customized with any valid CSS unit - The layout covers the full viewport and is ideal for application interfaces - Both left and right sidebars can be resized independently when enabled

Application Title

Explorer