Данная библиотека является идеей, и носит демонстрационный характер.

class Text

import { Text } from "bakugan";
Класс для динамического контента
Создание
new Text(name: { name: string }, props: IHashMapAny);
new Text(name: string, props: IHashMapAny);
new Text(props: IHashMapAny);
Создает экземпляр класса Text
подробней
Параметры:
  • name: string | { name: string } - задает имя компоненту. Если имя не указано, то оно будет присвоено автоматически
  • props: IHashMapAny - параметры. Принимает только один параметр html
import { Component, Text, Template, template } from "bakugan";

@template({
    html: `
        <div>
            <txt ref="myTxt" html="'Hello'"></txt>
        </div>
    `,
})
class App extends Component { }

const app: App = new App();
app.bindTo(document.body);

const hello: Text = app.get("myTxt");

const world: Text = new Text({ name: "newText" }, {
    html: `<span style="color: red;"> World</span>`,
});

hello.insertAfter(world);

console.log(hello);
console.log(world);
смотреть пример: web | github
Методы
html(value: string): null
Изменяет содержимое текста
подробней
Параметры:
  • value: string - новый html контент
import { Component, Text, template } from "bakugan";

@template({
    html: `
        <div>
            <txt ref="myTxt" html="'Hello'"></txt>
        </div>
    `,
})
class App extends Component { }

const app: App = new App();
app.bindTo(document.body);

const text: Text = app.get("myTxt");
text.html("Hello World");
смотреть пример: web | github
html(): string
Получает содержимое текста
подробней
import { Component, Text, template } from "bakugan";

@template({
    html: `
        <div>
            <txt ref="myTxt" html="'Hello World'"></txt>
        </div>
    `,
})
class App extends Component { }

const app: App = new App();
app.bindTo(document.body);

const text: Text = app.get("myTxt");
console.log(text.html()); // Hello World
смотреть пример: web | github
Общие методы
name(newName: string): null
Задает новое имя компоненту
подробней
Параметры:
  • name: string - новое имя компонента
import { Component, Native, Text, template } from "bakugan";

@template({
    html: `
        <div>
            <div ref="myDiv">Hello</div>
            <txt ref="myTxt" html="'World'"></txt>
        </div>
    `,
})
class App extends Component { }

const app: App = new App();
app.bindTo(document.body);

const div: Native = app.get("myDiv");
const txt: Text = app.get("myTxt");

div.name("newNameDiv");
txt.name("newNameTxt");

console.log(app.get("myDiv")); // null
console.log(app.get("myTxt")); // null
console.log(app.get("newNameDiv")); // Native
console.log(app.get("newNameTxt")); // Text
смотреть пример: web | github
name(): string
Получает имя компонента
подробней
import { Component, Native, Text, template } from "bakugan";

@template({
    html: `
        <div>
            <div ref="myDiv">Hello</div>
            <txt ref="myTxt" html="'World'"></txt>
        </div>
    `,
})
class App extends Component { }

const app: App = new App();
app.bindTo(document.body);

const div: Native = app.get("myDiv");
const txt: Text = app.get("myTxt");

console.log(div.name()); // myDiv
console.log(txt.name()); // myTxt
смотреть пример: web | github
parent(): Component
Возвращает родительский компонент
подробней
import { Component, Native, Text, template } from "bakugan";

@template({
    html: `
        <div>
            <div ref="myDiv">Hello</div>
            <txt ref="myTxt" html="'World'"></txt>
        </div>
    `,
})
class App extends Component { }

const app: App = new App();
app.bindTo(document.body);

const div: Native = app.get("myDiv");
const txt: Text = app.get("myTxt");

console.log(div.parent()); // app
console.log(txt.parent()); // app
console.log(app.parent()); // null
смотреть пример: web | github
insertBefore(...components: BaseComponent[]): void
Добавляет компоненты перед текущим компонентом
подробней
Параметры:
import { Component, Native, Text, Template, template } from "bakugan";

@template({
    html: `
        <div>
            <div ref="myDiv">text</div>
        </div>
    `,
})
class App extends Component { }

const app: App = new App();
app.bindTo(document.body);

const text: Text = new Text({ html: `insert before` });
const span: Native = new Native({
    tagName: "span",
    template: Template.make({
        html: `insert after`,
    }),
});

const div: Native = app.get("myDiv");

div.insertBefore(text);
div.insertAfter(span);
смотреть пример: web | github
insertAfter(...components: BaseComponent[]): void
Добавляет компоненты после текущего компонента
подробней
Параметры:
import { Component, Native, Text, Template, template } from "bakugan";

@template({
    html: `
        <div>
            <div ref="myDiv">text</div>
        </div>
    `,
})
class App extends Component { }

const app: App = new App();
app.bindTo(document.body);

const text: Text = new Text({ html: `insert before` });
const span: Native = new Native({
    tagName: "span",
    template: Template.make({
        html: `insert after`,
    }),
});

const div: Native = app.get("myDiv");

div.insertBefore(text);
div.insertAfter(span);
смотреть пример: web | github
remove(): void
Удаляет компонент
подробней
import { Component, Native, Text, template } from "bakugan";

@template({
    html: `
        <div>
            <div ref="myDiv">Hello</div>
            <txt ref="myTxt" html="'World'"></txt>
        </div>
    `,
})
class App extends Component { }

const app: App = new App();
app.bindTo(document.body);

const txt: Text = app.get("myTxt");
txt.remove();
смотреть пример: web | github