Skip to content

CodeCoupler Costa Components Box

The Box component is the simplest of all and forms the basis for many others. It simply generates an HTML element and registers it as a box component.

By default, this element is a div, but this can be changed using the tag option. The component also allows you to set the HTML element's attributes as required.

The style and class attributes can be set separately and respond to changes. Classes and styles can be modified or added, resulting in immediate updates.

To extend from Box use the finalize method to extend the inner structure of the box element:

1
2
3
4
5
6
7
import { Box } from "@codecoupler/costa-core";
export default class extends Box {
  async finalize() {
    await super.finalize();
    /* Do whatever you need with this.env.box */
  }
}

Options

tag: String
attributes: Object

Specify the tag and the attributes of the box element.

style: String | Object | Function | Array<String|Object|Function> | null
class: String | Function | Array<String|Function> | null

Set classes and styles . These options use the functions from the @codecoupler/dom-set-class and @codecoupler/dom-set-style packages to set the styles and classes.