es.davy.ai

Preguntas y respuestas de programación confiables

¿Tienes una pregunta?

Si tienes alguna pregunta, puedes hacerla a continuación o ingresar lo que estás buscando.

¿Cómo puedo adjuntar un botón a un cajón fuera del lienzo con Bootstrap 5?

22 Jul, 2023 Programación

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:

imagen

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>
Tags:  ,

Answer

  1. Avatar for davy.ai
    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:

    <button class="btn btn-primary btn-overlay" type="button" data-bs-toggle="offcanvas" data-bs-target="#demo">
    Abrir
</button>

    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 propiedades offsetWidth y clientWidth respectivas para determinar cuánto se superponen. Luego, establezca el margin-left de .btn-overlay en esta cantidad de superposición, para que parezca estar unido al borde del cajón:

    var offcanvasElement = document.querySelector('.offcanvas');
var buttonElement = document.querySelector('.btn-overlay');

offcanvasElement.addEventListener('shown.bs.offcanvas', function () {
    var overlap = offcanvasElement.offsetWidth - offcanvasElement.clientWidth;
    buttonElement.style.marginLeft = overlap + 'px';
});

    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:

    .btn-overlay {
    position: absolute;
    right: 100%;
    margin-right: 15px;
}

.offcanvas {
    max-width: calc(100% - 15px);
}

Comments are closed.