@licuido-ui/ui_kanban-view v0.0.2

kanbanView

Kanbam View uploading files, moving items between multiple lists, and rearranging images and assets.

Author

• @author Henry Dyson J henry@crayond.co

Link

Story Book Link kanbanView

PlayGround

Try it have a fun codeBox

Installation

npm i @licuido-ui/ui_kanban-view

Import component

import { KanbanView } from '@licuido-ui/ui_kanban-view';

Usage

<KanbanView dragData={[]} />

Image

Sample Code

<KanbanView
    dragData={[
        {
      id: '1',
      title: 'Processing',
      bottomButton: {
        buttonLabel: 'string',
        icon: <AddNewButtonIcon />,
        onClick: () => false,
      },
      tasks: [
        {
      id: '1',
      title: 'title1',
      status: 'Progress',
      cardTitle: 'Progress Create Components',
      isActive: true,
      notifyIcon: <ActiveNotification />,
      moreIcon: <MoreIcon />,
      component: '',
      subTitles: [
        {
          label: '# design',
          bgColor: '',
          borderColor: '#D3D3D3',
          textColor: '',
        },
        {
          label: 'Design System',
          bgColor: '#DEE6F9',
          borderColor: '',
          textColor: '#2B5ED6',
        },
      ],
      images: [
        { img: '/sample.jpg', height: '', width: '' },
        { img: '/sample.jpg', height: '', width: '' },
      ],
      createdAt: 'On 17 Mar, 23',
    },
      ],
    },
    ]}
    rootStyle={{}}
    columnContainerRootStyle={{}}

    columnTitleColor={'#262626'}
    columnTitleBoxStyle={{}}
    columnTitleStyle={{}}

    rowDropShadowBgColor={''}
    rowDropShadowBorderColor={'#665CD7'}
    rowDropShadowStyles={{}}
    rowDropShadowWidth={'360px'}

    addButtonLabelColor={'#665CD7'}
    columnContainerBgColor={''}
    addButtonLabelSize={12}
    addTodoButtonRootStyle={{}}
    addButtonLabelStyle={{}}

    childItemBgColor={'#FFFF'}
    childItemComponentBgColor={'#FFFF'}
    rowChildItemRootStyle={{}}
    rowChildItemComponentRootStyle={{}}

    childItemHoverBorderColor={'#665CD7'}
    childItemHoverRootStyle={{}}
    childItemActiveBorderColor={'#665CD7'}
    childItemActiveRootStyle={{}}

    childItemComponentHoverBorderColor={'#665CD7'}
    childItemComponentHoverRootStyle={{}}
    childItemComponentActiveBorderColor={'#665CD7'}
    childItemComponentActiveRootStyle={{}}

    handleStartFun={() => {}}
    handleUpdateFun={() => {}}
    handleEndFun={() => {}}
/>

Props