🎉 Black Friday deal! 25% off your first year of CodyHouse Pro →

Projects

Progress value is 30%

Grid Switch

A grid/list layout switcher plugin.

Copy: View demo

Dependencies

All components are based on CodyFrame.

If you're using this component, you should also include the SCSS/JS of the following components:

How to

The Grid Switch component is used to switch between two layouts (e.g., switch between grid and list gallery views). You're not limited to the card in the demo; the component works with any content type.

Pass the following data attributes to the .js-grid-switch element:

  • data-gs-item-class-1 → list of classes added to the list items if layout = 1
  • data-gs-item-class-2 → list of classes added to the list items if layout = 2
  • data-gs-content-class-1 → list of classes added to the list content (card) if layout = 1
  • data-gs-content-class-2 → list of classes added to the list content (card) if layout = 2

Add the following classes to the grid switch children:

  • js-grid-switch__controller to the controller → in can be any radio button (remember to add value=1 to the first radio button, value="2" to the second one)
  • js-grid-switch__item to the grid list items
  • js-grid-switch__content to the content (e.g., card elements)

The gap among the grid items is set using the CodyFrame's grid utility classes.

Here's a simplified version of the demo code:

<div class="grid-switch js-grid-switch" 
  data-gs-item-class-1="col-12 [email protected]" 
  data-gs-item-class-2="col-12" 
  data-gs-content-class-1="card-v10--state-1" 
  data-gs-content-class-2="card-v10--state-2">

  <!-- controller 👇 -->
  <div class="js-grid-switch__controller">
    <div>
      <input type="radio" name="radio-view-option" id="radio-grid" value="1" checked>
      <label for="radio-grid">Grid</label>
    </div>

    <div>
      <input type="radio" name="radio-view-option" id="radio-list" value="2">
      <label for="radio-list">List</label>
    </div>
  </div>

  <!-- grid 👇 -->
  <ul class="grid gap-md">
    <li class="js-grid-switch__item">
      <div class="js-grid-switch__content"></div>
    </li>

    <li class="js-grid-switch__item">
      <div class="js-grid-switch__content"></div>
    </li>

    <li class="js-grid-switch__item">
      <div class="js-grid-switch__content"></div>
    </li>
  </ul>
</div>

✅ Project duplicated

✅ Project created

There was an error while trying to export your project. Please try again or contact us