Gridstack.js: Suggestion d'amélioration

Créé le 2 mars 2015 · 6Commentaires · Source: gridstack/gridstack.js

Juste un petit quelque chose que j'ai fait pour mon propre projet en utilisant ce framework.

J'utilise SASS avec mon application et l'utilisation de ce petit extrait facilite BEAUCOUP le réglage des grilles.

.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; }
    }
}

Source

ascendantofrain

❤1 👍1

Tous les 6 commentaires

J'ai mis à jour README avec votre extrait. Merci.

troolee le 2 mars 2015

Tard dans la conversation, mais vous voudrez peut-être aussi avoir la variable de largeur, en pourcentage ou en pixels, car être réactif et fluide ne fonctionne pas toujours main dans la main... Une chose est d'avoir un conteneur réactif, et une autre est d'avoir un widget réactif, donc parfois avoir des dimensions en pixels n'est pas une mauvaise idée.

Donc, si vous mettez cette logique dans une requête média, vous pouvez avoir différentes tailles de widgets basées sur des pixels/pourcentages.

$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 le 28 avr. 2015

👍1

Voici une version moins 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 le 9 déc. 2015

@ascendantofrain @cspeer @troolee @radiolips ça marche toujours ?
J'ai créé des colonnes comme 36, j'ai couru sass, je l'ai utilisé dans le code, les largeurs utilisent maintenant %s sur la base de 36 colonnes, mais le glisser/déposer a une expérience indésirable. Je ne peux pas glisser-déposer dans une grille de 36 colonnes, cela continue de bouger ici et là. Avons-nous également besoin de modifications js ? Ne ressemble pas à...

mandys le 15 mai 2017

👍1

@mandys @ascendantofrain Je pense que c'est à cause des styles de base de gridstack.css. Vous devez les remplacer :

.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; }
    }
}

Mais je n'ai pas encore pu résoudre le problème des éléments qui se chevauchent.

mrmowji le 10 févr. 2018

J'ai également dû ajouter le min-width pour que cela fonctionne sur la version 0.3 (que j'utilise pour résoudre le problème de chevauchement d'ailleurs.)

.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; }
    }
}