English

한국어

English

한국어

Appearance

Creating a View ​

Creating a simple component ​

In Rune, you create components by extending the View class.

typescript
import { View, html } from 'rune-ts';

export type Color = {
  code: string;
};

export class ColorView extends View<Color> {
  override template({ code }: Color) {
    return html`
      <div style="background-color: ${code}"></div> 
    `;
  }
}

const colorView = new ColorView({ code: 'red' });
colorView.toHtml();

colorView.toHtml() returns an HTML string.

html
<div class="ColorView" style="background-color: red"></div>

Changing data ​

After changing the colorView data, you can obtain the HTML string again.

typescript
colorView.data.code = 'blue';
colorView.toHtml();
html
<div class="ColorView" style="background-color: blue"></div>

You can express the same code using method chaining.

typescript
colorView.chain((view) => (view.data.code = 'blue')).toHtml();

Creating an HTMLElement ​

When you run colorView.render();, it creates and returns an HTMLElement. It’s recommended to use the render method only in the browser.

typescript
document.body.appendChild(new ColorView({ code: 'pink' }).render());
html
<html>
  ...
  <body>
    ...
    <div class="ColorView" style="background-color: pink"></div>
  </body>
</html>

Creating nested components ​

You can implement nested components using template literals.

typescript
export type Color = {
  code: string;
  checked?: boolean;
};

export class ColorCheckboxView extends View<Color> {
  override template(color: Color) {
    return html`
      <li class="${color.checked ? 'checked' : ''}">${new ColorView(color)}</li>
    `;
  }
}

new ColorCheckboxView({ code: 'yellow', checked: true }).toHtml();
html
<li class="ColorCheckboxView checked">
  <div class="ColorView" style="background-color: green"></div>
</li>

In this way, you can create a ColorCheckboxView that contains a ColorView. Below is an example of creating a ColorCheckboxListView that holds multiple ColorCheckboxViews by passing an array.

typescript
export class ColorCheckboxListView extends View<Color[]> {
  override template(colors: Color[]) {
    return html`
      <ul>
        ${colors.map((color) => new ColorCheckboxView(color))}
      </ul>
    `;
  }
}

document.body.appendChild(
  new ColorCheckboxListView([
    { code: 'red' },
    { code: 'green', checked: true },
    { code: 'blue' },
    { code: 'yellow' },
  ]).render(),
);
html
<ul class="ColorCheckboxListView">
  <li class="ColorCheckboxView">
    <div class="ColorView" style="background-color: red"></div>
  </li>
  <li class="ColorCheckboxView checked">
    <div class="ColorView" style="background-color: green"></div>
  </li>
  ...
</ul>