Menus Interface

class epyk.interfaces.components.CompMenus.Menus(ui)

bar(data=None, align: str = 'left', position: str = 'top', color: Optional[str] = None, width: Union[tuple, int] = (350, 'px'), height: Union[tuple, int] = (None, 'px'), options: Optional[dict] = None, profile: Optional[Union[bool, dict]] = None)

Usage:

page.ui.menus.bar([
  {"value": "File", "children": [
    {"url": "Test", "text": "Test"}
  ]}
])

Underlying HTML Objects:

epyk.core.html.HtmlContainer.Div

epyk.core.html.HtmlContainer.Col

epyk.core.html.HtmlContainer.Grid

epyk.core.html.HtmlText.Title

epyk.core.html.HtmlList.List

Related Pages:

https://www.w3schools.com/bootstrap/bootstrap_list_groups.asp http://astronautweb.co/snippet/font-awesome/

Parameters:

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

bottom(data: Optional[List[dict]] = None, color: Optional[str] = None, width: Union[tuple, int] = (100, '%'), height: Union[tuple, int] = (30, 'px'), html_code: Optional[str] = None, helper: Optional[str] = None, options: Optional[dict] = None, profile: Optional[Union[bool, dict]] = None)

Add a menu item at the bottom of the page. The menu will be fixed on the page, always visible.

Usage:

page.ui.menus.bottom([{"value": "Menu 1", 'children': ["Item 1", "Item 2"]},"Menu 1 2"])

Underlying HTML Objects:

epyk.core.html.HtmlContainer.Div

epyk.core.html.HtmlContainer.Col

epyk.core.html.HtmlText.Title

epyk.core.html.HtmlList.List

Related Pages:

https://www.w3schools.com/bootstrap/bootstrap_list_groups.asp http://astronautweb.co/snippet/font-awesome/

Parameters:

data – Optional. The top menu values
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

button(value, components: Union[Html, List[Html]], symbol: Optional[str] = None, width: Union[tuple, int] = ('auto', ''), height: Union[tuple, int] = (None, 'px'), options: Optional[dict] = None, profile: Union[bool, dict] = False)

Usage:

mb = page.ui.menus.button("Value", page.ui.button("sub button"))
mb.items[0].click([page.js.alert(mb.items[0].dom.content)])

Underlying HTML Objects:

epyk.core.html.HtmlContainer.Div

epyk.core.html.HtmlButton.Button

Parameters:

value –
components –
symbol –
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

buttons(data: Optional[list] = None, color: Optional[str] = None, width: Union[tuple, int] = (100, '%'), height: Union[tuple, int] = (None, 'px'), html_code: Optional[str] = None, helper: Optional[str] = None, options: Optional[dict] = None, profile: Optional[Union[bool, dict]] = None)

Usage:

bs = page.ui.buttons.buttons(["Button", "Button 2", "Button 3"])
bs[2].click([
  page.js.alert(bs[2].dom.content)
])

Underlying HTML Objects:

epyk.core.html.HtmlButton.Buttons

Parameters:

data –
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

contextual(record: Optional[list] = None, width: Union[tuple, int] = (None, '%'), height: Union[tuple, int] = (None, 'px'), html_code: Optional[str] = None, visible: bool = False, options: Optional[dict] = None, profile: Optional[Union[bool, dict]] = None)

Set a bespoke Context Menu on an Item. This will create a popup on the page with action. This component is generic is need to be added to a component to work.

Usage:

menu = page.ui.contextual([{"text": 'text', 'event': 'alert("ok")'}])
page.ui.title("Test").attach_menu(menu)

Templates:

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

Parameters:

record – 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
html_code – Optional. An identifier for this component (on both Python and Javascript side)
visible – Optional.
options – Optional. Specific Python options available for this component
profile – Optional. A flag to set the component performance storage

divisor(data, divider: Optional[bool] = None, width: Union[tuple, int] = (100, '%'), height: Union[tuple, int] = (None, 'px'), options: Optional[dict] = None, profile: Union[bool, dict] = False)

Add list of items separated by a symbol (default BLACK_RIGHT_POINTING_TRIANGLE). The components will be based on Links.

Usage:

record = []
page.ui.menus.divisor(record)

Underlying HTML Objects:

epyk.core.html.HtmlContainer.Div

epyk.core.html.HtmlText.link

Parameters:

data –
divider – symbols.shape | String. The symbol between the links.
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
options – Dictionary. Optional. Specific Python options available for this component
profile – Boolean | Dictionary. Optional. A flag to set the component performance storage

icons(data: Optional[List[Union[str, dict]]] = None, width=(100, '%'), height: Union[tuple, int] = (None, 'px'), align: str = 'center', options: Optional[dict] = None, profile: Union[bool, dict] = False)

Add a menu bar with font awesome icons.

Usage:

icons = page.ui.menus.icons([
    "bi-1-circle-fill",
    "bi-search-heart-fill",
    "bi-x-circle-fill",
], options={"icon_family": "bootstrap-icons"})

