چگونه با Tailwind CSS و JavaScript یک layout switcher ایجاد کنیم

امروز ما در حال بازآفرینی یک تغییردهنده layout هستیم که با Tailwind CSS و Allpine JS اما با Vainilla JavaScript انجام دادیم.

آن را به صورت زنده ببینید و کد دریافت کنید

تازه کردن کوچکی از آنچه ضامن است

سوئیچ کننده layout قطعه ای است که به کاربر اجازه می دهد بین دو طرح بندی شبکه ای مختلف جابجا شود. معمولاً در برنامه های کاربردی وب برای نمایش محتوای مختلف در قالب شبکه ای استفاده می شود. سوئیچ‌کننده طرح‌بندی را می‌توان برای جابه‌جایی بین دو طرح‌بندی شبکه‌ای مختلف، مانند دو ستون یا چهار ستون یا هیچ‌کدام استفاده کرد. این یک راه ساده و موثر برای نمایش محتوا در قالب شبکه ای است که سازماندهی و ارائه اطلاعات را آسان می کند.

موارد استفاده کنید:

• لیست محصولات: برای نمایش لیست محصولات می توان از یک تعویض کننده طرح بندی برای جابجایی بین دو طرح بندی شبکه ای مختلف مانند دو ستون یا چهار ستون استفاده کرد.
• پست های وبلاگ: برای نمایش پست‌های وبلاگ می‌توان از تعویض‌کننده طرح‌بندی برای جابه‌جایی بین دو طرح‌بندی شبکه‌ای مختلف، مانند دو ستون یا چهار ستون، استفاده کرد.
• مقالات خبری: برای نمایش مقالات خبری می توان از یک تعویض کننده طرح بندی برای جابجایی بین دو طرح بندی شبکه ای مختلف مانند دو ستون یا چهار ستون استفاده کرد.
• گالری تصاویر: برای نمایش گالری های تصاویر، می توان از تعویض کننده طرح بندی برای جابجایی بین دو طرح بندی شبکه ای مختلف مانند دو ستون یا چهار ستون استفاده کرد.

بیا شروع کنیم

این ساختار پروژه است:
درک کد:

• : This is the button that toggles the grid layout.

• : This is the ID for the grid layout so we can grab it with JavaScript and toggle the grid layout.

  Classes are removed for brevity, but I'll keep those classes relevant to the tutorial.

  
    
  
      
      
        id="toggleButton">
        Switch to 2 Columns
      
    
    
    
  
      id="gridContainer"
      class="grid grid-cols-4 ...">
      
      
   class="...">Item 1
      
   class="...">Item 2
      
   class="...">Item 3
      
   class="...">Item 4
      
   class="...">Item 5
      
   class="...">Item 6
      
   class="...">Item 7
      
   class="...">Item 8
    
  
  

  فیلمنامه
  

  • document.addEventListener("DOMContentLoaded", () => {: این شنونده رویداد است که هنگام بارگیری صفحه اجرا می شود.
  • const toggleButton = document.getElementById("toggleButton");: این دکمه ای است که طرح شبکه را تغییر می دهد.
  • const gridContainer = document.getElementById("gridContainer");: این شناسه طرح‌بندی شبکه‌ای است تا بتوانیم آن را با جاوا اسکریپت بگیریم و طرح‌بندی شبکه‌ای را تغییر دهیم.
  • toggleButton.addEventListener("click", () => {: این شنونده رویداد است که با کلیک روی دکمه اجرا می شود.
  • const isFourColumns = gridContainer.classList.toggle("grid-cols-4");: این کدی است که طرح شبکه را تغییر می دهد.
  • gridContainer.classList.toggle("grid-cols-2", !isFourColumns);: این کدی است که طرح شبکه را تغییر می دهد.
  • toggleButton.textContent = isFourColumns ? "Switch to 2 Columns" : "Switch to 4 Columns";: این کدی است که متن دکمه را تغییر می دهد.

  document.addEventListener("DOMContentLoaded", () => {
      const toggleButton = document.getElementById("toggleButton");
      const gridContainer = document.getElementById("gridContainer");
  
      toggleButton.addEventListener("click", () => {
          const isFourColumns = gridContainer.classList.toggle("grid-cols-4");
          gridContainer.classList.toggle("grid-cols-2", !isFourColumns);
          toggleButton.textContent = isFourColumns ?
              "Switch to 2 Columns" :
              "Switch to 4 Columns";
      });
  });
  

  نتیجه
  

  این یک تغییر چیدمان ساده است که می تواند برای هر نوع محتوایی مانند فهرست محصولات، پست های وبلاگ، مقالات خبری یا گالری تصاویر استفاده شود.

  امیدوارم از این آموزش لذت برده باشید و روز خوبی داشته باشید!