Gridstack.js: Saran Peningkatan

Dibuat pada 2 Mar 2015 · 6Komentar · Sumber: gridstack/gridstack.js

Hanya sedikit sesuatu yang saya buat untuk proyek saya sendiri menggunakan kerangka kerja ini.

Saya menggunakan SASS dengan aplikasi saya dan menggunakan potongan kecil ini membuat penyesuaian grid JAUH lebih mudah.

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

Sumber

ascendantofrain

❤1 👍1

Semua 6 komentar

Saya telah memperbarui README dengan cuplikan Anda. Terima kasih.

troolee pada 2 Mar 2015

Terlambat dalam percakapan tetapi Anda mungkin juga ingin memiliki variabel lebar, baik dalam persentase atau piksel, karena responsif dan lancar tidak selalu bekerja dengan baik... Satu hal adalah memiliki wadah yang responsif, dan yang lainnya adalah memiliki widget responsif jadi terkadang memiliki dimensi piksel bukanlah ide yang buruk.

Jadi, jika Anda memasukkan logika itu ke dalam kueri media, Anda dapat memiliki ukuran widget berbasis piksel/persentase yang berbeda.

$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 pada 28 Apr 2015

👍1

Ini adalah versi css yang lebih sedikit:

<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 pada 9 Des 2015

@ascendantofrain @cspeer @troolee @radiolips apakah ini masih berfungsi?
saya membuat kolom sebagai 36, menjalankan sass, menggunakannya dalam kode, lebar sekarang menggunakan %s berdasarkan 36 kolom, tetapi seret/lepas memiliki pengalaman yang tidak diinginkan. Saya tidak dapat menarik dan melepaskan dalam kotak 36 kolom, itu terus bergerak di sana-sini. Apakah kita membutuhkan perubahan js juga ? Tidak terlihat seperti...

mandys pada 15 Mei 2017

👍1

@mandys @ascendantofrain Saya pikir itu karena gaya gridstack.css inti. Anda harus menimpanya:

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

Tapi saya belum bisa menyelesaikan masalah item yang tumpang tindih.

mrmowji pada 10 Feb 2018

Saya harus menambahkan min-width juga agar berfungsi pada versi 0.3 (yang saya gunakan untuk memecahkan masalah yang tumpang tindih.)

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