Elements

In this chapter we analyze the rules by which the components generate the DOM elements.

MuuriComponent 📦

The MuuriComponent generate a div element in wich the Items are contained. You can interact with it using this prop.

Item 🛠️

The Items must always consist of at least two elements:

• The outer element (used for positioning).
• The inner element (used for animating the Item's visibility).

You can insert any markup you wish inside the inner Item element.

const Item = () => (

<div className="item">

<div className="item-content">

{/* Safe zone, enter your custom markup */}

This can be anything.

{/* Safe zone ends */}

</div>

</div>

);

You can create Items of any size, based on the CSS style of the outer element:

• The size of the Items will depend on the CSS width, height, padding and border properties.
• The distances between the Items will depend on the CSS margin property.

.muuri-item {

width: 100px;

height: 100px;

margin: 10px;

}

CSS classes 🎭

Some specific CSS classes are added to the DOM elements of the components.

• One class is added in relation of the component type.
• Others class are added in relation to the (eventual) event which is interacting with the Item.

You can define these classes to manipulate the style of the DOM elements. The CSS classes are the following.

// Type classes.

{

// The class of the element generated by the MuuriComponent.

containerClass: 'muuri',

// The class of the (outer) element generated by the Item.

itemClass: 'muuri-item'

}

// State classes.

{

// The class of the (outer) item element while it is shown.

itemVisibleClass: 'muuri-item-shown',

// The class of the (outer) item element while it is hidden.

itemHiddenClass: 'muuri-item-hidden',

// The class of the (outer) item element while it is being positioned.

itemPositioningClass: 'muuri-item-positioning',

// The class of the (outer) item element while it is being dragged.

itemDraggingClass: 'muuri-item-dragging',

// The class of the (outer) item element while it is being released.

itemReleasingClass: 'muuri-item-releasing'

}