876eb301a0
- Move layout components from layouts/ directory to components/layout/ - Reorganize divider component from data-display to layout category - Add comprehensive layout component collection including aspect-ratio, bento-grid, box, breakpoint-container, center, column, dashboard-shell, feed-layout, flex, grid-container, hstack, list-detail-layout, scroll-container, section, sidebar-layout, stack, supporting-pane-layout, tabs-container, and vstack - Update all demo components to match new layout structure - Refactor routing and index exports to reflect reorganized component architecture 🤖 Generated with [Claude Code](https://claude.ai/code) Co-Authored-By: Claude <noreply@anthropic.com>
104 lines
3.3 KiB
TypeScript
104 lines
3.3 KiB
TypeScript
import { Component } from '@angular/core';
|
|
import { CommonModule } from '@angular/common';
|
|
import { DividerComponent } from '../../../../../ui-essentials/src/lib/components/layout';
|
|
|
|
@Component({
|
|
selector: 'ui-divider-demo',
|
|
standalone: true,
|
|
imports: [CommonModule, DividerComponent],
|
|
template: `
|
|
<div class="demo-container">
|
|
<h2>Divider Demo</h2>
|
|
|
|
<!-- Orientation -->
|
|
<section class="demo-section">
|
|
<h3>Orientation</h3>
|
|
<div class="demo-row">
|
|
<div style="width: 100%;">
|
|
<p>Content above</p>
|
|
<ui-divider orientation="horizontal"></ui-divider>
|
|
<p>Content below</p>
|
|
</div>
|
|
</div>
|
|
<div class="demo-row" style="height: 100px; display: flex; align-items: center;">
|
|
<p>Left content</p>
|
|
<ui-divider orientation="vertical"></ui-divider>
|
|
<p>Right content</p>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Style Variants -->
|
|
<section class="demo-section">
|
|
<h3>Style Variants</h3>
|
|
<div class="demo-column">
|
|
<div>
|
|
<p>Solid divider</p>
|
|
<ui-divider variant="solid"></ui-divider>
|
|
</div>
|
|
<div>
|
|
<p>Dashed divider</p>
|
|
<ui-divider variant="dashed"></ui-divider>
|
|
</div>
|
|
<div>
|
|
<p>Dotted divider</p>
|
|
<ui-divider variant="dotted"></ui-divider>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Thickness Variants -->
|
|
<section class="demo-section">
|
|
<h3>Thickness</h3>
|
|
<div class="demo-column">
|
|
<div>
|
|
<p>Thin divider</p>
|
|
<ui-divider thickness="thin"></ui-divider>
|
|
</div>
|
|
<div>
|
|
<p>Default thickness</p>
|
|
<ui-divider thickness="default"></ui-divider>
|
|
</div>
|
|
<div>
|
|
<p>Thick divider</p>
|
|
<ui-divider thickness="thick"></ui-divider>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- With Content -->
|
|
<section class="demo-section">
|
|
<h3>With Content</h3>
|
|
<div class="demo-column">
|
|
<ui-divider>OR</ui-divider>
|
|
<ui-divider>Section Break</ui-divider>
|
|
<ui-divider>More Content</ui-divider>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Combined Examples -->
|
|
<section class="demo-section">
|
|
<h3>Combined Examples</h3>
|
|
<div class="demo-column">
|
|
<ui-divider variant="dashed" thickness="thin">Dashed Thin</ui-divider>
|
|
<ui-divider variant="dotted" thickness="thick">Dotted Thick</ui-divider>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Vertical Examples -->
|
|
<section class="demo-section">
|
|
<h3>Vertical Examples</h3>
|
|
<div style="display: flex; height: 80px; align-items: center; gap: 16px;">
|
|
<span>Item 1</span>
|
|
<ui-divider orientation="vertical" variant="solid" thickness="thin"></ui-divider>
|
|
<span>Item 2</span>
|
|
<ui-divider orientation="vertical" variant="dashed"></ui-divider>
|
|
<span>Item 3</span>
|
|
<ui-divider orientation="vertical" variant="dotted" thickness="thick"></ui-divider>
|
|
<span>Item 4</span>
|
|
</div>
|
|
</section>
|
|
</div>
|
|
`,
|
|
styleUrl: './divider-demo.component.scss'
|
|
})
|
|
export class DividerDemoComponent {} |