Parameters:

data – Optional. Parameter bar icons
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
options – Optional. Specific Python options available for this component
profile – Optional. A flag to set the component performance storage

images(data: Optional[list] = None, path: Optional[str] = None, width: Union[tuple, int] = (100, '%'), height: Union[tuple, int] = (None, 'px'), align: str = 'center', options: Optional[dict] = None, profile: Union[bool, dict] = False)

Usage:

page.ui.menus.images(["https://jupyter.org/favicon.ico", "https://codepen.io//favicon.ico"])

Parameters:

path –
data –
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 text-align property within this component
options – Optional. Specific Python options available for this component
profile – Optional. A flag to set the component performance storage

menu(data: Optional[list] = None, color: Optional[str] = None, width: Union[tuple, int] = (100, '%'), height: Union[tuple, int] = (None, 'px'), html_code: Optional[str] = None, helper: Optional[str] = None, options: Optional[dict] = None, profile: Optional[Union[bool, dict]] = None)

Usage:

page.ui.menus.menu([
  {"value": "File", "children": [
    {"url": "Test", "text": "Test"}
  ]}
])

Underlying HTML Objects:

epyk.core.html.HtmlContainer.Div

epyk.core.html.HtmlContainer.Col

epyk.core.html.HtmlContainer.Grid

epyk.core.html.HtmlText.Title

epyk.core.html.HtmlList.List

Related Pages:

https://www.w3schools.com/bootstrap/bootstrap_list_groups.asp http://astronautweb.co/snippet/font-awesome/

Parameters:

data –
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

pills(data: Optional[List] = None, width: Union[tuple, int] = (100, '%'), height: Union[tuple, int] = (50, 'px'), html_code: Optional[str] = None, helper: Optional[str] = None, options: Optional[dict] = None, profile: Union[bool, dict] = False)

Usage:

page.ui.pills.

Parameters:

data – 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
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

right(data=None, color: Optional[str] = None, width: Union[tuple, int] = (100, '%'), height: Union[tuple, int] = (30, 'px'), html_code: Optional[str] = None, helper: Optional[str] = None, options: Optional[dict] = None, profile: Optional[Union[bool, dict]] = None)

Usage:

page.ui.lists.

Parameters:

data –
color –
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 –
helper –
options – Optional. Specific Python options available for this component
profile – Optional. A flag to set the component performance storage

selections(data, width=(150, 'px'), height=('auto', ''), html_code: Optional[str] = None, helper: Optional[str] = None, options: Optional[dict] = None, profile: Optional[Union[bool, dict]] = None)

Menu using Jquery UI external module.

Usage:

page.ui.menus.selections(["Item 1", "Item 2"])

page.ui.menus.selections([
  {'value': "fas fa-exclamation-triangle", 'items': [
    {"value": 'value 1'},
    {"value": 'value 2'},
    {"value": 'value 3'},
  ]},
    "fas fa-exclamation-triangle"])

Underlying HTML Objects:

epyk.core.html.HtmlEvent.Menu

Related Pages:

https://jqueryui.com/menu/

Parameters:

data –
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

toolbar(data: Optional[list] = None, width: Union[tuple, int] = ('auto', ''), height: Union[tuple, int] = (None, 'px'), options: Optional[dict] = None, profile: Union[bool, dict] = False)

Usage:

tb = page.ui.menus.toolbar(["fas fa-paint-brush", "fas fa-code"])
tb[1].link.val = 4589
tb[1].tooltip("This is a tooltip")
tb[0].style.css.color = 'red'

# with other icon families
page.ui.menus.toolbar(["face"], options={"icon_family": 'material-design-icons'})
page.ui.menus.toolbar(["Mail", "AdminALogo32"], options={"icon_family": 'office-ui-fabric-core'})

Underlying HTML Objects:

epyk.core.html.HtmlContainer.Div

epyk.core.html.HtmlImage.Badge

Parameters:

data – Optional. The list of icons
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

top(data: Optional[List[dict]] = None, color: Optional[str] = None, width: Union[tuple, int] = (100, '%'), height: Union[tuple, int] = (30, 'px'), html_code: Optional[str] = None, helper: Optional[str] = None, options: Optional[dict] = None, profile: Optional[Union[bool, dict]] = None)

Add a menu item at the top of the page. The menu will be fixed on the page, always visible

Usage:

page.ui.menus.top([{"value": "Menu 1", 'children': ["Item 1", "Item 2"]},"Menu 1 2"])

Underlying HTML Objects:

epyk.core.html.HtmlContainer.Div

epyk.core.html.HtmlContainer.Col

epyk.core.html.HtmlContainer.Grid

epyk.core.html.HtmlText.Title

epyk.core.html.HtmlList.List

Related Pages:

https://www.w3schools.com/bootstrap/bootstrap_list_groups.asp http://astronautweb.co/snippet/font-awesome/

Parameters:

data – Optional. The top menu values
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