Adjust Dropdown List Layout

This commit is contained in:
copecone committed 2026-03-13 01:23:27 +09:00
1 parent a1eaead457
commit cd595cb062
4 files changed
+24 -12

No files matched your search

+2 -1
View File
@@ -2,7 +2,8 @@
"$schema": "./node_modules/@angular/cli/lib/config/schema.json", "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
"version": 1, "version": 1,
"cli": { "cli": {
"packageManager": "npm" "packageManager": "npm",
"analytics": false
}, },
"newProjectRoot": "projects", "newProjectRoot": "projects",
"projects": { "projects": {
+2 -2
View File
@@ -7,8 +7,8 @@
section { section {
margin-bottom: 40px; margin-bottom: 40px;
padding: 20px; padding: 20px;
border: 1px solid #eee; border: 2px solid rgba(0, 0, 0, 0.2);
border-radius: 12px; border-radius: 8px;
} }
h1 { h1 {
+2 -4
View File
@@ -13,10 +13,8 @@ export class App {
isToggled = signal(false); isToggled = signal(false);
dropdownOptions: DropdownOption[] = [ dropdownOptions: DropdownOption[] = [
{ label: 'Option 1', value: 1 }, { label: 'English', value: "EN" },
{ label: 'Option 2', value: 2 }, { label: '한국어', value: "KR" }
{ label: 'Option 3', value: 3 },
{ label: 'Option 4', value: 4 },
]; ];
selectedDropdownValue = signal<any>(null); selectedDropdownValue = signal<any>(null);
+18 -5
View File
@@ -51,7 +51,6 @@ $dropdown_animation_duration: 0.2s;
.placeholder { .placeholder {
white-space: nowrap; white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis; text-overflow: ellipsis;
margin-right: auto; margin-right: auto;
@@ -75,18 +74,29 @@ $dropdown_animation_duration: 0.2s;
top: calc(100% + 4px); top: calc(100% + 4px);
left: 0; left: 0;
width: 100%; width: 100%;
padding: 4px 0; padding: 0;
margin: 0; margin: 0;
list-style: none; list-style: none;
background-color: $dropdown_bg; background-color: $dropdown_bg;
border: 1px solid $dropdown_border_color;
border-radius: $dropdown_border_radius; border-radius: $dropdown_border_radius;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
z-index: 1000; z-index: 1000;
max-height: 200px; max-height: 200px;
overflow-y: auto; overflow-y: auto;
animation: slideIn $dropdown_animation_duration $dropdown_animation_timing; animation: slideIn $dropdown_animation_duration $dropdown_animation_timing;
&::after {
display: inline-block;
content: "";
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;
}
@keyframes slideIn { @keyframes slideIn {
from { from {
opacity: 0; opacity: 0;
@@ -100,7 +110,10 @@ $dropdown_animation_duration: 0.2s;
} }
.dropdown-item { .dropdown-item {
padding: 8px list.nth($dropdown_padding, 2); display: flex;
align-items: center;
height: 40px;
padding: 0 16px;
transition: background-color $dropdown_animation_duration $dropdown_animation_timing; transition: background-color $dropdown_animation_duration $dropdown_animation_timing;
&:hover, &.focused { &:hover, &.focused {