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

class Native

import { Native } from "bakugan";
Класс предоставляющий обертку для Node элемента.
Создание
new Native(name: { name: string }, props: IHashMapAny);
new Native(name: string, props: IHashMapAny);
new Native(props: IHashMapAny);
Создает экземпляр класса Native
подробней
Параметры:
  • name: string | { name: string } - задает имя компоненту. Если имя не указано, то оно будет присвоено автоматически
  • props: IHashMapAny - свойства. Может принимать следующие свойства:
    • tagName: string - имя тега (по умолчанию div)
    • attr: IHashMapAny - список атрибутов
    • cl: IHashMapAny - список классов
    • style: IHashMapAny - список стилей
    • template: Template - шаблон
import { Component, Native, Template, template } from "bakugan";

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

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

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

const span: Native = new Native({ name: "mySpan" }, {
    tagName: "span",
    attr: { "data-attr": "anything" },
    cl: { "my-class": true, "hide": false },
    style: { fontSize: "12px" },
    template: Template.make({ html: `World` }),
});

div.insertAfter(span);

console.log(div);
console.log(span);
смотреть пример: web | github
Методы
prop(attr: string, value: string, reset?: boolean): null
prop(attrs: IHashMapAny, reset?: boolean): null
Устанавливает значение свойства
подробней
Параметры:
  • attr: string - изменяемое свойство
  • value: string - новое значение
  • attrs: IHashMapAny - группа свойств для изменения
  • reset?: boolean - сбросить все предыдущие свойства
import { Component, template } from "bakugan";

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

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

app.get("firstName").prop("value", `Ivan`);
app.get("lastName").prop({ value: `Ivanov` });
смотреть пример: web | github
prop(attr: string): string
Получает значение свойства
подробней
Параметры:
  • attr: string - получаемое свойство
import { Component, template } from "bakugan";

@template({
    html: `
        <div>
            <input type="text" ref="firstName" value="Ivan" />
        </div>
    `,
})
class App extends Component { }

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

console.log(app.get("firstName").prop("value")); // Ivan
смотреть пример: web | github
attr(attr: string, value: string, reset?: boolean): null
attr(attrs: IHashMapString, reset?: boolean): null
Устанавливает значение атрибута
подробней
Параметры:
  • attr: string - изменяемый атрибут
  • value: string - новое значение
  • attrs: IHashMapString - группа атрибутов для изменения
  • reset?: boolean - сбросить все предыдущие атрибуты
import { Component, template } from "bakugan";

@template({
    html: `
        <div>
            <input type="text" ref="ok" value="ok" />
            <input type="text" ref="cancel" value="cancel "/>
        </div>
    `,
})
class App extends Component { }

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

app.get("ok").attr("type", `button`);
app.get("cancel").attr({ type: `button` });
смотреть пример: web | github
attr(attr: string): string
Получает значение атрибута
подробней
Параметры:
  • attr: string - получаемый атрибут
import { Component, template } from "bakugan";

@template({
    html: `
        <div>
            <input type="button" ref="ok" value="ok" />
        </div>
    `,
})
class App extends Component { }

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

console.log(app.get("ok").attr("type")); // button
смотреть пример: web | github
cl(klass: string, value: boolean, reset?: boolean): null
cl(klasses: IHashMapBoolean, reset?: boolean): null
Устанавливает значение класса
подробней
Параметры:
  • klass: string - изменяемый класс
  • value: boolean - вкл/выкл класс
  • klasses: IHashMapBoolean - группа изменяемых классов
  • reset?: boolean - сбросить все предыдущие классы
import { Component, template } from "bakugan";

@template({
    html: `
        <div>
            <input type="button" ref="ok" value="ok" />
            <input type="button" ref="cancel" value="cancel "/>
        </div>
    `,
})
class App extends Component { }

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

app.get("ok").cl("show", true);
app.get("cancel").cl({ show: true });
смотреть пример: web | github
cl(klass: string): boolean
Получает значение класса
подробней
Параметры:
  • klass: string - получаемый класс
import { Component, template } from "bakugan";

@template({
    html: `
        <div>
            <input type="button" ref="ok" value="ok" class="show" />
        </div>
    `,
})
class App extends Component { }

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

console.log(app.get("ok").cl("show")); // true
смотреть пример: web | github
css(style: string, value: string, reset?: boolean): null
css(styles: IHashMapString, reset?: boolean): null
Устанавливает значение стилей
подробней
Параметры:
  • style: string - изменяемый стиль
  • value: string - новое значение
  • styles: IHashMapString - группа стилей для изменения
  • reset?: boolean - сбросить все предыдущие стили
import { Component, template } from "bakugan";

@template({
    html: `
        <div>
            <input type="button" ref="ok" value="ok" />
            <input type="button" ref="cancel" value="cancel "/>
        </div>
    `,
})
class App extends Component { }

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

app.get("ok").css("backgroundColor", "green");
app.get("cancel").css({ backgroundColor: "green" });
смотреть пример: web | github
css(style: string): string
Получает значение стиля
подробней
Параметры:
  • style: string - получаемый стиль
import { Component, template } from "bakugan";

@template({
    html: `
        <div>
            <input type="button" ref="ok" value="ok" style="background-color: green;" />
        </div>
    `,
})
class App extends Component { }

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

console.log(app.get("ok").css("backgroundColor")); // green
смотреть пример: 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