Navigation Back to home

Board

A beautiful Board that can make your life easier and also looks good. You can use it to create a board, a dashboard, a kanban board, or whatever you want. It is a grid layout with drag and drop support.

Import
the javascript logo
import { Board } from "@schukai/monster/source/components/layout/board.mjs";
Source
the git logo
Package
the npm logo
Since
3.116.0
Block 1
Block 2
Block 3
Block 4

Introduction

This is a versatile web component designed to create responsive, interactive boards for visual layout and content management. More than just a simple UI element, this component acts as a central tool for building dashboards, kanban boards, and other grid-based interfaces. Whether you are working on a personal website or a large-scale application, this component improves user experience through rich interactions and flexible layout handling.

Key Features

  • Dynamic interaction: Users can rearrange elements by dragging and dropping them within the grid layout, allowing for intuitive reorganization of content.
  • Customizable appearance: Developers can style specific parts of the board through exported parts, enabling visual customization while maintaining structural integrity.
  • Accessibility: Built with accessibility support, this component integrates well with assistive technologies and offers clear keyboard navigation and screen reader compatibility.
  • Visual feedback effect: Visual cues such as element opacity and style changes during drag events enhance user feedback, making interactions feel immediate and responsive.
  • Programmatic Control: Developers can configure layout breakpoints, grid dimensions, and drag behavior using HTML attributes or runtime configuration, offering flexibility in both static and dynamic contexts.

Improving the user experience

This component goes beyond basic layout rendering by enabling rich user interaction with visual feedback and reordering capabilities. By supporting fluid drag-and-drop behavior, the component provides users with clear control over content arrangement, which is especially useful in dashboards, admin panels, and custom interfaces.

These enhancements are supported by practical design principles that improve clarity and responsiveness, contributing to a more engaging and productive user experience.

Efficiency in the development process

Integrating this component into your project is straightforward and efficient. It is fully compatible with standard HTML, JavaScript, and CSS, and does not depend on external frameworks. With built-in layout breakpoints, responsive design, and declarative configuration options, the component supports rapid development and reduces the need for custom layout logic. Its modular architecture ensures it can be easily reused across projects of all sizes, improving development speed and maintainability.

Board Simple

This is a simple example where a red div is placed in a grid. It can then be easily moved using drag and drop. The border is just for visualization.

Block 1

Javascript

import '@schukai/monster/source/components/layout/board.mjs';

HTML

<monster-board>
    <div style="border: 1px solid red;">
        Block 1
    </div>
</monster-board>

Stylesheet

/** no additional stylesheet is defined **/

Component Design

This component is built using the Shadow DOM, which allows it to encapsulate its internal structure and styling. By using a shadow root, the component's internal elements—such as the board, grid, and parking area— are isolated from the rest of the webpage. This ensures that external styles or scripts cannot accidentally modify the layout, drag-and-drop behavior, or responsiveness of the grid structure.

Shadow DOM and Accessibility

Since the component is encapsulated within a shadow root, direct access to its internal grid and layout logic is restricted. Developers cannot manipulate or style these internal elements from outside the component. This design helps ensure the consistency and integrity of the board's drag-and-drop logic and responsive behavior, avoiding potential conflicts caused by external modifications.

Customizing Through Exported Parts

While the Shadow DOM restricts direct access to the component's internal structure, customization is still possible through exported parts. Specific parts of the component are made accessible for styling by being explicitly marked for export. These exported parts can be targeted and customized using CSS, allowing you to modify the appearance of the component without compromising its encapsulation.

Available Part Attributes

  • control: This part represents the main control container of the board. It includes the interactive area where the grid and draggable items are displayed. Use this to style the visual structure and container area of the board.
  • grid: This part represents the CSS grid layout used to position child elements. It handles drag-and-drop placement and dynamic cell management. You can style this part to define spacing, grid gaps, or overall layout appearance.

Below is an example of how to use CSS part attributes to customize different parts of the board control.


monster-board::part(control) {
    background-color: #fafafa;
    border-radius: 8px;
}

monster-board::part(grid) {
    gap: 10px;
    padding: 12px;
}

Explanation of the Example

  • monster-board::part(control): Styles the container area of the board, giving it a soft background and rounded corners.
  • monster-board::part(grid): Defines spacing and padding for the grid layout, which enhances the visual spacing of draggable elements.

Accessibility

Accessibility is a key consideration in the design of this component. It supports drag-and-drop interactions via accessible handles, and it is built to integrate with assistive technologies through semantic roles and attributes. The component ensures that users with diverse abilities, including those relying on keyboard navigation and screen readers, can interact with and rearrange board items in a meaningful and consistent way.

HTML Structure

<monster-board></monster-board>

JavaScript Initialization

const element = document.createElement('monster-board');
document.body.appendChild(element);

Exported

Board

Derived from

CustomElement

Options

The Options listed in this section are defined directly within the class. This class is derived from several parent classes, including the CustomElement class. Therefore, it inherits Options from these parent classes. If you cannot find a specific Options in this list, we recommend consulting the documentation of the CustomElement.

Option
Type
Default
Description
templates
object
Template definitions
templates.main
string
undefined
Main template
dimensions
object
undefined
Dimensions of the board
dimensions.0.rows
number
undefined
Number of rows for the first breakpoint
dimensions.0.columns
number
undefined
Number of columns for the first breakpoint
dimensions.600.rows
number
undefined
Number of rows for the second breakpoint
dimensions.600.columns
number
undefined
Number of columns for the second breakpoint
dimensions.1200.rows
number
undefined
Number of rows for the third breakpoint
dimensions.1200.columns
number
undefined
Number of columns for the third breakpoint
dimensions.1800.rows
number
undefined
Number of rows for the fourth breakpoint
dimensions.1800.columns
number
undefined
Number of columns for the fourth breakpoint
fillMode
string
none
Fill mode for the board ("top", "bottom", "left", "right", "none")

  • since
  • deprecated

Properties and Attributes

The Properties and Attributes listed in this section are defined directly within the class. This class is derived from several parent classes, including the CustomElement class and ultimately from HTMLElement. Therefore, it inherits Properties and Attributes from these parent classes. If you cannot find a specific Properties and Attributes in this list, we recommend consulting the documentation of the CustomElement.

  • data-monster-options: Sets the configuration options for the collapse component when used as an HTML attribute.
  • data-monster-option-[name]: Sets the value of the configuration option [name] for the collapse component when used as an HTML attribute.

Methods

The methods listed in this section are defined directly within the class. This class is derived from several parent classes, including the CustomElement class and ultimately from HTMLElement. Therefore, it inherits methods from these parent classes. If you cannot find a specific method in this list, we recommend consulting the documentation of the CustomElement.

Static methods

[instanceSymbol]()
This method is called by the instanceof operator.
getCSSStyleSheet()
Returns
  • {CSSStyleSheet[]}
getTag()
Returns
  • {string}

Lifecycle methods

Lifecycle methods are called by the environment and are usually not intended to be called directly.

[assembleMethodSymbol]()
Returns
  • {Components.Layout.Board

Events

This component does not fire any public events. It may fire events that are inherited from its parent classes.

The current width of the area is too small to display the content correctly.