How to use the bobril.createVirtualComponent function in bobril

let element = b.getDomNode(ctx.me) as HTMLElement;
    const elWidth = element.offsetWidth;
    const keyWidth = ctx.keyWidth;
    const minWidth = keyWidth * 1.5;
    let keyIncrements = elWidth / keyWidth;
    let newWidth;

    keyIncrements = keyIncrements <= 1.5 ? 1.5 : Math.ceil(keyIncrements);
    newWidth = keyIncrements * keyWidth;

    if (newWidth < minWidth) newWidth = minWidth;

    element.style.width = `${newWidth}px`;
}

export const Menu = b.createVirtualComponent({
    init(ctx: IMenuCtx) {
        const d = ctx.data;
        ctx.controller = new MenuController(ctx);
        ctx.isKeyboardFocused = d.initiallyKeyboardFocused || false;
        ctx.keyWidth = d.desktop ? 64 : 56;
    },
    render(ctx: IMenuCtx, me: b.IBobrilNode) {
        const d = ctx.data;
        ctx.controller.onClose = d.onClose;
        b.extendCfg(ctx, "menuController", ctx.controller);
        me.children = b.styledDiv(
            b.withRef(List({ tabindex: 0 }, d.children), ctx, "list"),
            {
                maxHeight: d.maxHeight,
                overflowY: d.maxHeight ? "auto" : undefined
            },

import * as b from 'bobril';
import { header } from '../common/docsHeader';

export const javaScript = b.createVirtualComponent({
    id: 'bobrilstrap-javasctipt',
    init() {
        document.title = 'Bobrilstrap - Javascript';
    },
    render(_ctx: b.IBobrilCtx, me: b.IBobrilNode) {
        me.children = [
            header(texts)
        ];
    }
});

const texts = {
    header: 'JavaScript',
    headerContent: `Bring Bootstrap's components to life with over a dozen custom jQuery plugins.
     Easily include them all, or one by one.`
};

import { breadcrumbs } from "./breadcrumbs";
import { pagination } from "./pagination";
import { labels } from "./labels";
import { badges } from "./badges";
import { jumbotron } from "./jumbotron";
import { PageHeader } from "./pageHeader";
import { thumbnails } from "./thumbnails";
import { alerts } from "./alerts";
import { progress } from "./progress";
import { media } from "./media";
import { listGroup } from "./listGroup";
import { panels } from "./panels";
import { responsiveEmbed } from "./responsiveEmbed";
import { wells } from "./wells";

export const components = b.createVirtualComponent({
  id: "bobrilstrap-components",
  init() {
    document.title = "Bobrilstrap - Components";
  },
  render(_ctx: b.IBobrilCtx, me: b.IBobrilNode) {
    me.children = [
      header(texts),
      docsContainer(
        {
          id: "components",
          sidebar: {
            topTargetId: "components-top",
            items: [
              {
                targetId: "glyphicons",
                title: "Glyphicons",

if (!ctx.data.preventCloseOnAction) {
            ctx.owner.close();
        }
    }
    else {
        ctx.open = !ctx.open;
    }
    b.invalidate(ctx);
};

function handleRequestClose(ctx: IMenuItemCtx) {
    ctx.open = false;
    b.invalidate(ctx);
};

export const MenuItem = b.createVirtualComponent({
    init(ctx: IMenuItemCtx) {
        ctx.open = false;
        ctx.focused = false;
        ctx.owner = ctx.cfg.menuController;
        ctx.handleAction = () => handleAction(ctx);
    },
    render(ctx: IMenuItemCtx, me: b.IBobrilNode) {
        const d = ctx.data;
        ctx.owner.childRender(ctx, d.disabled || false);
        let leftIconElement: b.IBobrilNode | undefined;
        if (d.leftIcon) {
            leftIconElement = b.style(Object.assign({}, d.leftIcon), { color: d.disabled ? styles.strDisabledColor : styles.strTextColor });
        } else if (d.checked) {
            leftIconElement = b.style(icons.navigationCheck(), { color: styles.strTextColor });
        }

trigger?: TooltipTrigger[];
}

export interface ITooltipData extends ITooltipOptions {
  children?: b.IBobrilNode;
  visible?: boolean;
}

interface ITooltipCtx extends b.IBobrilCtx {
  data: ITooltipData;
  tooltipedElement: HTMLElement | undefined;
  visible: boolean;
  lastTitle: string;
}

export const Tooltip = b.createVirtualComponent({
  id: "bobrilstrap-tooltip",
  render(ctx: ITooltipCtx, me: b.IBobrilNode) {
    me.children = ctx.data.children;
  },
  postInitDom(ctx: ITooltipCtx) {
    registerNewTooltip(ctx);
  },
  postUpdateDom(ctx: ITooltipCtx) {
    registerNewTooltip(ctx);
  },
  destroy(ctx: ITooltipCtx) {
    unregister(ctx);
  }
});

function registerNewTooltip(ctx: ITooltipCtx) {

import * as b from "bobril";
import * as bs from "../../index";
import { styles } from "../bsexample/css";
import { pre, langJs } from "../prettify/pre";
import { section } from "../common/section";

export const inputGroups = b.createVirtualComponent({
  render(_ctx: b.IBobrilCtx, me: b.IBobrilNode) {
    me.children = section(
      {
        header: "Input groups",
        id: "input-groups",
        lead: [
          `Extend form controls by adding text or buttons before, after, or on both sides of any text-based `,
          bs.Code({}, "<input>"),
          `. Use `,
          bs.Code({}, "bs.InputGroup"),
          ` with an `,
          bs.Code({}, "bs.InputGroupAddon"),
          ` or `,
          bs.Code({}, "bs.InputGroupBtn"),
          ` component to prepend or append elements to a single .form-control.`
        ]

collapsed: b.styleDef("collapsed")
};

export interface ICollapseData extends b.IDataWithChildren {
  collapsed: boolean;
  onCollapsed?: () => void;
  onExpanded?: () => void;
}

interface ICollapseCtx extends b.IBobrilCtx {
  data: ICollapseData;
  collapsedElement: HTMLElement;
  collapsed: boolean;
}

export const Collapse = b.createVirtualComponent({
  id: "bobrilstrap-collapse",
  render(ctx: ICollapseCtx, me: b.IBobrilNode) {
    me.children = ctx.data.children;
  },
  postInitDom(ctx: ICollapseCtx) {
    registerNewCollapse(ctx);
  },
  postUpdateDom(ctx: ICollapseCtx) {
    registerNewCollapse(ctx);
    handleToggle(ctx);
  }
});

function registerNewCollapse(ctx: ICollapseCtx) {
  const element = b.getDomNode(ctx.me) as HTMLElement;
  if (!element || ctx.collapsedElement === element) return;

import { styles } from "../bsexample/css";
import { persistentScrollContainer } from "./persistentScrollContainer";
import { docsSidebar, IDocsSidebarData } from "./docsSidebar";

export interface IDocsContainerData {
  children?: b.IBobrilChildren;
  id: string;
  sidebar?: IDocsSidebarData;
}

interface ICtx extends b.IBobrilCtx {
  data: IDocsContainerData;
}
const mainConainerStyle = b.styleDef({ paddingTop: 50 });

export const docsContainer = b.createVirtualComponent({
  id: "example-docs-container",
  render(ctx: ICtx, me: b.IBobrilNode) {
    me.children = [
      b.style(
        persistentScrollContainer(
          {
            id: ctx.data.id,
            style: styles.bsDocsContainer
          },
          bs.Row({}, [
            bs.Col(
              { size: bs.Size.Md, span: 9, attrs: { role: "main" } },
              ctx.data.children
            ),
            !!ctx.data.sidebar &&
              bs.Col(

import * as b from "bobril";
import * as bs from "../../index";
import { styles } from "../bsexample/css";
import { pre, langJs } from "../prettify/pre";
import { section } from "../common/section";

const imageData = `data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACgAAAAoCAYAAACM/rhtAAAB+0lEQVR4AcyYg5LkUBhG+1X2PdZGaW3btm
3btm3bHttWrPomd1r/2Jn/VJ02TpxcH4CQ/dsuazWgzbIdrm9dZVd4pBz4zx2igTaFHrhvjneVXNHCSqIlFEjiwMyyyOBilRgGSqLNF1jnwNQdIvAt48C3IlBmH
CiLQHC2zoHDu6zG1iXn6+y62ScxY9AODO6w0pvAqf23oSE4joOfH6OxfMoRnoGUm+de8wykbFt6wZtA07QwtNOqKh3ZbS3Wzz2F+1c/QJY0UCJ/J3kXWJfv7Vhx
CRRV1jGw7XI+gcO7rEFFRvdYxydwcPsVsC0bQdKScngt4iUTD4Fy/8p7PoHzRu1DclwmgmiqgUXjD3oTKHbAt869qdJ7l98jNTEblPTkXMwetpvnftA0LLHb4X8
kiY9Kx6Q+W7wJtG0HR7fdrtYz+x7iya0vkEtUULIzCjC21wY+W/GYXusRH5kGytWTLxgEEhePPwhKYb7EK3BQuxWwTBuUkd3X8goUn6fMHLyTT+DCsQdAEXNzSM
eVPAJHdF2DmH8poCREp3uwm7HsGq9J9q69iuunX6EgrwQVObjpBt8z6rdPfvE8kiiyhsvHnomrQx6BxYUyYiNS8f75H1w4/ISepDZLoDhNJ9cdNUquhRsv+6EP9
oNH7Iff2A9g8h8CLt1gH0Qf9NMQAFnO60BJFQe0AAAAAElFTkSuQmCC`;

export const navbarPage = b.createVirtualComponent({
  render(_ctx: b.IBobrilCtx, me: b.IBobrilNode) {
    me.children = section(
      {
        header: "Navbar",
        id: "navbar",
        lead: []
      },
      [
        defaultNavbar(),
        brandImage(),
        forms(),
        buttons(),
        text(),
        links(),
        alignment(),
        fixedTop(),

import * as b from "bobril";
import * as bs from "../../index";
import { styles } from "../bsexample/css";
import { pre, langJs } from "../prettify/pre";
import { section } from "../common/section";

export const glyphicons = b.createVirtualComponent({
  render(_ctx: b.IBobrilCtx, me: b.IBobrilNode) {
    me.children = section(
      {
        header: "Glyphicons",
        id: "glyphicons"
      },
      [availableGlyphs(), howToUse(), examples()]
    );
  }
});

function availableGlyphs(): b.IBobrilChildren {
  return [
    b.anchor(bs.H2({ attrs: { id: "glyphicons-glyphs" } }, "Available glyphs")),
    bs.P({}, [
      `Includes over 250 glyphs in font format from the Glyphicon Halflings set. `,