38 lines
1.0 KiB
HTML
38 lines
1.0 KiB
HTML
<div class="container">
|
|
<h1>AEF Component Test</h1>
|
|
|
|
<section>
|
|
<h2>Switch Component</h2>
|
|
<switch [(isActive)]="isToggled" (toggle)="handleToggle($event)"></switch>
|
|
<p>Switch is: {{ isToggled() ? 'ON' : 'OFF' }}</p>
|
|
</section>
|
|
|
|
<section>
|
|
<h2>Dropdown Component</h2>
|
|
<div style="display: flex; flex-direction: column; gap: 40px; align-items: flex-start;">
|
|
<div>
|
|
<h3>Object Options</h3>
|
|
<dropdown
|
|
[options]="dropdownOptions"
|
|
[(value)]="selectedDropdownValue"
|
|
(selectionChange)="handleDropdownChange($event)"
|
|
icon="language">
|
|
</dropdown>
|
|
<p>Selected Value: {{ selectedDropdownValue() }}</p>
|
|
</div>
|
|
|
|
<div>
|
|
<h3>String Options (Simple)</h3>
|
|
<dropdown
|
|
[options]="['Small', 'Medium', 'Large']"
|
|
[(value)]="selectedSize"
|
|
placeholder="Choose Size">
|
|
</dropdown>
|
|
<p>Selected Size: {{ selectedSize() }}</p>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
</div>
|
|
|
|
<router-outlet />
|