Details

A simple but cool detail component. This is based on the collapse component and extends it with a button.
You can also easily build an accordion from the component.

Import

import { Details } from "@schukai/monster/source/components/layout/details.mjs";

Source

View source code

Package

@schukai/monster

Since

3.74.0

Hi, I am a detail.

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.

Details Simple

This example shows how a simple example works with the detail control. The detail control is a simple way to show and hide content.

Yeah, you opened me!

Javascript

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

HTML

<monster-details>
    Yeah, you opened me!
</monster-details>

Stylesheet

/** no additional stylesheet is defined **/

Details With Label

In this example, we have chosen a separate button labeling. We have done this with the data-monster-option-labels-button="click me" attribute.

Yeah, you opened me!

Javascript

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

HTML

<monster-details data-monster-option-labels-button="click me">
    Yeah, you opened me!
</monster-details>

Stylesheet

/** no additional stylesheet is defined **/

Details As Accordion

In this example, we will demonstrate how to turn a detail control into a drop-down menu. To achieve this, you simply have to write two or more controls directly below each other.

Yeah, you opened me!

No, you opened me.

Or did you open me?

Javascript

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

HTML

<monster-details data-monster-option-labels-button="click me">
    Yeah, you opened me!
</monster-details>
<monster-details data-monster-option-labels-button="click me">
    No, you opened me.
</monster-details>
<monster-details data-monster-option-labels-button="click me">
    Or did you open me?
</monster-details>

Stylesheet

/** no additional stylesheet is defined **/

Details With Your Own Design

In this example, we will demonstrate how to turn a detail control into a drop-down menu. To achieve this, you simply have to write two or more controls directly below each other.

Yeah, you opened me!

Javascript

import {registerCustomElement} from "@schukai/monster/source/dom/customelement.mjs";
import {Details} from "@schukai/monster/source/components/layout/details.mjs";

class MyOwnDetails extends Details {
    /**
     * @return {string}
     */
    static getTag() {
        return "my-own-details";
    }

    /**
     * @returns {object}
     */
    get defaults() {
        return Object.assign({}, super.defaults, {
            templates: {
                // we define the main template here
                main:`
<style>
button {
    border: 0;
    border-bottom: 1px solid var(--monster-bg-color-primary-4);
    display: flex;
    justify-content: space-between;
}
</style>

        <div data-monster-role="control" class="overflow-hidden">
            <div data-monster-role="summary">
                <button data-monster-role="button">
                        <div data-monster-replace="path:labels.button | default:the default label"></div>
                        <div><svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" fill="currentColor" viewBox="0 0 16 16">
  <path d="M8 4a.5.5 0 0 1 .5.5v3h3a.5.5 0 0 1 0 1h-3v3a.5.5 0 0 1-1 0v-3h-3a.5.5 0 0 1 0-1h3v-3A.5.5 0 0 1 8 4"/>
</svg></div>
                </button>
            </div>
            <div data-monster-role="detail">
                <div data-monster-attributes="class path:classes.container"
                     data-monster-role="container">
                    <slot></slot>
                </div>
            </div>
        </div>`,
            }
        });
    }

}

// here, we register the custom element
registerCustomElement(MyOwnDetails);

HTML

<my-own-details data-monster-option-labels-button="click me">
    Yeah, you opened me!
</my-own-details>

Stylesheet

/** no additional stylesheet is defined **/

Component Design

The Monster Details component builds on the Collapse component by adding a button to toggle visibility of detailed content. Encapsulated within the Shadow DOM, the component ensures a consistent and isolated layout and behavior. This design allows it to function seamlessly as a standalone toggle or as part of an accordion structure.

Shadow DOM and Accessibility

The Shadow DOM ensures that the internal structure of the Monster Details component remains protected from external styles and scripts. It includes accessibility features such as ARIA roles and keyboard interaction support, making it usable for all users, including those relying on assistive technologies.

Customizing Through Exported Parts

The Monster Details component exposes specific exported parts for targeted styling using the CSS part selector. These parts enable customization of the button, container, and decorative elements.

Available Part Attributes

control: Represents the entire details container, including the button and collapsible content.
summary: Refers to the button container area, which triggers the toggle.
button: Targets the button element used to toggle visibility.
container: Refers to the collapsible content area.
deco-line: Styles the decorative line used for visual separation.
slot: Represents the slot where custom content can be added.

Below is an example of how to customize the Monster Details button and content area using the CSS part attributes.


monster-details::part(control) {
    border: 1px solid #ccc;
    border-radius: 6px;
    overflow: hidden;
}

monster-details::part(button) {
    background-color: #007bff;
    color: #fff;
    border: none;
    padding: 10px 16px;
    cursor: pointer;
    font-size: 1rem;
    transition: background-color 0.3s ease;
}

monster-details::part(container) {
    padding: 16px;
    background-color: #f8f9fa;
    color: #333;
    font-size: 1rem;
}

monster-details::part(deco-line) {
    height: 2px;
    background-color: #007bff;
    margin-top: 8px;
}

Explanation of the Example

monster-details::part(control): Styles the main container with a light border and rounded corners.
monster-details::part(button): Customizes the toggle button with padding, background color, and a hover effect.
monster-details::part(container): Styles the collapsible content area with padding and background color.
monster-details::part(deco-line): Adds a decorative line with a blue background color.

Accessibility

The Monster Details component is designed with accessibility in mind:

Keyboard Navigation: The button can be toggled using the Space or Enter keys.
ARIA Roles: Proper ARIA roles and attributes indicate the open or closed state of the content.
Focus Management: Focus remains on the button during toggle, ensuring seamless keyboard navigation.

These features ensure an inclusive experience for all users, especially those relying on assistive technologies.

HTML Structure

<monster-details></monster-details>

JavaScript Initialization

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

Exported

Details

Derived from

Collapse

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 Collapse.

Option

Type

Default

Description

templates

object

Template definitions

templates.main

string

undefined

Main template

button

object

undefined

Button configuration

button.label

string

undefined

Button label

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 Collapse.

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 Collapse.

Constructor

constructor()

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}

connectedCallback()

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.