Gridstack.js: Sugerencia de mejora

Creado en 2 mar. 2015 · 6Comentarios · Fuente: gridstack/gridstack.js

Solo una pequeña cosa que hice para mi propio proyecto usando este marco.

Utilizo SASS con mi aplicación y el uso de este pequeño fragmento hace que ajustar las cuadrículas sea MUCHO más fácil.

.grid-stack-item {

    $gridstack-columns: 12;

    <strong i="7">@for</strong> $i from 1 through $gridstack-columns {
        &[data-gs-width='#{$i}'] { width: (100% / $gridstack-columns) * $i; }
        &[data-gs-x='#{$i}'] { left: (100% / $gridstack-columns) * $i; }
        &.grid-stack-item[data-gs-min-width='#{$i}'] { min-width: (100% / $gridstack-columns) * $i; }
        &.grid-stack-item[data-gs-max-width='#{$i}'] { max-width: (100% / $gridstack-columns) * $i; }
    }
}

Fuente

ascendantofrain

❤1 👍1

Todos 6 comentarios

Actualicé README con su fragmento. Gracias.

troolee en 2 mar. 2015

Llega tarde a la conversación, pero es posible que también desee tener la variable de ancho, ya sea en porcentaje o en píxeles, ya que ser receptivo y fluido no siempre funciona de la mano ... Una cosa es tener un contenedor receptivo y otra es tener un widget receptivo, por lo que a veces tener dimensiones en píxeles no es una mala idea.

Entonces, si coloca esa lógica dentro de una consulta de medios, puede tener diferentes tamaños de widgets basados en píxeles / porcentajes.

$gridstack-columns: 12;
$resolution: 1440px;

<strong i="7">@media</strong> (min-width: 1440px) {
   .container {
      .grid-stack {
         .grid-stack-item {
            position: absolute !important;

            <strong i="8">@for</strong> $i from 1 through $gridstack-columns {
               &[data-gs-width='#{$i}'] { width: ($resolution / $gridstack-columns) * $i; }
               &[data-gs-x='#{$i}'] { left: ($resolution / $gridstack-columns) * $i; }
               &.grid-stack-item[data-gs-min-width='#{$i}'] { min-width: ($resolution / $gridstack-columns) * $i; }
               &.grid-stack-item[data-gs-max-width='#{$i}'] { max-width: ($resolution / $gridstack-columns) * $i; }
            }
         }
      }
   }
}

abologna-r7 en 28 abr. 2015

👍1

Aquí hay una versión menos CSS:

<strong i="6">@columns</strong>: 6;
.gs-item(@n) when (<strong i="7">@n</strong> > 0) {
  .gs-item(<strong i="8">@n</strong> - 1);

  &[data-gs-width="@{n}"] { width: (100% / @columns) * @n; }
  &[data-gs-x="@{n}"] { left: (100% / @columns) * @n; }
  &[data-gs-min-width="@{n}"] { min-width: (100% / @columns) * @n; }
  &[data-gs-max-width="@{n}"] { max-width: (100% / @columns) * @n; }
}

.grid-stack-item {
  .gs-item(@columns);
}

cspeer en 9 dic. 2015

@ascendantofrain @cspeer @troolee @radiolips ¿esto todavía funciona?
Hice columnas como 36, ejecuté sass, lo usé en el código, los anchos ahora usan% s basado en 36 columnas, pero arrastrar / soltar tiene una experiencia no deseada. No puedo arrastrar y soltar en una cuadrícula de 36 columnas, sigue moviéndose aquí y allá. ¿Necesitamos cambios en js también? No parece ...

mandys en 15 may. 2017

👍1

@mandys @ascendantofrain Creo que se debe a los estilos principales de gridstack.css. Debes anularlos:

.grid-stack > .grid-stack-item {

    $gridstack-columns: 200;

    <strong i="8">@for</strong> $i from 1 through $gridstack-columns {
        &[data-gs-width='#{$i}'] { width: (100% / $gridstack-columns) * $i; }
        &[data-gs-x='#{$i}'] { left: (100% / $gridstack-columns) * $i; }
        &.grid-stack-item[data-gs-min-width='#{$i}'] { min-width: (100% / $gridstack-columns) * $i; }
        &.grid-stack-item[data-gs-max-width='#{$i}'] { max-width: (100% / $gridstack-columns) * $i; }
    }
}

Pero todavía no pude resolver el problema de los elementos superpuestos.

mrmowji en 10 feb. 2018

Tuve que agregar min-width también para que funcione en la versión 0.3 (que utilizo para resolver el problema de superposición por cierto).

.grid-stack > .grid-stack-item {

    $gridstack-columns: 36;

    <strong i="7">@for</strong> $i from 1 through $gridstack-columns {
        &[data-gs-width='#{$i}'] { 
          width: (100% / $gridstack-columns) * $i;
          min-width: (100% / $gridstack-columns) * $i; 
        }
        &[data-gs-x='#{$i}'] { left: (100% / $gridstack-columns) * $i; }
        &.grid-stack-item[data-gs-min-width='#{$i}'] { min-width: (100% / $gridstack-columns) * $i; }
        &.grid-stack-item[data-gs-max-width='#{$i}'] { max-width: (100% / $gridstack-columns) * $i; }
    }
}