import { Component } from '@angular/core'; import { CommonModule } from '@angular/common'; import { ContainerComponent, GridSystemComponent } from '../../../../../ui-essentials/src/lib/components/layout'; @Component({ selector: 'ui-container-demo', standalone: true, imports: [CommonModule, ContainerComponent, GridSystemComponent], template: `

Container Demo

Size Variants

@for (size of sizes; track size) {
{{ size }} (max-width: {{ getMaxWidth(size) }})
{{ size }} container content
}

Container Variants

Default Container

Basic container with standard padding and centering

Card Container

Card-style container with background, border, and shadow

Section Container

Section container with larger vertical padding for page sections

Hero Container

Hero Section

Large padding and centered content for hero sections

Flex Container Variants

Flex Column (Default)

Item 1
Item 2
Item 3

Flex Row

Item 1
Item 2
Item 3

Flex Center

Centered
Content

Flex Space Between

Start
End

Grid Container Variants

Grid Auto

@for (item of getGridItems(6); track $index) {
{{ item }}
}

Grid 3 Columns

@for (item of getGridItems(6); track $index) {
{{ item }}
}

Padding Variants

@for (padding of paddingSizes; track padding) {

Padding: {{ padding }}

{{ padding }} padding content
}

Background Variants

@for (bg of backgrounds; track bg) {

Background: {{ bg }}

{{ bg }} background
}

Scrollable Containers

Vertical Scroll

@for (item of getLongContent(); track $index) {

{{ item }}

}

Horizontal Scroll

This is a very long line of content that will cause horizontal scrolling when it exceeds the container width. Keep reading to see the scroll behavior in action.

Real World Example

Product Features

Discover what makes our product special

@for (feature of features; track feature.title) {

{{ feature.title }}

{{ feature.description }}

}
`, styleUrl: './container-demo.component.scss' }) export class ContainerDemoComponent { sizes: ('xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl' | 'full')[] = ['xs', 'sm', 'md', 'lg', 'xl', '2xl', 'full']; paddingSizes: ('xs' | 'sm' | 'md' | 'lg' | 'xl' | 'none')[] = ['xs', 'sm', 'md', 'lg', 'xl', 'none']; backgrounds: ('transparent' | 'surface' | 'surface-secondary' | 'surface-elevated')[] = [ 'transparent', 'surface', 'surface-secondary', 'surface-elevated' ]; features = [ { title: 'Fast', description: 'Lightning-fast performance optimized for speed' }, { title: 'Secure', description: 'Enterprise-grade security built from the ground up' }, { title: 'Scalable', description: 'Grows with your business needs seamlessly' }, { title: 'Reliable', description: '99.9% uptime guaranteed with redundant systems' }, { title: 'Easy to Use', description: 'Intuitive interface designed for productivity' }, { title: 'Supported', description: '24/7 customer support when you need it' } ]; getMaxWidth(size: string): string { const sizes: Record = { 'xs': '475px', 'sm': '640px', 'md': '768px', 'lg': '1024px', 'xl': '1280px', '2xl': '1536px', 'full': 'none' }; return sizes[size] || 'auto'; } getGridItems(count: number): string[] { return Array.from({ length: count }, (_, i) => `Item ${i + 1}`); } getLongContent(): string[] { return [ 'This is paragraph 1 with some content to demonstrate vertical scrolling.', 'This is paragraph 2 with more content to show how the container handles overflow.', 'This is paragraph 3 continuing the demonstration of scrollable content.', 'This is paragraph 4 adding even more content to ensure scrolling is needed.', 'This is paragraph 5 with the final bit of content to complete the demo.', 'This is paragraph 6 making sure we have enough content for scroll.', 'This is paragraph 7 - almost done with our scrollable content demo.', 'This is paragraph 8 - the last paragraph in our scrollable demo.' ]; } }