Bootstrap Components

API

class epyk.fwk.bs.UI.Components(page: PageModel)
accordion(values=None, html_code: Optional[str] = None, width: Optional[Union[tuple, int, str]] = (100, '%'), height: Optional[Union[tuple, int, str]] = (None, '%'), profile: Optional[Union[bool, dict]] = None, options: Optional[dict] = None) BsAccordion

Add an Accordion panel.

Related Pages:

Usage:

acc = page.web.bs.accordion()
acc.add_section("Test", "content")
acc.header(0).click([
  acc.panel(0).build("New content")
])
Parameters:
  • values – Optional. Title: content.

  • html_code – Optional. An identifier for this component (on both Python and Javascript side).

  • width – Optional. A tuple with the integer for the component width and its unit.

  • height – Optional. A tuple with the integer for the component height and its unit.

  • profile – Optional. A flag to set the component performance storage.

  • options – Optional. Specific Python options available for this component.

property alerts: Components

Alerts are available for any length of text, as well as an optional close button.

Related Pages:

breadcrumb(values: Optional[list] = None, active: Optional[str] = None, html_code: Optional[str] = None, width: Optional[Union[tuple, int, str]] = (100, '%'), height: Optional[Union[tuple, int, str]] = (None, '%'), profile: Optional[Union[bool, dict]] = None, options: Optional[dict] = None) BsBreadcrumb

Add a breadcrumb.

Related Pages:

Usage:

page.web.bs.breadcrumb(["AAA", "BBBB"], active="AAA")
Parameters:
  • values – Optional. Title: content.

  • active – Optional. The active section in the breadcrumb.

  • html_code – Optional. An identifier for this component (on both Python and Javascript side).

  • width – Optional. A tuple with the integer for the component width and its unit.

  • height – Optional. A tuple with the integer for the component height and its unit.

  • profile – Optional. A flag to set the component performance storage.

  • options – Optional. Specific Python options available for this component.

property buttons: Components

Use Bootstrap’s custom button styles for actions in forms, dialogs, and more with support for multiple sizes, states, and more.

Usage:

btn = page.web.bs.button("Test")
btn.click([
  page.js.console.log(select.dom.content)
])

Related Pages:

date(value: Optional[str] = None, width: Optional[Union[tuple, int, str]] = (None, 'px'), height: Optional[Union[tuple, int, str]] = (None, 'px'), html_code: Optional[str] = None, profile: Optional[Union[bool, dict]] = None, options: Optional[dict] = None) BsDatePicker

Toast default date component.

Usage:

page.web.bs.date("2021-08-05")
page.web.bs.date()

Related Pages:

Parameters:
  • value – Optional. The initial time value format YYYY-MM-DD

  • width – Optional. A tuple with the integer for the component width and its unit.

  • height – Optional. A tuple with the integer for the component height and its unit.

  • html_code – Optional. An identifier for this component (on both Python and Javascript side).

  • profile – Optional. A flag to set the component performance storage.

  • options – Optional. Specific Python options available for this component.

property fields: Components

Create beautifully simple form labels that float over your input fields.

Related Pages:

property icons: Components

Free, high quality, open source icon library with over 1,300 icons. Include them anyway you like—SVGs, SVG sprite, or web fonts. Use them with or without Bootstrap in any project.

Usage:

e = page.web.bs.icons.edit()
e.style.css.color = "red"

Related Pages:

property images: Components

Add images and badges to your web page.

Related Pages:

property inputs: Components

Pre-defined inputs components.

property layouts: Components

Related Pages:

property lists: Components

Customize the native <select>s with custom CSS that changes the element’s initial appearance.

Related Pages:

loading(text: str = 'Loading...', width: Optional[Union[tuple, int, str]] = (None, '%'), height: Optional[Union[tuple, int, str]] = (None, '%'), category=None, options: Optional[dict] = None, profile: Optional[Union[bool, dict]] = None)

Indicate the loading state of a component or page with Bootstrap spinners, built entirely with HTML, CSS, and no JavaScript.

Usage:

l1 = page.web.bs.loading()
l1.style.bs.sizing("sm")

page.web.bs.loading(category="primary", options={"kind": "grow", "visible": True})

Related Pages:

Parameters:
  • text – Optional. The value to be displayed to the component.

  • width – Optional. A tuple with the integer for the component width and its unit.

  • height – Optional. A tuple with the integer for the component height and its unit.

  • category – Optional. The Bootstrap predefined category.

  • profile – Optional. A flag to set the component performance storage.

  • options – Optional. Specific Python options available for this component.

modal(values: Optional[dict] = None, html_code: Optional[str] = None, width: Optional[Union[tuple, int, str]] = (100, '%'), height: Optional[Union[tuple, int, str]] = (None, '%'), profile: Optional[Union[bool, dict]] = None, options: Optional[dict] = None) BsModal

