HtmlButton Module

class epyk.core.html.HtmlButton.Button(page: PageModel, text: Optional[str] = None, icon: Optional[str] = None, width: Optional[tuple] = None, height: Optional[tuple] = None, html_code: Optional[str] = None, tooltip: Optional[str] = None, profile: Optional[Union[bool, dict]] = None, options: Optional[dict] = None)

color(color: str)

Change the color of the button background when the mouse is hover.

Usage:

page.ui.buttons.remove("remove").color("blue")

Parameters:: color – the color of the component (text and borders)

disable(background_color: Optional[str] = None, color: Optional[str] = None)

Add the HTML tag to disable the button.

Usage:

but = page.ui.button("Click Me")
but.disable()

Parameters:

background_color – Optional. An hexadecimal color code
color – Optional. A hexadecimal color code

Returns:

The htmlObj to allow the chaining

property dom: JsHtmlButton

Return all the Javascript functions defined for an HTML Component.

Those functions will use plain javascript available for a DOM element by default.

Usage:

but = page.ui.button("Click Me")
page.js.console.log(but.dom.content)

error(status: bool = True, label: Optional[str] = None, data: Optional[Union[str, JsDataModel, float, dict, list, bool]] = None, disable: bool = True)

Display an error message in the component.

Usage:

btn.click([
    t.error(True, label="`Error: ${data.result}`", data={"result": "Wrong Parameter"}),
])

Parameters:

status – The message status (true is active)
label – The message template
data – The message parameter to feed the template
disable – Disable the button

goto(url: str, js_funcs: Optional[Union[List[Union[str, JsDataModel]], str]] = None, profile: Optional[Union[bool, dict]] = None, target: str = '_blank', source_event: Optional[str] = None)

Click event which redirect to another page.

Usage:

but = page.ui.button("Click Me")
but.goto("http://www.epyk-studio.com")

# Create a link to a page within the same tab
button2 = page.ui.button("Go go Google")
button2.goto("www.google.fr", target="_self")

Parameters:

url – The destination path
js_funcs – The Javascript Events triggered before the redirection
profile – Optional. A flag to set the component performance storage
target – Optional. The type of link to the next page
source_event – Optional. The event source

loading(status: bool = True, label: Optional[str] = None, data: Optional[Union[str, JsDataModel, float, dict, list, bool]] = None, disable: bool = True)

Display a loading message in the component.

Usage:

btn.click([
    t.loading(True, label="`Loading: ${data.result}`", data={"result": "Waiting for response"}),
])

Parameters:

status – The message status (true is active)
label – The message template
data – The message parameter to feed the template
disable – Disable the button

no_background()

Remove the default button background and remove the padding.

Usage:

but = page.ui.button("Click Me")
but.no_background()

property options: OptionsButton

Property to set all the possible object for a button.

Usage:

but = page.ui.button("Click Me")
but.options.multiple = False

press(js_press_funcs: Optional[Union[List[Union[str, JsDataModel]], str]] = None, js_release_funcs: Optional[Union[List[Union[str, JsDataModel]], str]] = None, profile: Optional[Union[bool, dict]] = None, pressed_class: Optional[str] = None, on_ready: bool = False)

Special click event to keep in memory the state of the component.

Usage:

but = page.ui.button("Click Me")

Parameters:

js_press_funcs – Optional. Javascript functions
js_release_funcs – Optional. Javascript functions
profile – Optional. A flag to set the component performance storage
pressed_class – Optional. The CSS class when component’s status is pressed
on_ready – Optional. Event when component is ready on HTML side

properties() → dict

Return the full properties of the HTML component.

This property should allow another JavaScript framework to build the component.

Usage:

but = page.ui.button("Click Me")
but.properties

property style: ClassButton

Property to the CSS Style of the component.

Usage:

but = page.ui.button("Click Me")
but.style.css.margin = "5px"

class epyk.core.html.HtmlButton.ButtonData(page: PageModel, text: Optional[str] = None, icon: Optional[str] = None, width: Optional[tuple] = None, height: Optional[tuple] = None, html_code: Optional[str] = None, tooltip: Optional[str] = None, profile=None, options: Optional[dict] = None)

class epyk.core.html.HtmlButton.ButtonFilter(page: PageModel, text: str, width: tuple, height: tuple, html_code: str, tooltip: str, profile: Optional[Union[bool, dict]], options: Optional[dict])

property dom: JsHtmlButtonFilter

Return all the Javascript functions defined for an HTML Component.

Those functions will use plain javascript available for a DOM element by default.

Usage:

but = page.ui.button("Click Me")
page.js.console.log(but.dom.content)

