@licuido-ui/ui_draggable-layout NPM

DraggableLayout

DraggableLayout - DraggableLayout component, You Can drag and move the layout Mostly you can customize the Layout and using this to display the layout import '@licuido-ui/ui_draggable-layout/dist/index.css'

Author

@author Arunachalam R arunachalam@crayond.co

Link

Story Book Link Calender

PlayGround

Try it have a fun codeBox

Installation

npm i @licuido-ui/ui_draggable-layout

Import component

import { DraggableLayout } from '@licuido-ui/ui_draggable-layout';

Usage

<DraggableLayout
     layout={  {
        title: 'component 1',
        ChildrenComponent: 'children'
        RightSideAction: <Move width={'14px'} />,
        poisitionX: 1,
        positionY:2,
        width:2,
        height:2,
      },
      {
        title: 'component 2',
        ChildrenComponent: 'children'
        RightSideAction: <Move width={'14px'} />,
        poisitionX: 1,
        positionY:2,
        width:2,
        height:2,
      },
      {
        title: 'component 3',
        ChildrenComponent: 'children'
        RightSideAction: <Move width={'14px'} />,
        poisitionX: 1,
        positionY:2,
        width:2,
        height:2,
      },
      {
        title: 'component 4',
        ChildrenComponent: 'children'
        RightSideAction: <Move width={'14px'} />,
        poisitionX: 1,
        positionY:2,
        width:2,
        height:2,
      },
      {
        title: 'component 5',
        ChildrenComponent: 'children'
        RightSideAction: <Move width={'14px'} />,
        poisitionX: 1,
        positionY:2,
        width:2,
        height:2,
      },}
     onLayoutChange={onLayoutChange} 
    breakPoints={ lg: 1200, md: 996, sm: 768, xs: 480,xxs: 0 }

    />

Image

alt text

Samplecode

<DraggableLayout
     layout={ [
       {
        title: 'component 1',
        ChildrenComponent: 'children'
        RightSideAction: <Move width={'14px'} />,
        poisitionX: 1,
        positionY:2,
        width:2,
        height:2,
      },
      {
        title: 'component 2',
        ChildrenComponent: 'children'
        RightSideAction: <Move width={'14px'} />,
        poisitionX: 1,
        positionY:2,
        width:2,
        height:2,
      },
      {
        title: 'component 3',
        ChildrenComponent: 'children'
        RightSideAction: <Move width={'14px'} />,
        poisitionX: 1,
        positionY:2,
        width:2,
        height:2,
      },
      {
        title: 'component 4',
        ChildrenComponent: 'children'
        RightSideAction: <Move width={'14px'} />,
        poisitionX: 1,
        positionY:2,
        width:2,
        height:2,
      },
      {
        title: 'component 5',
        ChildrenComponent: 'children'
        RightSideAction: <Move width={'14px'} />,
        poisitionX: 1,
        positionY:2,
        width:2,
        height:2,
      },
    ]}
     onLayoutChange={onLayoutChange} 
    styleProps= {
    layoutStyle: {
      border: '0px',
      borderRadius: '8px',
      backgroundColor: '#fff',
    },
    totalLayoutStyle: {
      backgroundColor: '#eee',
      cursor: 'grab',
    },
  }
   cols = { lg: 4, md: 4, sm: 4, xs: 1, xxs: 1 }
   width = {100}
   rowHeight = {150}
   localstoragekey={false}
    breakPoints={ lg: 1200, md: 996, sm: 768, xs: 480, xxs:0 }
        autoSize={true}

     />

Props

Name	Description	Default	Control
className	string	-	Set object
sx	sx property	-	sx : {}
compactTypeDefine	we can define vertical or horizontal	-	horizontal
cols	Cols is define as lg ,md,sm,xs	-	cols : {lg : 4md : 4sm : 4xs : 1xxs : 1}
width	width of the Total layout	-
autoSize	autosize	-	FalseTrue
rowHeight	rowHeight of the Total layout	-
headingStyle	headingStyle	-	headingStyle : {}
layoutBddId	layout BDD Id for BDD Test	-
layoutBddTestId	layout BDD Test Id	-
totalHeadingStyle	totalHeadingStyle	-	totalHeadingStyle : {}
totalLayoutStyle		-	totalLayoutStyle : {}
ChildrenStyle	ChildrenStyle	-	ChildrenStyle : {}
styleProps	you can customize your css into style	-	styleProps : {layoutStyle : {...} 3 keystotalLayoutStyle : {...} 2 keys}
localstorageKey	if u want to save in local u can use Localstorage key	-	FalseTrue
layout	layout has title, Children, rightsideicon, x, y width,height	-	layout : [0 : {...} 7 keys1 : {...} 7 keys2 : {...} 7 keys3 : {...} 7 keys4 : {...} 7 keys]
breakPoints	breakpoints for Layout	-	breakPoints : {lg : 1200md : 996sm : 768xs : 480xxs : 0}

@emotion/react @emotion/styled @mui/material react react-dom react-grid-layout

@licuido-ui/react

3.0.4

8 months ago