How to use the bobril.style function in bobril

To help you get started, we’ve selected a few bobril examples, based on popular ways it is used in public projects.

Secure your code as it's written. Use Snyk Code to scan source code in minutes - no build needed - and fix issues immediately.

github keeema / bobrilstrap / components / carousel.ts View on Github external
render(ctx: ICarouselCtx, me: IElementBobrilNode) {
    b.style(me, carouselStyles.carousel, carouselStyles.slide);
    me.attrs["id"] = ctx.data.id;

    if (!(ctx.data.data && ctx.data.data.ride))
      me.attrs["data-ride"] = "carousel";

    const initialSlide = ctx.data.slideTo === undefined ? 0 : ctx.data.slideTo;

    me.children = [
      b.style(
        Ol(
          {},
          ctx.data.items.map((_item, idx) => {
            return b.style(
              Li({ data: { target: `#${ctx.data.id}`, slideTo: idx } }),
              !ctx.initialSlideChanged &&
                idx === initialSlide &&
github keeema / bobrilstrap / components / navbarCollapse.ts View on Github external
render(_ctx: INavbarCollapseCtx, me: b.IBobrilNode) {
    b.style(me, navStyles.navbarCollapse, collapseStyles.collapse);
  }
});
github bobril / bobril-m / src / badge.ts View on Github external
render(ctx: IBadgeCtx, me: b.IBobrilNode) {
    const d = ctx.data;
    b.style(me, rootStyle);
    me.children = [
      d.children,
      b.styledDiv(d.badgeContent, badgeStyle, d.primary && primaryStyle, d.secondary && secondaryStyle)
    ];
  }
});
github keeema / bobrilstrap / components / paragraph.ts View on Github external
render(ctx: ICtx, me: b.IBobrilNode) {
    me.tag = "p";
    b.style(me, !!ctx.data.lead && typography.lead);
    b.style(
      me,
      !!ctx.data.formControlStatic && paragraphStyles.formControlStatic
    );
  }
});
github keeema / bobrilstrap / components / jumbotron.ts View on Github external
render(_ctx: IJumbotronCtx, me: b.IBobrilNode) {
    b.style(me, jumbotronStyle);
  }
});
github keeema / bobrilstrap / components / alert.ts View on Github external
render(ctx: IAlertCtx, me: IElementBobrilNode) {
    b.style(me, alertStyles.alert);
    b.style(me, alertContextStyles(ctx.data.context));
    me.attrs["role"] = "alert";

    const animation = ctx.data.animation === undefined || ctx.data.animation;
    const nativeDismiss =
      ctx.data.nativeDismiss === undefined || ctx.data.nativeDismiss;

    if (ctx.data.dismissButton) {
      b.style(
        me,
        alertStyles.alertDismissable,
        !!animation && alertStyles.fade,
        !!animation && alertStyles.in
      );

      const buttonData = b.assign({}, ctx.data.dismissButton, {
github keeema / bobrilstrap / components / navbarBrand.ts View on Github external
render(ctx: INavbarBrandCtx, me: b.IBobrilNode) {
    b.style(me, navStyles.navbarBrand);
    b.style(
      me,
      ctx.data.alignment === NavbarAlignment.Right && navStyles.navbarRight
    );
    b.style(
      me,
      ctx.data.alignment === NavbarAlignment.Left && navStyles.navbarLeft
    );
  }
});
github keeema / bobrilstrap / example / common / section.ts View on Github external
render(ctx: ICtx, me: b.IBobrilNode) {
    me.tag = "div";
    b.style(me, styles.bsDocsSection);
    me.children = [
      b.anchor(
        bs.H1(
          { attrs: { id: ctx.data.id }, style: styles.pageHeader },
          ctx.data.header
        )
      ),
      !!ctx.data.lead && bs.P({ lead: true }, ctx.data.lead),
      !!ctx.data.description && bs.P({}, ctx.data.description),
      ctx.data.children
    ];
  }
});
github keeema / bobrilstrap / components / carousel.ts View on Github external
render(ctx: ICarouselCtx, me: IElementBobrilNode) {
    b.style(me, carouselStyles.carousel, carouselStyles.slide);
    me.attrs["id"] = ctx.data.id;

    if (!(ctx.data.data && ctx.data.data.ride))
      me.attrs["data-ride"] = "carousel";

    const initialSlide = ctx.data.slideTo === undefined ? 0 : ctx.data.slideTo;

    me.children = [
      b.style(
        Ol(
          {},
          ctx.data.items.map((_item, idx) => {
            return b.style(
              Li({ data: { target: `#${ctx.data.id}`, slideTo: idx } }),
              !ctx.initialSlideChanged &&
                idx === initialSlide &&
                carouselStyles.active
            );
          })
        ),
        carouselStyles.carouselIndicators
      ),
      Elem(
        { style: carouselStyles.carouselInner, attrs: { role: "listbox" } },
        ctx.data.items.map((item, idx) =>
github keeema / bobrilstrap / components / inputText.ts View on Github external
render(ctx: ICtx, me: IElementBobrilNode) {
    me.component.super.render(ctx, me);
    if (ctx.data.value !== undefined) {
      ctx.value = ctx.data.value;
    }

    me.tag = "input";
    me.attrs["type"] = toLowerWithDashes(
      ctx.data.type !== undefined
        ? InputTextType[ctx.data.type]
        : InputTextType[InputTextType.Text]
    );
    me.attrs.value = ctx.value;
    b.style(me, inputTextStyles.formControl);
    b.style(
      me,
      ctx.data.size !== undefined && inputTextSizeStyles(ctx.data.size)
    );

    if (ctx.data.placeholder) me.attrs["placeholder"] = ctx.data.placeholder;

    if (ctx.data.disabled) me.attrs["disabled"] = "disabled";

    if (ctx.data.readonly) me.attrs["readonly"] = "readonly";
  },
  onChange(ctx: ICtx, value: string): void {