Layouts Interface

class epyk.interfaces.components.CompLayouts.Layouts(ui)

accentuate(width: Optional[Union[tuple, int, str]] = (10, '%'), height: Optional[Union[tuple, int, str]] = (1, 'px'), align: Optional[str] = None, options: Optional[dict] = None, profile: Optional[Union[bool, dict]] = None) → Div

Add a styles hr component to lightly underline another component.

Tags:
Categories:

Usage:

page.ui.layouts.accentuate()

Templates:

Parameters:

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.
align – Optional. The content position. Values (left, right, center). Default center.
options – Optional. Dictionary. Optional. Specific Python options available for this component.
profile – Optional. A flag to set the component performance storage.

br(count: int = 1, profile: Optional[Union[bool, dict]] = None) → Newline

Wrapper around the Br html tag.

The <br> tag inserts a single line break.

Tags:
Categories:

Usage:

page.ui.layouts.new_line(10)

Underlying HTML Objects:

epyk.core.html.HtmlOthers.Newline

Related Pages:

https://www.w3schools.com/tags/tag_br.asp

Parameters:

count – Integer. Optional. The number of empty line to put. Default 1.
profile – Boolean | Dictionary. Optional. Activate the profiler.

centered(components: Optional[List[Html]] = None, width: Optional[Union[tuple, int, str]] = ('auto', ''), height: Optional[Union[tuple, int, str]] = (None, 'px'), align: str = 'left', html_code: Optional[str] = None, options: Optional[dict] = None, profile: Optional[Union[bool, dict]] = None) → Div

Tags:
Categories:

Usage:

Templates:

Parameters:

components – The different HTML objects to be added 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
align – Optional. A string with the horizontal position of the component
html_code – Optional. An identifier for this component (on both Python and Javascript side)
options – Optional. Specific Python options available for this component
profile – Optional. A flag to set the component performance storage

col(components: Optional[List[Html]] = None, position: str = 'middle', width: Optional[Union[tuple, int, str]] = (100, '%'), height: Optional[Union[tuple, int, str]] = (None, 'px'), align: Optional[str] = None, helper: Optional[str] = None, options: Optional[dict] = None, profile: Optional[Union[bool, dict]] = None) → Col

Python wrapper for a column of HTML elements from Bootstrap.

This component is a container and it is used to display multiple Ares components in column. You can first add a component in the data list then add the + operator to add more.

Tags:
Categories:

Usage:

page.ui.layouts.col([
  page.ui.text("test C"),
  page.ui.text("test D"),
])

Underlying HTML Objects:

epyk.core.html.HtmlContainer.Col

Related Pages:

https://getbootstrap.com/docs/4.0/layout/grid/ https://www.alsacreations.com/tuto/lire/1493-css3-flexbox-layout-module.html

Templates:

Parameters:

components – The different HTML objects to be added to the component.
position – Optional.
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.
align – Optional. A string with the horizontal position of the component.
helper – Optional. A tooltip helper.
options – Optional. Specific Python options available for this component.
profile – Optional. A flag to set the component performance storage.

columns(components: List[Html], cols, width: Optional[Union[tuple, int, str]] = (100, '%'), height: Optional[Union[tuple, int, str]] = (None, 'px'), align: Optional[str] = None, position: Optional[str] = None, options: Optional[dict] = None, profile: Optional[Union[bool, dict]] = None) → Grid

Tags:
Categories:

Usage:

Templates:

Parameters:

components – List. The different HTML objects to be added to the component.
cols –
width – Tuple. Optional. A tuple with the integer for the component width and its unit.
height – Tuple. Optional. A tuple with the integer for the component height and its unit.
align – String. Optional. A string with the horizontal position of the component.
position – String. Optional. A string with the vertical position of the component.
options – Dictionary. Optional. Specific Python options available for this component.
profile – Boolean or Dictionary. Optional. A flag to set the component performance storage.

dialogs(text: str = '', width: Optional[Union[tuple, int, str]] = (100, '%'), height: Optional[Union[tuple, int, str]] = (20, 'px'), html_code: Optional[str] = None, helper: Optional[str] = None, options: Optional[dict] = None, profile: Optional[Union[bool, dict]] = None) → Dialog

Simple Jquery UI modal with a text.

Tags:
Categories:

Underlying HTML Objects:

epyk.core.html.HtmlEvent.Dialog

Related Pages:

https://jqueryui.com/dialog/

Usage:

:param text: Optional. The value to be displayed to the component.
:param width: Optional. A tuple with the integer for the component width and its unit.
:param height: Optional. A tuple with the integer for the component height and its unit.
:param html_code: Optional. An identifier for this component (on both Python and Javascript side).
:param helper: Optional. A tooltip helper.
:param options: Optional. Specific Python options available for this component.
:param profile: Optional. A flag to set the component performance storage.

div(components: Optional[Union[Html, List[Html]]] = None, label: Optional[str] = None, color: Optional[str] = None, width: Optional[Union[tuple, int, str]] = (100, '%'), icon: Optional[str] = None, height: Optional[Union[tuple, int, str]] = (None, 'px'), editable: bool = False, align: str = 'left', padding: Optional[int] = None, html_code: Optional[str] = None, tag: str = 'div', helper: Optional[str] = None, options: Optional[dict] = None, profile: Optional[Union[bool, dict]] = None, position: Optional[Union[bool, dict]] = None) → Div

Add a simple div container to the page. The <div> tag defines a division or a section in an HTML document.

The <div> tag is used as a container for HTML elements - which is then styled with CSS or manipulated with JavaScript.

Tags:
Categories:

Usage:

div = page.ui.div([html])
div += html_2

Underlying HTML Objects:

epyk.core.html.HtmlContainer.Div

Related Pages:

https://www.w3schools.com/tags/tag_div.asp

Templates:

https://github.com/epykure/epyk-templates/blob/master/locals/components/bars.py

Parameters:

components – The different HTML objects to be added to the component
label – Optional.
color – Optional.
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
icon – Optional.
position – Optional.
editable – Optional.
align – Optional. A string with the horizontal position of the component
padding – Optional.
html_code – Optional. An identifier for this component (on both Python and Javascript side)
tag – Optional. The HTML tag (Default div)
options – Optional. Specific Python options available for this component
profile – Optional. A flag to set the component performance storage
helper – Optional.

form(components: Optional[List[Html]] = None, helper: Optional[str] = None) → Form

Tags:
Categories:

Usage:

Underlying HTML Objects:

epyk.core.html.HtmlContainer.Form

Templates:

Parameters:

components – The different HTML objects to be added to the component.
helper – Optional. A tooltip helper.

grid(rows=None, width: Optional[Union[tuple, int, str]] = (100, '%'), height: Optional[Union[tuple, int, str]] = (None, 'px'), align: Optional[str] = None, position: Optional[str] = None, options: Optional[dict] = None, profile: Optional[Union[bool, dict]] = None) → Grid

Python wrapper to the HTML Bootstrap Grid.

Tags:
Categories:

Usage:

gr = page.ui.layouts.grid()
gr += [page.ui.text("test %s" % i) for i in range(5)]

Underlying HTML Objects:

epyk.core.html.HtmlContainer.Grid

Related Pages:

https://getbootstrap.com/docs/4.0/layout/grid/

Templates:

Parameters:

rows –
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.
align – Optional. A string with the horizontal position of the component.
position – Optional. A string with the vertical position of the component.
options – Optional. Specific Python options available for this component.
profile – Optional. A flag to set the component performance storage.

header(components: Optional[List[Html]] = None, width: Optional[Union[tuple, int, str]] = (100, '%'), height: Optional[Union[tuple, int, str]] = (None, 'px'), html_code: Optional[str] = None, helper: Optional[str] = None, options: Optional[dict] = None, profile: Optional[Union[bool, dict]] = None) → Header

The HTML <header> element represents introductory content, typically a group of introductory or navigational aids. It may contain some heading elements but also a logo, a search form, an author name, and other elements.

Tags:
Categories:

Usage:

div = page.ui.header([html])
div += html_2

Underlying HTML Objects:

epyk.core.html.HtmlContainer.Header

Related Pages:

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/header

Templates:

Parameters:

components – The different HTML objects to be added 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.
html_code – Optional. An identifier for this component (on both Python and Javascript side).
helper –
options – Optional. Optional. Specific Python options available for this component.
profile – Optional. A flag to set the component performance storage.

hr(count: int = 1, background_color: Optional[str] = None, margins: int = 0, width: Optional[Union[tuple, int, str]] = (100, '%'), height: Optional[Union[tuple, int, str]] = (None, 'px'), align: Optional[str] = None, options: Optional[dict] = None, profile: Optional[Union[bool, dict]] = None) → Div

Wrapper around the HT html tag.

The <hr> tag defines a thematic break in an HTML page (e.g. a shift of topic).

Tips: If background_color is True, the theme color will be used.

Tags:
Categories:

Usage:

page.ui.layouts.hr(10)

Underlying HTML Objects:

epyk.core.html.HtmlOthers.Hr

Related Pages:

https://www.w3schools.com/tags/tag_hr.asp

Templates:

Parameters:

count – Optional. The number of HR tag to be added.
background_color – Optional. The component background color.
margins – Optional. The margin top and bottom in pixels.
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.
align – Optional. The content position. Values (left, right, center). Default center.
options – Optional. Dictionary. Optional. Specific Python options available for this component.
profile – Optional. A flag to set the component performance storage.

icons(icon_names=None, width: Optional[Union[tuple, int, str]] = (100, '%'), height: Optional[Union[tuple, int, str]] = (None, 'px'), html_code: Optional[str] = None, helper: Optional[str] = None, profile: Optional[Union[bool, dict]] = None) → IconsMenu

Tags:
Categories:

Usage:

menu = page.ui.layouts.icons(["fas fa-bell", "fas fa-calendar-check"])
menu.icon.click([menu.icon.dom.css({"color": 'red'})])
menu[0].click([menu[0].dom.css({"color": 'red'})])

Underlying HTML Objects:

epyk.core.html.HtmlContainer.IconsMenu

Templates:

https://github.com/epykure/epyk-templates/blob/master/locals/components/icons.py https://github.com/epykure/epyk-templates/blob/master/locals/components/image.py

Parameters:

icon_names –
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).
helper – Optional. A tooltip helper.
profile – Optional. A flag to set the component performance storage.

iframe(url: str = '', width: Optional[Union[tuple, int, str]] = (100, '%'), height: Optional[Union[tuple, int, str]] = (100, '%'), helper: Optional[str] = None, profile: Optional[Union[bool, dict]] = None) → IFrame

Add a iframe component to the page.

Tags:
Categories:

Usage:

page.ui.layouts.iframe("http://www.google.com")

Underlying HTML Objects:

epyk.core.html.HtmlContainer.IFrame

Templates:

Parameters:

url – Optional. The link to the underlying page.
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.
helper – Optional. A tooltip helper.
profile – Optional. A flag to set the component performance storage.

inline(components: Optional[List[Html]] = None, width: Optional[Union[tuple, int, str]] = (None, '%'), height: Optional[Union[tuple, int, str]] = (None, 'px'), align: str = 'left', html_code: Optional[str] = None, options: Optional[dict] = None, profile: Optional[Union[bool, dict]] = None) → Div

Tags:
Categories:

Usage:

Templates:

Parameters:

components – The different HTML objects to be added 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
align – Optional. A string with the horizontal position of the component
html_code – Optional. An identifier for this component (on both Python and Javascript side)
options – Optional. Specific Python options available for this component
profile – Optional. A flag to set the component performance storage

new_line(count: int = 1, profile: Optional[Union[bool, dict]] = None) → Newline

Wrapper around the Br html tag.

The <br> tag inserts a single line break.

Tags:
Categories:

Usage:

page.ui.layouts.new_line(10)

Underlying HTML Objects:

epyk.core.html.HtmlOthers.Newline

Related Pages:

https://www.w3schools.com/tags/tag_br.asp

Templates:

https://github.com/epykure/epyk-templates/blob/master/locals/components/contextmenu.py https://github.com/epykure/epyk-templates/blob/master/locals/components/links.py

Parameters:

count – Integer. Optional. The number of empty line to put. Default 1.
profile – Boolean | Dictionary. Optional. Activate the profiler.

panel(components: Optional[List[Html]] = None, title: Optional[str] = None, color: Optional[str] = None, width: Optional[Union[tuple, int, str]] = (100, '%'), height: Optional[Union[tuple, int, str]] = (None, 'px'), html_code: Optional[str] = None, helper: Optional[str] = None, options: Optional[dict] = None, profile: Optional[Union[bool, dict]] = False) → Panel

Underlying HTML Objects:

epyk.core.html.HtmlContainer.Panel

Tags:
Categories:

Usage:

Templates:

Parameters:

components – The different HTML objects to be added to the component.
title –
color – Optional. The font color in the component. Default inherit.
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).
helper – Optional. A tooltip helper.
options – Optional. Specific Python options available for this component.
profile – Optional. A flag to set the component performance storage.

popup(components: Optional[List[Html]] = None, width: Optional[Union[tuple, int, str]] = (100, '%'), height: Optional[Union[tuple, int, str]] = (None, 'px'), options: Optional[dict] = None, profile: Optional[Union[bool, dict]] = None) → Popup

Add a generic popup component to the page.

Tags:
Categories:

Usage:

popup = page.ui.layouts.popup(page.ui.title('Test'), color="red")
popup.add(page.ui.texts.paragraph('Test'))

Underlying HTML Objects:

epyk.core.html.HtmlPopup.Popup

Related Pages:

https://www.w3schools.com/tags/tag_div.asp

Templates:

Parameters:

components – The different HTML objects to be added 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.
options – Optional. Specific Python options available for this component.
profile – Optional. A flag to set the component performance storage.

row(components: Optional[List[Html]] = None, position: str = 'middle', width: Optional[Union[tuple, int, str]] = (100, '%'), height: Optional[Union[tuple, int, str]] = (None, 'px'), align: Optional[str] = None, helper: Optional[str] = None, options: Optional[dict] = None, profile: Optional[Union[bool, dict]] = None) → Row

Python wrapper for a column of HTML elements from Bootstrap.

This component is a container and it is used to display multiple Ares components in column. You can first add a component in the data list then add the + operator to add more.

Tags:
Categories:

Usage:

row = page.ui.layouts.row()
row += page.ui.layouts.col([
  page.ui.text("test A"),
  page.ui.text("test B"),
])

Underlying HTML Objects:

epyk.core.html.HtmlContainer.Row

Templates:

Related Pages:

https://getbootstrap.com/docs/4.0/layout/grid/ https://www.alsacreations.com/tuto/lire/1493-css3-flexbox-layout-module.html

Parameters:

components – The different HTML objects to be added to the component.
position – Optional. The CSS justify-content attribute
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.
align – Optional. A string with the horizontal position of the component.
helper – Optional. A tooltip helper.
options – Optional. Specific Python options available for this component.
profile – Optional. A flag to set the component performance storage.

section(components: Optional[List[Html]] = None, width: Optional[Union[tuple, int, str]] = (100, '%'), height: Optional[Union[tuple, int, str]] = (None, 'px'), html_code: Optional[str] = None, helper: Optional[str] = None, options: Optional[dict] = None, profile: Optional[Union[bool, dict]] = None) → Section

The <section> tag defines sections in a document, such as chapters, headers, footers, or any other sections of the document.

Tags:
Categories:

Usage:

div = page.ui.header([html])
div += html_2

Underlying HTML Objects:

epyk.core.html.HtmlContainer.Header

Related Pages:

https://www.w3schools.com/tags/tag_section.asp

Templates:

Parameters:

components – The different HTML objects to be added 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.
html_code – Optional. An identifier for this component (on both Python and Javascript side).
helper – Optional. A tooltip helper.
options – Optional. Specific Python options available for this component.
profile – Optional. A flag to set the component performance storage.

table(components: Optional[List[Html]] = None, width: Optional[Union[tuple, int, str]] = (100, '%'), height: Optional[Union[tuple, int, str]] = (None, 'px'), helper: Optional[str] = None, options: Optional[dict] = None, profile: Optional[Union[bool, dict]] = None) → Table

table layout for HTML components.

Tags:
Categories:

Usage:

row = page.ui.layouts.table()

Underlying HTML Objects:

epyk.core.html.HtmlContainer.Table

Templates:

Parameters:

components – The different HTML objects to be added 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.
helper – Optional. A tooltip helper.
options – Optional. Specific Python options available for this component.
profile – Optional. A flag to set the component performance storage.

underline(width: Optional[Union[tuple, int, str]] = (10, '%'), height: Optional[Union[tuple, int, str]] = (3, 'px'), align: Optional[str] = None, options: Optional[dict] = None, profile: Optional[Union[bool, dict]] = None) → Div

Add a styles hr component to underline another component.

Tags:
Categories:

Usage:

page.ui.layouts.underline()

Templates:

Parameters:

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.
align – Optional. The content position. Values (left, right, center). Default center.
options – Optional. Dictionary. Optional. Specific Python options available for this component.
profile – Optional. A flag to set the component performance storage.