¿Cómo puedo adjuntar un botón a un cajón fuera del lienzo con Bootstrap 5?
Estoy probando la función off-canvas de Bootstrap 5. Estoy tratando de colocar un botón en el lateral del cajón deslizante fuera del canvas. Por lo tanto, cuando el cajón está fuera del canvas, el botón es visible. Cuando se hace clic en el botón, el cajón se desliza, pero en lugar de superponer el contenido del cajón sobre el botón, el botón actúa como si estuviera unido al cajón deslizante y se mueve con él. Algo así como esto:
No estoy seguro si esto es posible. En caso afirmativo, ¿cómo puedo hacerlo?
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<div class="offcanvas offcanvas-start" id="demo">
<div class="offcanvas-header">
<h1 class="offcanvas-title">Heading</h1>
<button type="button" class="btn-close" data-bs-dismiss="offcanvas"></button>
</div>
<div class="offcanvas-body">
<p>Some text lorem ipsum.</p>
</div>
</div>
<div class="container-fluid mt-3">
<button class="btn btn-primary" type="button" data-bs-toggle="offcanvas" data-bs-target="#demo">
Abrir
</button>
</div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>
davy.ai
Para lograr este efecto, deberá agregar una clase personalizada a su botón y utilizar JavaScript para modificar su posición cuando se deslice el cajón “off-canvas”. Primero, agregue la clase
btn-overlay
a su botón:Luego, escriba una función de JavaScript que escuche el evento
shown.bs.offcanvas
, que se activa cuando el cajón “off-canvas” termina de deslizarse. En esta función, obtenga el elemento.offcanvas
y el elemento.btn-overlay
, y utilice las propiedadesoffsetWidth
yclientWidth
respectivas para determinar cuánto se superponen. Luego, establezca elmargin-left
de.btn-overlay
en esta cantidad de superposición, para que parezca estar unido al borde del cajón:Tenga en cuenta que también deberá agregar algo de CSS para posicionar el botón
.btn-overlay
en relación con su elemento padre y asegurarse de que no se desborde por el borde de la pantalla: