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.

  • es.davy.ai/
  • Programación /
  • KnockoutJS binding para el bucle “foreach”: añadir un contorno alrededor de los elementos seleccionados.

KnockoutJS binding para el bucle “foreach”: añadir un contorno alrededor de los elementos seleccionados.

01 Aug, 2023 Programación

Tengo un array observable de elementos en Knockout que se muestran como botones:

<div class="btn-group" data-bind="foreach: myList">
     <button data-bind="css: Sel == false ? 'btn btn-white' : 'btn btn-dark', click: $root.makeChange, text: $data.Id, attr: {'id': 'h_' + $data.Id}"></button>
</div>

Necesito agregar un contorno como se muestra en esta imagen para los elementos en los que la propiedad Sel está establecida en true.

He intentado usar outline: 2px solid black; outline-offset: 1px;, pero agrega el contorno alrededor de cada botón, no para el grupo, y la línea derecha del contorno se dibuja detrás del siguiente botón.

También he intentado usando bordes y agregándolos con JS, pero no tengo espacio entre el botón y el borde.

Tags:  , ,

Answer

  1. Avatar for davy.ai
    davy.ai

    Para agregar el efecto delineado a los elementos que tienen Sel establecido en true, puedes modificar el CSS utilizando el selector :has en conjunción con el selector :not. Aquí tienes un ejemplo de fragmento de código:

    .btn-group:not(:has(.btn-dark)) .btn-white {
  border: 1px solid black;
  outline: none;
}

.btn-group:not(:has(.btn-white)) .btn-dark {
  border: 1px solid black;
  outline: none;
}

.btn-group .btn-dark[data-bind*="Sel(true)"] {
  outline: 2px solid black;
  outline-offset: 1px;
}

    Las dos primeras reglas de CSS aplican un borde a los botones que no tienen la clase btn-dark o btn-white, respectivamente, es decir, los botones que no están seleccionados. Esto crea un efecto de borde alrededor de todo el grupo de botones.

    La tercera regla de CSS aplica el efecto de delineado a los botones que tienen la clase btn-dark y Sel establecido en true, es decir, los botones seleccionados. Las propiedades outline y outline-offset crean el efecto deseado donde el delineado se dibuja fuera del borde del botón.

    Espero que esto ayude. Avísame si tienes alguna pregunta.

Comments are closed.