0
699
VistasNgbDropdown: eliminar la flecha desplegable
Estoy usando el componente NgbDropdown en mi aplicación Angular 2. Está funcionando bien, sin embargo, quiero eliminar la flecha que se muestra en el lado derecho del botón.
<div class="d-inline-block" ngbDropdown #myDrop="ngbDropdown"> <button class="btn btn-outline-primary" id="dropdownMenu1" ngbDropdownToggle>Toggle dropdown</button> <div class="dropdown-menu" aria-labelledby="dropdownMenu1"> <button class="dropdown-item">Action - 1</button> <button class="dropdown-item">Another Action</button> <button class="dropdown-item">Something else is here</button> </div> </div>
3 Respuestas
Responde la pregunta0
Solución
Simplemente agregue el siguiente estilo CSS para anular el estilo predeterminado del .dropdown-toggle::after :
.dropdown-toggle::after { display:none; }¿Por qué?
De manera predeterminada, bootstrap agrega la flecha al componente desplegable a través del pseudo-elemento ::after .
Hacer esto lo elimina.
Aquí hay una DEMO EN VIVO que lo demuestra.
¿Cómo lo resuelves?
Con las herramientas de desarrollo de Chrome, puede inspeccionar el elemento:
Podemos ver en lo anterior que hay un conjunto de estilos para un pseudo-elemento ::después en la clase .dropdown-toggle . ¡Vamos a cambiar las propiedades del elemento! Para este propósito, estamos cambiando la propiedad de display a none :
¡¡El pseudo-elemento ya no está!!:
0
agregue el siguiente estilo para anular el predeterminado
.dropdown-toggle::after{ content:initial }0
En Bootstrap 4, puede eliminar la flecha desplegable que se llama intercalación declarando una variable SASS $enable-caret y configurándola en false :
$enable-caret: false; Esto anula el valor predeterminado de true establecido en _variable.scss de Bootstrap:
// Options // // Quickly modify global styling by enabling or disabling optional features. $enable-caret: true !default;Pero tenga en cuenta que elimina por completo los estilos CSS correspondientes. Por lo tanto, es el mejor enfoque si no necesita símbolos de intercalación globalmente y desea disminuir su carga útil de CSS.