Skip to content

Widgets: Container

Let's add some elements to our widget to explain how the container of the widget behaves.

We start adding a stylesheet with local scope:

src/widgets/testing-features/index.module.css

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
:local(.widget) {
  padding: 20px;
  position: relative;

  & .arrow {
    opacity: 0.5;
    position: absolute;
    color: red;
  }

  & .arrow-left {
    top: 50%;
    transform: translate(0, -100%);
    left: 0;
  }

  & .arrow-right {
    top: 50%;
    transform: translate(0, -100%);
    right: 0;
  }

  & .arrow-up {
    left: 50%;
    transform: translate(-50%, 0);
    top: 0;
  }

  & .arrow-down {
    left: 50%;
    transform: translate(-50%, 0);
    bottom: 0;
  }
}

Now we import this stylesheet in our widget and add the local class name to the widget container element this.env.$element:

src/widgets/testing-features/index.js

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
import { Widget } from "@codecoupler/cc-ui";
import template from "./index.ejs.html";
import styles from "./index.module.css";
export default class extends Widget {
  myHeader = "JS Widget Base";
  async init() {
    this.buildStructure();
    this.addStyles();
  }
  buildStructure() {
    this.env.$element.html(
      template({
        myHeader: this.myHeader,
        myTemplateArg: "No Arguments here"
      })
    );
  }
  addStyles() {
    this.env.$element.addClass(styles.widget);
  }
}

Finally we add some html elements:

src/widgets/testing-features/index.ejs.html

1
2
3
4
5
6
7
<h2><%= locals.myHeader %></h2>
<h5><%= locals.myTemplateArg %></h5>
<div class="content"><p>Hello World!</p></div>
<div class="arrow arrow-left"><i class="fas fa-chevron-circle-left"></i></div>
<div class="arrow arrow-right"><i class="fas fa-chevron-circle-right"></i></div>
<div class="arrow arrow-up"><i class="fas fa-chevron-circle-up"></i></div>
<div class="arrow arrow-down"><i class="fas fa-chevron-circle-down"></i></div>

If you run the application you will see four arrows. They point to the border of your widget container.

If you resize the application you will notice is that the container of the widget is always stretched to 100% of width and height.