property options: OptionsButtonFilter

Property to set all the possible object for a button.

Usage:

but = page.ui.button("Click Me")
but.options.multiple = False

class epyk.core.html.HtmlButton.ButtonMenu(page: PageModel, record, text: str, icon: Optional[str], width: Optional[tuple], height: Optional[tuple], html_code: Optional[str], tooltip: Optional[str], profile: Optional[Union[bool, dict]], options: Optional[dict])

property options: OptionsButtonMenu

Property to set all the possible object for a button.

Usage:

but = page.ui.button("Click Me")
but.options.multiple = False

property style: ClassButtonMenu

Property to the CSS Style of the component.

Usage:

self.style.css.margin = "5px"

class epyk.core.html.HtmlButton.ButtonMenuItem(page: PageModel, component_id: str, container: Html)

click(js_funcs: Union[List[Union[str, JsDataModel]], str], profile: Optional[Union[bool, dict]] = None, source_event: Optional[str] = None, on_ready: bool = False)

Javascript click events of the items in the menu.

Parameters:

js_funcs – The Javascript functions
profile – Boolean. Optional. A flag to set the component performance storage
source_event – Optional. Override the source component on which the component is defined
on_ready – Boolean. Optional. Specify if the event needs to be trigger when the page is loaded

property js: Menu

Javascript module of the items in the menu.

Returns:: A Javascript Dom object

on(event: str, js_funcs: Union[List[Union[str, JsDataModel]], str], profile: Optional[Union[bool, dict]] = None, source_event: Optional[str] = None, on_ready: bool = False)

Javascript generic events of the items in the menu.

Parameters:

event – The JavaScript event
js_funcs – The Javascript functions
profile – Optional. A flag to set the component performance storage
source_event – Optional. Override the source component on which the component is defined
on_ready – Optional. Specify if the event needs to be trigger when the page is loaded

class epyk.core.html.HtmlButton.ButtonMore(page: PageModel, record, text: Optional[str], width: Optional[tuple], height: Optional[tuple], html_code: Optional[str], tooltip: Optional[str], profile: Optional[Union[bool, dict]], options: Optional[dict])

click(js_funcs: Union[List[Union[str, JsDataModel]], str], profile: Optional[Union[bool, dict]] = None, source_event: Optional[str] = None, on_ready: bool = False)

Add an event click to the component.

Usage:

b = page.studio.buttons.more([
  {"text": "Item 1"},
  {"text": "Item 2"},
], profile=True)

b.click([page.js.console.log("test")])

Parameters:

js_funcs – A Javascript Python function
profile – Optional. Set to true to get the profile for the function on the Javascript console
source_event – Optional. The source target for the event
on_ready – Optional. Specify if the event needs to be trigger when the page is loaded

class epyk.core.html.HtmlButton.Buttons(page: PageModel, data, color: Optional[str], width: tuple, height: tuple, html_code: Optional[str], helper: Optional[str], options: Optional[dict], profile: Optional[Union[bool, dict]])

class epyk.core.html.HtmlButton.CheckButton(page: PageModel, flag: bool = False, tooltip: Optional[str] = None, width: Optional[tuple] = None, height: Optional[tuple] = None, icon: Optional[str] = None, label: Optional[str] = None, html_code: Optional[str] = None, options: Optional[dict] = None, profile: Optional[Union[bool, dict]] = None)

click(js_fnc_true: Union[List[Union[str, JsDataModel]], str], js_fnc_false: Optional[Union[list, str]] = None, with_colors: bool = True, profile: Optional[Union[bool, dict]] = None, on_ready: bool = False)

Click even on the checkbox item.

Usage:

ch = page.ui.buttons.check(label="Label")
ch.click(page.js.alert("true"), page.js.alert("false"))

Parameters:

js_fnc_true – Js function or a list of JsFunction to be triggered when checked
js_fnc_false – Optional. Js function or a list of JsFunction to be triggered when unchecked
with_colors – Optional. Add default colors to the icons
profile – Optional. A flag to set the component performance storage
on_ready – Optional. Specify if the event needs to be trigger when the page is loaded

Returns:

The component to allow the chaining

property dom: JsHtmlButtonMenu: The Javascript Dom object.

property js: CheckButton

The Javascript functions defined for this component.

Those can be specific ones for the module or generic ones from the language.

Returns:: A Javascript Dom object

property options: OptCheck: Property to set all the possible object for check button.

property style: ClassButtonCheckBox: Property to the CSS Style of the component.

class epyk.core.html.HtmlButton.Checkbox(page: PageModel, records, color: Optional[str], width: Optional[tuple], height: Optional[tuple], align: Optional[str], html_code: Optional[str], tooltip: Optional[str], options: Optional[dict], profile: Optional[Union[bool, dict]])

