grid-resize-helper

1.0.15 • Public • Published

Description

This library allows you to drag on the configured edges of a grid layout to resize it

Live Demo: https://thiago099.github.io/grid-resize-helper-example/

Source: https://github.com/Thiago099/grid-resize-helper-example/

Limitations

You must specify the areas of your grid you want to make resizable and assign them to control a part of the grid

Usage:

   import { makeGridAreasResizable } from "grid-resize-helper"

    let gridElement = document.querySelector('.container');

    makeGridAreasResizable(gridElement, 
    /* Elements */ 
    [
        { 
            query: ".menu", // This element will be used to create the helper, it will only be as wide as the element
            helpers: [
                { 
                    position: "x+", // This is where on the element the helper will be
                    edge: 0 // This is wich edge of your grid the in the respective axis of the position
                },
            ]
        },
        {
            query: ".right",
            helpers: [
                {
                    position: "x-",
                    edge: 1
                },
            ]
        },
        {
            query: ".header",
            helpers: [
                {
                    position: "y+",
                    edge: 0
                },
            ]
        },
        {
            query: ".footer",
            helpers: [
                {
                    position: "y-",
                    edge: 1
                },
            ]
        }
    ],
    /*Config */ { // The config parameter is optinal
        //debugBackgroundColor:"rgba(255,0,0,0.3)", // Make the helpers this color instead of invisible
        thickness:"8px", // this can either be auto(the size of the gap) or a value, relative values are relative to each section of the grid
        minWidth: 30, // minium width of a section
        minHeight: 30, // minimun height of a section
        helperClass: "helper",
        helperActiveClass: "helper-active"
    })

Here is the html for the example:

  <head>
    <meta charset="UTF-8" />
    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Vite App</title>
  </head>
  <body>
    <div class="container">
      <div class="menu">
      </div>
      <div class="header">
      </div>
      <div class="main">
      </div>
      <div class="footer">
      </div>
      <div class="right">
      </div>
  </div>
  
  <style>
      body {
          margin: 0;
      }
  
      .container {
          display: grid;
          grid-template-areas:
              'header header header'
              'menu main right'
              'menu footer right';
          grid-template-columns: 1fr 3fr 1fr;
          grid-template-rows: 50px 4fr 2fr;
          gap: 10px;
          background-color: #2196F3;
          height: 100vh;
          width: 100vw;
          padding: 5px;
          box-sizing: border-box;
      }
  
      .container > div {
          background-color: rgba(255, 255, 255, 0.8);
      }
  
      .menu {
          grid-area: menu;
      }
  
      .main {
          grid-area: main;
      }
  
      .right {
          grid-area: right;
      }
  
      .footer {
          grid-area: footer;
      }
  
      .header {
          grid-area: header;
      }
  </style>

Readme

Keywords

Package Sidebar

Install

npm i grid-resize-helper

Weekly Downloads

0

Version

1.0.15

License

MIT

Unpacked Size

12.6 kB

Total Files

4

Last publish

Collaborators

  • thiago-kaique