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.'
];
}
}