click(js_funcs: Union[list, str], profile: Optional[Union[bool, dict]] = None, source_event: str = '$(document)', on_ready: bool = False)

Add a click event on the checkbox component.

TODO: Find way to remove jquery

Parameters:

js_funcs – Javascript functions
profile – Optional. A flag to set the component performance storage
source_event – Optional. The source target for the event
on_ready – Optional. Specify if the event needs to be trigger when the page is loaded

property dom: JsHtmlButtonChecks

Return all the Javascript functions defined for an HTML Component.

Those functions will use plain javascript available for a DOM element by default.

Usage:

data = [
  {"value": "Test 1", "checked": True, "name": 'name'},
  {"value": "Test 2", "dsc": 'description'},
]
cb = page.ui.buttons.checkboxes(data)

b = page.ui.button("Add")
b.click([cb.dom.add([{"value": "test"}])])

property options: OptCheckboxes: Property to set all the possible object for check boxes.

tooltip(value: Optional[str], location: str = 'top', options: Optional[dict] = None)

Add the Tooltip feature when the mouse is over the component.

This tooltip version is coming from Bootstrap.

TODO: Use the options parameter.

Usage:

check = page.ui.buttons.check()
check.tooltip("Tooltip")

Parameters:

value – The tooltip value
location – Optional. The location of the tooltip compared to the HTML component
options – Optional. The tooltip options (not used yet)

class epyk.core.html.HtmlButton.IconEdit(page: PageModel, position, icon: Optional[str], text: Optional[str], tooltip: Optional[str], width, height, html_code, options, profile: Optional[Union[bool, dict]])

border()

Add a border to the icon.

Usage:

icon = page.ui.icons.awesome("")
icon.border()

Related Pages:

https://fontawesome.com/how-to-use/on-the-web/styling/bordered-pulled-icons

click(js_funcs: Union[List[Union[str, JsDataModel]], str], profile: Optional[Union[bool, dict]] = None, source_event: Optional[str] = None, on_ready: bool = False)

Add a JavaScript click event on this component.

Parameters:

js_funcs – The Javascript functions
profile – Optional. A flag to set the component performance storage
source_event – Optional. The source target for the event
on_ready – Optional. Specify if the event needs to be trigger when the page is loaded

goto(url: str, js_funcs: Optional[Union[List[Union[str, JsDataModel]], str]] = None, profile: Optional[Union[bool, dict]] = None, target: str = '_blank', source_event: Optional[str] = None)

Create a link to a new page when component is clicked.

Related Pages:

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

Parameters:

url – The target url
js_funcs – Optional. Javascript functions
target – Optional. The type of link in the browser (new tab or same one)
profile – Optional. A flag to set the component performance storage
source_event – Optional. The event source reference

press(js_press_funcs: Optional[Union[List[Union[str, JsDataModel]], str]] = None, js_release_funcs: Optional[Union[List[Union[str, JsDataModel]], str]] = None, profile: Optional[Union[bool, dict]] = None, pressed_class: Optional[str] = None, on_ready: bool = False)

Special click event to keep in memory the state of the component.

Parameters:

js_press_funcs – Optional. Javascript functions
js_release_funcs – Optional. Javascript functions
profile – Optional. A flag to set the component performance storage
pressed_class – Optional. The CSS class when component’s status is pressed
on_ready – Optional. Event when component is ready on HTML side

pull(position: str = 'left')

Use fa-border and fa-pull-right or fa-pull-left for easy pull quotes or article icons.

Usage:

icon = page.ui.icons.awesome("")
icon.pull()

Related Pages:

https://fontawesome.com/how-to-use/on-the-web/styling/bordered-pulled-icons

Parameters:: position – Optional. The position of the icon in the page

pulse()

Add a pulse effect to the icon.

Usage:

icon = page.ui.icons.awesome("")
icon.pulse()

Related Pages:

https://fontawesome.com/how-to-use/on-the-web/styling/animating-icons

rotate(angle: int)

To arbitrarily rotate and flip icons, use the fa-rotate-* and fa-flip-* classes when you reference an icon.

Usage:

icon = page.ui.icons.awesome("")
icon.rotate(90)

Related Pages:

https://fontawesome.com/how-to-use/on-the-web/styling/rotating-icons

Parameters:: angle – The rotation angle

spin()

Add a spin effect to the icon.

Usage:

icon = page.ui.icons.awesome("")
icon.spin()

Related Pages:

https://fontawesome.com/how-to-use/on-the-web/styling/animating-icons