Skip to content

Widget: Container

What are we learning here?

  • A widget will always resize to the dimensions of its container

To explain the details of the widget component we will switch back to our first application:

src/root.js

1
2
3
4
5
6
7
import { Component } from "@codecoupler/cc-ui";
import TestApp from "./demo/apps/component-basics";
export default class extends Component {
  async boot() {
    await this.stage.load(TestApp);
  }
}

Let's add some elements to our widget to explain how a component that extends the class Widget behaves in general.

We will add some CSS styles and HTML elements:

src/demo/apps/component-basics/content.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
:local(.widget) {
  padding: 20px;
  & h2 {
    text-decoration: underline dotted gray;
  }
  & .arrow {
    opacity: 0.5;
    position: absolute;
    color: red;
  }
  & .left {
    top: 50%;
    transform: translate(0, -100%);
    left: 0;
  }
  & .right {
    top: 50%;
    transform: translate(0, -100%);
    right: 0;
  }
  & .up {
    left: 50%;
    transform: translate(-50%, 0);
    top: 0;
  }
  & .down {
    left: 50%;
    transform: translate(-50%, 0);
    bottom: 0;
  }
}

src/demo/apps/component-basics/content.ejs.html

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
<div>
  <h2><%= locals.myHeader %></h2>
  <div class="mt-2 card">
    <div class="card-header">Loading Components</div>
    <div class="card-body"><div data-role="stage"></div></div>
  </div>
  <div class="mt-2 card">
    <div class="card-header">Pass Options</div>
    <div class="card-body">
      Option 1: <span data-role="option1"></span><br />
      Option 2: <span data-role="option2"></span>
    </div>
  </div>
  <div class="arrow left"><i class="fas fa-chevron-circle-left"></i></div>
  <div class="arrow right"><i class="fas fa-chevron-circle-right"></i></div>
  <div class="arrow up"><i class="fas fa-chevron-circle-up"></i></div>
  <div class="arrow down"><i class="fas fa-chevron-circle-down"></i></div>
</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.