ADOFAIEditorForum/ComponentTest
2
0 Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Cleanup Dropdown UI

Browse Source
This commit is contained in:
copecone committed 2026-03-13 12:08:12 +09:00
1 parent cd595cb062
commit 167dd7bb99
6 files changed
+97 -55
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

src/app/app.html
+17 -2
View File
@@ -9,13 +9,28 @@
<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"
[(selectedValue)]="selectedDropdownValue"
(change)="handleDropdownChange($event)"
[(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>
src/app/app.ts
+3 -1
View File
@@ -14,10 +14,12 @@ export class App {
dropdownOptions: DropdownOption[] = [
{ label: 'English', value: "EN" },
{ label: '한국어', value: "KR" }
{ label: '한국어', value: "KR" },
{ label: '日本語', value: "JP" },
];
selectedDropdownValue = signal<any>(null);
selectedSize = signal<string | null>(null);
handleToggle(state: boolean) {
console.log('Toggle state:', state);
src/app/components/dropdown/dropdown.html
+4 -4
View File
@@ -2,19 +2,19 @@
@if (icon()) {
<span class="material-symbols-outlined icon-24 prefix-icon">{{ icon() }}</span>
}
<span class="placeholder">{{ selectedLabel }}</span>
<span class="placeholder">{{ selectedLabel() }}</span>
<span class="material-symbols-outlined icon-24 chevron" [class.open]="isOpen()">keyboard_arrow_down</span>
</div>
@if (isOpen()) {
<ul class="dropdown-list" role="listbox">
@for (option of options(); track option.value; let i = $index) {
@for (option of normalizedOptions(); track option.value; let i = $index) {
<li
class="dropdown-item"
role="option"
[class.selected]="option.value === selectedValue()"
[class.selected]="option.value === value()"
[class.focused]="i === focusedIndex()"
[attr.aria-selected]="option.value === selectedValue()"
[attr.aria-selected]="option.value === value()"
(click)="selectOption(option); $event.stopPropagation()">
{{ option.label }}
</li>
src/app/components/dropdown/dropdown.scss
+30 -34
View File
@@ -8,8 +8,9 @@ $dropdown_hover: #F5F5F5;
$dropdown_selected: #FFF4F0;
$dropdown_accent: oklch(0.7086 0.1896 39.86);
$dropdown_dimension: (324px, 40px);
$dropdown_padding: (10px, 5px);
// 사용자님의 요구사항인 고정 너비 324px 복구
$dropdown_width: 324px;
$dropdown_height: 40px;
$dropdown_border_radius: 8px;
$dropdown_animation_timing: cubic-bezier(0.4, 0, 0.2, 1);
@@ -19,13 +20,14 @@ $dropdown_animation_duration: 0.2s;
display: inline-block;
position: relative;
width: list.nth($dropdown_dimension, 1);
width: $dropdown_width;
padding: 0; margin: 0;
background-color: $dropdown_bg;
border-radius: $dropdown_border_radius;
box-shadow: 0 0 0 1px $dropdown_border_color inset;
outline: none;
cursor: pointer;
&:focus-visible {
box-shadow: 0 0 0 1px $dropdown_border_color inset, 0 0 0 2px white, 0 0 0 4px $dropdown_accent;
@@ -35,31 +37,30 @@ $dropdown_animation_duration: 0.2s;
.dropdown-box {
display: flex;
align-items: center;
justify-content: flex-start;
padding: list.nth($dropdown_padding, 2) list.nth($dropdown_padding, 1);
height: list.nth($dropdown_dimension, 2) - list.nth($dropdown_padding, 2) * 2;
border-radius: $dropdown_border_radius;
transition: library.append-transition((border-color, box-shadow), $dropdown_animation_duration $dropdown_animation_timing);
padding: 0 12px;
height: $dropdown_height;
box-sizing: border-box;
gap: 8px;
.prefix-icon {
width: 24px;
height: 24px;
width: 24px; height: 24px;
flex-shrink: 0;
user-select: none;
}
.placeholder {
white-space: nowrap;
text-overflow: ellipsis;
margin-right: auto;
flex-grow: 1;
font-size: 18px;
line-height: 1.2; // descender(g, y 등)가 잘리지 않도록 행간 확보
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
user-select: none;
}
.chevron {
width: 24px;
height: 24px;
width: 24px; height: 24px;
flex-shrink: 0;
transition: transform $dropdown_animation_duration $dropdown_animation_timing;
user-select: none;
@@ -74,38 +75,31 @@ $dropdown_animation_duration: 0.2s;
top: calc(100% + 4px);
left: 0;
width: 100%;
padding: 0;
padding: 0; // 아이템이 꽉 차도록 패딩 제거
margin: 0;
list-style: none;
background-color: $dropdown_bg;
border-radius: $dropdown_border_radius;
z-index: 1000;
max-height: 200px;
max-height: 240px;
overflow-y: auto;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
animation: slideIn $dropdown_animation_duration $dropdown_animation_timing;
// 자식 요소의 배경색이 테두리를 침범하지 못하도록 하는 사용자님의 핵심 설계 복구
&::after {
display: inline-block;
content: "";
position: absolute;
top: 0; left: 0; right: 0; bottom: 0;
border-radius: $dropdown_border_radius;
box-shadow: 0 0 0 1px $dropdown_border_color inset;
pointer-events: none;
z-index: 1001;
position: absolute;
top: 0; left: 0; bottom: 0; right: 0;
border-radius: $dropdown_border_radius;
z-index: 1001; // 테두리를 최상단으로!
}
@keyframes slideIn {
from {
opacity: 0;
transform: translateY(-8px);
}
to {
opacity: 1;
transform: translateY(0);
}
from { opacity: 0; transform: translateY(-8px); }
to { opacity: 1; transform: translateY(0); }
}
}
@@ -114,6 +108,8 @@ $dropdown_animation_duration: 0.2s;
align-items: center;
height: 40px;
padding: 0 16px;
position: relative;
line-height: 1.2; // descender 보호를 위해 1에서 1.2로 수정
transition: background-color $dropdown_animation_duration $dropdown_animation_timing;
&:hover, &.focused {
src/app/components/dropdown/dropdown.ts
+41 -13
View File
@@ -1,4 +1,4 @@
import { Component, input, model, output, signal, HostListener, ElementRef
import { Component, input, model, output, signal, HostListener, ElementRef, computed
} from '@angular/core'
import { CommonModule } from '@angular/common'
@@ -20,7 +20,7 @@ export interface DropdownOption {
'[class.open]': 'isOpen()',
'tabindex': '0',
'(click)': 'toggle()',
'(keydown.enter)': 'toggle()',
'(keydown.enter)': 'onEnter($event)',
'(keydown.space)': 'onSpaceDown($event)',
'(keydown.escape)': 'close()',
'(keydown.arrowdown)': 'onArrowDown($event)',
@@ -28,21 +28,30 @@ export interface DropdownOption {
}
})
export class Dropdown {
options = input<DropdownOption[]>([]);
options = input<Array<DropdownOption | string>>([]);
placeholder = input<string>('Select an option');
icon = input<string>();
selectedValue = model<any>(null);
change = output<any>();
value = model<any>(null);
selectionChange = output<any>();
isOpen = signal(false);
focusedIndex = signal(-1);
constructor(private el: ElementRef) {}
normalizedOptions = computed(() => {
return this.options().map(opt => {
if (typeof opt === 'string') {
return { label: opt, value: opt };
}
return opt;
});
});
toggle() {
this.isOpen.update(v => !v);
if (this.isOpen()) {
this.focusedIndex.set(this.options().findIndex(o => o.value === this.selectedValue()));
this.focusedIndex.set(this.normalizedOptions().findIndex(o => o.value === this.value()));
}
}
@@ -52,15 +61,34 @@ export class Dropdown {
}
selectOption(option: DropdownOption) {
this.selectedValue.set(option.value);
this.change.emit(option.value);
this.value.set(option.value);
this.selectionChange.emit(option.value);
this.close();
}
onEnter(event: Event) {
event.preventDefault();
if (this.isOpen()) {
const currentIndex = this.focusedIndex();
if (currentIndex >= 0 && currentIndex < this.normalizedOptions().length) {
this.selectOption(this.normalizedOptions()[currentIndex]);
}
} else {
this.toggle();
}
}
onSpaceDown(event: Event) {
event.preventDefault();
if (this.isOpen()) {
const currentIndex = this.focusedIndex();
if (currentIndex >= 0 && currentIndex < this.normalizedOptions().length) {
this.selectOption(this.normalizedOptions()[currentIndex]);
}
} else {
this.toggle();
}
}
onArrowDown(event: Event) {
event.preventDefault();
@@ -68,7 +96,7 @@ export class Dropdown {
this.toggle();
return;
}
this.focusedIndex.update(i => (i + 1) % this.options().length);
this.focusedIndex.update(i => (i + 1) % this.normalizedOptions().length);
}
onArrowUp(event: Event) {
@@ -77,7 +105,7 @@ export class Dropdown {
this.toggle();
return;
}
this.focusedIndex.update(i => (i - 1 + this.options().length) % this.options().length);
this.focusedIndex.update(i => (i - 1 + this.normalizedOptions().length) % this.normalizedOptions().length);
}
@HostListener('document:click', ['$event'])
@@ -87,8 +115,8 @@ export class Dropdown {
}
}
get selectedLabel(): string {
const selected = this.options().find(o => o.value === this.selectedValue());
selectedLabel = computed(() => {
const selected = this.normalizedOptions().find(o => o.value === this.value());
return selected ? selected.label : this.placeholder();
}
});
}
src/styles.scss
+2 -1
View File
@@ -1,7 +1,8 @@
@import url('https://aef.kr/static/fontstyles/nanum-square-neo.css');
@import url("https://cdn.jsdelivr.net/gh/wanteddev/wanted-sans@v1.0.3/packages/wanted-sans/fonts/webfonts/variable/split/WantedSansVariable.min.css");
body {
font-family: 'NanumSquareNeo', sans-serif;
font-family: 'NanumSquareNeo', 'Wanted Sans Variable', 'Wanted Sans', sans-serif;
font-weight: 700;
margin: 0;
}