WidthToggle

The WidthToggle component allows users to dynamically change the width of a panel by clicking a button.
This feature improves readability and space utilization by allowing the panel width to be adjusted
according to user preferences.

Import

import { WidthToggle } from "@schukai/monster/source/components/layout/width-toggle.mjs";

Source

View source code

Package

@schukai/monster

Since

3.57.0

Hi, you can switch off the
width by clicking on the small
arrow in the top right corner.

Introduction

This is a versatile web component. More than just a simple UI element, this component serves as a key element for enhancing interactivity and engagement within various web applications. Whether you are developing a basic website or a complex enterprise-level application, this component is designed to improve user interaction and satisfaction.

Key Features

Dynamic interaction: Users can interact with content dynamically, making the web experience more intuitive and user-centric.
Customizable appearance: Customize the appearance of the component to match the design of your brand or application, ensuring visual consistency.
Accessibility: Designed with accessibility in mind to ensure that all users have a seamless experience, regardless of their browsing environment.
Visual feedback effect: Provides subtle touch feedback to enhance user interaction, making actions more responsive and engaging.
Programmatic Control: Offers methods such as trigger, focus, and deactivate, allowing developers to control the component's behavior programmatically and offering greater flexibility.

Improving the user experience

This component goes beyond its traditional functionality to offer an enhanced and interactive user experience. The combination of visual feedback effects and dynamic interaction with content is not only visually appealing, but also provides clear and responsive feedback to user actions, making the web environment more intuitive and user-friendly.

These improvements are supported by user studies that demonstrate a positive impact on user engagement and satisfaction.

Efficiency in the development process

Integrating this component into your development process is straightforward. Its compatibility with standard web technologies and ease of customization ensure seamless integration with your existing tools and libraries. Whether you're working on a small project or a large-scale application, the modular design of this component guarantees easy integration, streamlining your development process and enhancing productivity.

Toggle Width

Javascript

import "@schukai/monster/source/components/layout/popper.mjs";

HTML

Stylesheet

/** no additional stylesheet is defined **/

Component Design

The Monster WidthToggle component allows dynamic width adjustments of a container or panel. By toggling between predefined states, such as small and wide, users can optimize content visibility and layout space. The component is built using the Shadow DOM for encapsulation, ensuring consistent behavior and styling without external interference.

Shadow DOM and Accessibility

The component uses the Shadow DOM to isolate its internal structure and styling. This approach prevents conflicts with external styles or scripts and ensures that the functionality remains reliable.

Accessibility is ensured with proper keyboard and focus management. The toggle button is interactive and compatible with screen readers for an inclusive user experience.

Customizing Through Exported Parts

The Monster WidthToggle exposes specific exported parts that can be styled using CSS. This allows developers to customize the appearance of the toggle, container, and the content area while preserving the component’s core functionality.

Available Part Attributes

control: Represents the main container for the component.
container: The inner container where width changes are applied.
toggle: The button used to toggle the width between predefined states.
inside: Represents the area where slotted content is displayed.

Below is an example of how to customize the component’s parts using CSS:


monster-width-toggle::part(container) {
    border: 1px solid #ddd;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
}

monster-width-toggle::part(toggle) {
    position: absolute;
    top: 10px;
    right: 10px;
    background-color: #007bff;
    color: white;
    padding: 8px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

monster-width-toggle::part(inside) {
    padding: 16px;
    background-color: #f9f9f9;
    transition: width 0.3s ease;
}

Explanation of the Example

container: Styles the outer container with rounded corners and a subtle box shadow.
toggle: Creates a styled toggle button with padding, a background color, and hover effects.
inside: Adds padding and smooth width transitions to the content area.

Accessibility

Accessibility is ensured through:

Keyboard and focus management for the toggle button.
Compatibility with screen readers.

The toggle button provides visual and interactive feedback to ensure a smooth and inclusive user experience.

HTML Structure

<monster-width-toggle></monster-width-toggle>

JavaScript Initialization

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

Exported

WidthToggle, MODE_SMALL, MODE_WIDE

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

width

string

Dimension

width.initial

string

undefined

Initial dimension of the start panel

width.small

string

40%

Minimum dimension of the start panel

width.wide

string

95%

Maximum dimension of the start panel

default

string

undefined

Default dimension of the start panel

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.

Structural methods

setWidth(mode)

Parameters

mode {string}: mode

Returns

{WidthToggle}

Throws

{Error} no shadow-root is defined

Static methods

[instanceSymbol]()

Returns

{symbol}

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

{void}

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.