Skip to content
TIP SHARE DEVELOP
TIP - TEST
TIP - HTML/CSS ❤️✅
TIP - ANGULAR { Structure + Custom }❤️✅
TIP - THE COMPONENT DEV KIT ( CDK )❤️✅
TIP - JAVASCRIPT ❤️✅
TIP - TYPESCRIPT❤️✅
TIP - RXJS ❤️✅
TIP - CODE ❤️✅
TIP - CODE :: SYNTAX ❤️✅
TIP - REACTJS ❤️✅
TIP - REACTJS: SYNTAX ❤️✅
TIP - PACKAGE::ANGULAR
TIP -PACKAGE::REACTJS ❤️✅
NEXTJS
Deploy
Concepts - Server❤️✅
UNIT TEST ❤️
Docker
More
Share
Explore

icon picker
TIP - PACKAGE::ANGULAR

**Bootstrap
⁠
*Custom dropdown
<div class="list-item-option">
<div ngbDropdown #myDrop="ngbDropdown" autoClose="true">
<button class="btn btn-gray btn-toggle rounded-circle option" ngbDropdownToggle>
<span class="kf-option"></span>
</button>
<div class="icon-expand"></div>
<div ngbDropdownMenu>
<button ngbDropdownItem>expand</button>
<button ngbDropdownItem>delete</button>
</div>
</div>
</div>

&-option {
.dropdown {
&.show {
& .icon-expand {
display: block;
}
}

.dropdown-toggle {
&::after {
display: none;
}
}

.dropdown-menu {
top: 0.5rem !important;
background-color: #2D303A;
text-align: center;

& .dropdown-item {
color: white;
background-color: transparent;
outline: none;

&:hover {
background-color: #4f5159;
}
}
}
}
.icon-expand {
display: none;
position: absolute;
top: 3rem;
right: 0.2rem;
height: 1rem;
width: 1rem;
transform: translateX(-50%) rotate(45deg);
background-color: #2D303A;
}
}

Want to print your doc?
This is not the way.
Try clicking the ⋯ next to your doc name or using a keyboard shortcut (
CtrlP
) instead.