Add an off canvas panel.

Related Pages:

Usage:

oc = page.web.bs.offcanvas(["AAA", "BBB"])
Parameters:
  • values – Optional. Title: content.

  • html_code – Optional. An identifier for this component (on both Python and Javascript side).

  • width – Optional. A tuple with the integer for the component width and its unit.

  • height – Optional. A tuple with the integer for the component height and its unit.

  • profile – Optional. A flag to set the component performance storage.

  • options – Optional. Specific Python options available for this component.

property modals: Components

Use Bootstrap’s JavaScript modal plugin to add dialogs to your site for lightboxes, user notifications, or completely custom content.

Related Pages:

Usage:

oc = page.web.bs.modals.success("Content", "Title")
oc.options.scroll = True
page.web.bs.modals.button(oc, "Open")
navbar(values=None, html_code: Optional[str] = None, width: Optional[Union[tuple, int, str]] = (100, '%'), height: Optional[Union[tuple, int, str]] = (None, '%'), profile: Optional[Union[bool, dict]] = None, options: Optional[dict] = None) BsNavBar
Parameters:
  • values

  • html_code

  • width

  • height

  • profile

  • options

property navbars: Components

Documentation and examples for Bootstrap’s powerful, responsive navigation header, the navbar. Includes support for branding, navigation, and more, including support for our collapse plugin.

Related Pages:

Usage:

offcanva(values: Optional[list] = None, position: str = 'start', html_code: Optional[str] = None, width: Optional[Union[tuple, int, str]] = (100, '%'), height: Optional[Union[tuple, int, str]] = (None, '%'), profile: Optional[Union[bool, dict]] = None, options: Optional[dict] = None) BsOffCanvas

Add an off canvas panel.

Related Pages:

Usage:

oc = page.web.bs.offcanvas(["AAA", "BBB"])
Parameters:
  • values – Optional. Title: content.

  • position – Optional. The offcanvas position in the page.

  • html_code – Optional. An identifier for this component (on both Python and Javascript side).

  • width – Optional. A tuple with the integer for the component width and its unit.

  • height – Optional. A tuple with the integer for the component height and its unit.

  • profile – Optional. A flag to set the component performance storage.

  • options – Optional. Specific Python options available for this component.

property offcanvas: OffComponents

Use Bootstrap’s JavaScript modal plugin to add dialogs to your site for lightboxes, user notifications, or completely custom content.

Related Pages:

Usage:

property panels: Components

Documentation and examples for how to use Bootstrap’s included navigation components.

Related Pages:

property sliders

Use our custom range inputs for consistent cross-browser styling and built-in customization.

Documentation and examples for using Bootstrap custom progress bars featuring support for stacked bars, animated backgrounds, and text labels

Related Pages:

property tables: Components

Documentation and examples for opt-in styling of tables (given their prevalent use in JavaScript plugins) with Bootstrap.

Related Pages:

property texts: TextComponents
time(hour: Optional[int] = None, minute: int = 0, second: int = 0, width: Optional[Union[tuple, int, str]] = (None, 'px'), height: Optional[Union[tuple, int, str]] = (None, 'px'), html_code: Optional[str] = None, profile: Optional[Union[bool, dict]] = None, options=None) BsDatePicker

Toast default date component.

Usage:

page.web.bs.time(23, 30)
page.web.bs.time()

Related Pages:

Parameters:
  • hour – Optional. The hours’ value

  • minute – Optional. The minutes’ value.

  • second – Optional. The seconds’ value.

  • width – Optional. A tuple with the integer for the component width and its unit.

  • height – Optional. A tuple with the integer for the component height and its unit.

  • html_code – Optional. An identifier for this component (on both Python and Javascript side).

  • profile – Optional. A flag to set the component performance storage.

  • options – Optional. Specific Python options available for this component.

toast(values: Optional[List[HtmlModel]] = None, html_code: Optional[str] = None, width: Optional[Union[tuple, int, str]] = (100, '%'), height: Optional[Union[tuple, int, str]] = (None, '%'), profile: Optional[Union[bool, dict]] = None, options: Optional[dict] = None) BsToast

Push notifications to your visitors with a toast, a lightweight and easily customizable alert message.

Usage:

Related Pages:

Parameters:
  • values – Optional. Components added to the body.

  • html_code – Optional. An identifier for this component (on both Python and Javascript side).

  • width – Optional. A tuple with the integer for the component width and its unit.

  • height – Optional. A tuple with the integer for the component height and its unit.

  • profile – Optional. A flag to set the component performance storage.

  • options – Optional. Specific Python options available for this component.

property toasts

Push notifications to your visitors with a toast, a lightweight and easily customizable alert message.

Related Pages: