def colored(self,
text,
url,
icon=None,
helper=None,
color=None,
height=(None, 'px'),
decoration=False,
htmlCode=None,
options=None,
profile=None):
"""
Description:
------------
Display a link with the same layout than a buttons.colored HTML component
Attributes:
----------
:param text: The string value to be displayed in the component
:param url: The string url of the link
:param icon: Optional. A string with the value of the icon to display from font-awesome
:param helper: String. Optional. A tooltip helper
:param color:
:param height: Tuple. Optional. A tuple with the integer for the component height and its unit
:param decoration:
:param htmlCode:
:param options: Optional. Specific Python options available for this component
:param profile: Optional. A flag to set the component performance storage
"""
height = Arguments.size(height, unit="px")
dft_options = {"target": '_blank'}
if options is not None:
dft_options.update(options)
html_link = html.HtmlLinks.ExternalLink(self.context.rptObj, text, url,
icon, helper, height,
decoration, htmlCode,
dft_options, profile)
html_link.style.add_classes.button.basic()
html_link.style.css.padding = "0 10px"
html_link.style.css.background = color or self.context.rptObj.theme.colors[
-1]
html_link.style.css.border = "1px solid %s" % (
color or self.context.rptObj.theme.colors[-1])
html_link.icon.style.css.color = self.context.rptObj.theme.colors[0]
html_link.style.css.color = self.context.rptObj.theme.colors[0]
html_link.style.css.margin_top = 5
html_link.style.css.line_height = Defaults_html.LINE_HEIGHT
html_link.style.css.margin_bottom = 5
return html_link
def date(self,
value,
min=None,
max=None,
width=(100, '%'),
height=(20, 'px'),
htmlCode=None,
attrs=None,
helper=None,
options=None,
profile=None):
"""
Underlying HTML Objects:
- :class:`epyk.core.html.HtmlEvent.SliderDate`
:param value:
:param min:
:param max:
:param width:
:param height:
:param htmlCode:
:param attrs:
:param helper:
:param options:
:param profile:
"""
width = Arguments.size(width, unit="%")
height = Arguments.size(height, unit="px")
options = options or {}
html_slider = html.HtmlEvent.SliderDate(self.context.rptObj, value,
min, max, width, height, attrs
or {}, helper, options or {},
htmlCode, profile)
return html_slider
def code(self, language, text="", color=None, width=(90, '%'), height=(200, 'px'), htmlCode=None, options=None, helper=None, profile=None):
"""
Description:
------------
Generic code editor
Underlying HTML Objects:
- :class:`epyk.core.html.HtmlTextEditor.Code`
Related Pages:
https://codemirror.net/index.html
Usage::
Attributes:
----------
:param language: String. The language
:param text: String. The text
:param color: String. The color code
:param width: Tuple. The with details in the format(value, unit)
:param height: Tuple. The height details in the format(value, unit)
:param htmlCode: String. The unique component ID
:param options: Dictionary. The object properties
:param helper: String. Optional. The helper message
:param profile: Boolean or Dictionary. Optional. A flag to set the component performance storage
"""
width = Arguments.size(width, unit="%")
height = Arguments.size(height, unit="px")
dflt_options = {"lineNumbers": True, 'mode': language, 'autoRefresh': True, 'styleActiveLine': True}
if options is not None:
dflt_options.update(options)
html_code = html.HtmlTextEditor.Code(self.context.rptObj, text, color, width, height, htmlCode, dflt_options, helper, profile)
return html_code
def paths(self,
paths,
fill=None,
stroke=None,
width=(33, "px"),
height=(25, "px"),
viewbox=(150, 100)):
"""
Description:
------------
Usage::
Attributes:
----------
:param paths:
:param fill:
:param stroke:
:param width: Tuple. Optional. A tuple with the integer for the component width and its unit.
:param height: Tuple. Optional. A tuple with the integer for the component height and its unit.
:param viewbox:
"""
width = Arguments.size(width, unit='px')
height = Arguments.size(height, unit="px")
html_svg = graph.GraphSvg.SVG(self.page,
width=(viewbox[0], "px"),
height=(viewbox[1], "px"))
html_svg.style.css.width = width[0]
html_svg.style.css.height = height[0]
for path in paths:
x, y = path.split(",", 1)
html_svg.path(fill=fill or self.page.theme.greys[-1],
stroke=stroke,
x=x[1:] if x.startswith("M") else x,
y=y)
return html_svg
def radios(self, data=None, group_name: str = 'group', width=('auto', ""), height=(None, "px"), html_code: str = None,
helper: str = None, options: dict = None, profile: Union[bool, dict] = None):
"""
Description:
------------
Usage::
page.ui.lists
Underlying HTML Objects:
- :class:`epyk.core.html.HtmlContainer.Div`
- :class:`epyk.core.html.HtmlInput.Radio`
Attributes:
----------
:param data:
:param group_name:
:param width: Tuple. Optional. A tuple with the integer for the component width and its unit
:param height: Tuple. Optional. A tuple with the integer for the component height and its unit
:param html_code: String. Optional. An identifier for this component (on both Python and Javascript side)
:param helper: String. Optional. A tooltip helper
:param options: Dictionary. Optional. Specific Python options available for this component
:param profile: Boolean or Dictionary. Optional. A flag to set the component performance storage
"""
width = Arguments.size(width, unit="%")
height = Arguments.size(height, unit="px")
dft_options = {"items_type": 'radio'}
if options is not None:
dft_options.update(options)
html_list = html.HtmlList.Items(self.page, data or [], width, height, dft_options, html_code, profile, helper)
html_list.options.group = group_name
html_list.css({"list-style": 'none'})
html.Html.set_component_skin(html_list)
return html_list
def contextual(self,
records=None,
width=(None, '%'),
height=(None, 'px'),
visible=False,
options=None,
profile=None):
"""
Description:
------------
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 = rptObj.ui.contextual([{"text": 'text', 'event': 'alert("ok")'}])
rptObj.ui.title("Test").attach_menu(menu)
Templates:
https://github.com/epykure/epyk-templates/blob/master/locals/components/contextmenu.py
Attributes:
----------
:param records: Optional.
: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 visible: Optional.
:param profile: Optional. A flag to set the component performance storage
"""
width = Arguments.size(width, unit="%")
height = Arguments.size(height, unit="px")
html_menu = html.HtmlMenu.ContextMenu(self.context.rptObj, records
or [], width, height, visible,
options or {}, profile)
return html_menu
def dialogs(self, text="", width=(100, '%'), height=(20, 'px'), html_code: str = None, helper: str = None,
options: dict = None, profile: Union[bool, dict] = None):
"""
Description:
------------
Simple Jquery UI modal with a text.
:tags:
:categories:
Underlying HTML Objects:
- :class:`epyk.core.html.HtmlEvent.Dialog`
Related Pages:
https://jqueryui.com/dialog/
Usage::
Attributes:
----------
:param text: String. Optional. The value to be displayed to the component.
:param width: Tuple. Optional. A tuple with the integer for the component width and its unit.
:param height: Tuple. Optional. A tuple with the integer for the component height and its unit.
:param html_code: String. Optional. An identifier for this component (on both Python and Javascript side).
:param helper: String. Optional. A tooltip helper.
:param options: Dictionary. Optional. Specific Python options available for this component.
:param profile: Boolean or Dictionary. Optional. A flag to set the component performance storage.
"""
width = Arguments.size(width, unit="%")
height = Arguments.size(height, unit="px")
component = html.HtmlEvent.Dialog(self.page, text, width, height, helper, options or {}, html_code, profile)
html.Html.set_component_skin(component)
return component
def checkbox(self, flag, label="", group_name=None, width=(None, "%"), height=(None, "px"), htmlCode=None, options=None, attrs=None, profile=None):
"""
Description:
------------
Usage::
rptObj.ui.inputs.checkbox(False)
Underlying HTML Objects:
- :class:`epyk.core.html.HtmlInput.Checkbox`
Templates:
https://github.com/epykure/epyk-templates/blob/master/locals/components/checkbox.py
Attributes:
----------
:param flag:
:param label:
:param group_name:
:param width:
:param height:
:param htmlCode:
:param options:
:param attrs:
:param profile:
"""
width = Arguments.size(width, unit="%")
height = Arguments.size(height, unit="px")
options = options or {}
attrs = attrs or {}
html_coech = html.HtmlInput.Checkbox(self.context.rptObj, flag, label, group_name, width, height, htmlCode,
options, attrs, profile)
return html_coech
def fabric(self, profile=None, width=(100, "%"), height=(330, "px"), options=None, html_code=None):
"""
Description:
------------
:tags:
:categories:
Usage::
Attributes:
----------
:param profile: Boolean | Dictionary. Optional. A flag to set the component performance storage.
:param width: Tuple. Optional. A tuple with the integer for the component width and its unit.
:param height: Tuple. Optional. A tuple with the integer for the component height and its unit.
:param options: Dictionary. Optional. Specific Python options available for this component.
:param html_code: String. Optional. An identifier for this component (on both Python and Javascript side).
"""
options = options or {}
width = Arguments.size(width, unit="%")
height = Arguments.size(height, unit="px")
options.update({'y_columns': [], 'x_axis': "", 'commons': {"opacity": self.opacity}})
component = graph.GraphChartJs.Fabric(self.page, width, height, html_code, options, profile)
return component
def data(self,
text: str,
value,
width=(None, '%'),
height=(None, 'px'),
fmt: str = 'txt',
options: dict = None,
profile: Union[bool, dict] = None):
"""
Description:
------------
Python interface to the Hyperlink to retrieve data.
Usage::
data_link = page.ui.links.data("link", "test#data")
data_link.build({"text": 'new link Name', 'data': "new content"})
Underlying HTML Objects:
- :class:`epyk.core.html.HtmlLinks.DataLink`
Templates:
https://github.com/epykure/epyk-templates/blob/master/locals/components/links.py
Attributes:
----------
:param text: String. The string value to be displayed in the component
:param value: String. The value to be displayed to this component.
:param width: Tuple. Optional. A tuple with the integer for the component width and its unit.
:param height: Tuple. Optional. A tuple with the integer for the component height and its unit.
:param fmt: String. Optional. The downloaded data format.
:param options: Dictionary. Optional. Specific Python options available for this component
:param profile: Boolean | Dictionary. Optional. A flag to set the component performance storag.e
"""
height = Arguments.size(height, unit="px")
html_data = html.HtmlLinks.DataLink(self.page,
text,
value,
width=width,
height=height,
fmt=fmt,
options=options,
profile=profile)
html.Html.set_component_skin(html_data)
return html_data
def button(self,
text,
url,
icon=None,
helper=None,
height=(None, 'px'),
decoration=False,
htmlCode=None,
options=None,
profile=None):
"""
Description:
------------
Underlying HTML Objects:
- :class:`epyk.core.html.HtmlLinks.ExternalLink`
Templates:
https://github.com/epykure/epyk-templates/blob/master/locals/components/links.py
Attributes:
----------
:param text:
:param url: String. The destination page when clicked
:param icon: String. Optional. The component icon content from font-awesome references
:param helper: String. Optional. A tooltip helper
:param height: Tuple. Optional. A tuple with the integer for the component height and its unit
:param decoration:
:param options: Dictionary. Optional. Specific Python options available for this component
:param profile: Boolean or Dictionary. Optional. A flag to set the component performance storage
"""
height = Arguments.size(height, unit="px")
dft_options = {"target": '_blank'}
if options is not None:
dft_options.update(options)
html_link = html.HtmlLinks.ExternalLink(self.context.rptObj, text, url,
icon, helper, height,
decoration, htmlCode,
dft_options, profile)
html_link.style.add_classes.button.basic()
html_link.style.css.padding = "0 10px"
return html_link
def data(self,
text,
value,
width=(None, '%'),
height=(None, 'px'),
format='txt',
profile=None):
"""
Description:
------------
Python interface to the Hyperlink to retrieve data
Usage::
data_link = rptObj.ui.links.data("link", "test#data")
data_link.build({"text": 'new link Name', 'data': "new content"})
Underlying HTML Objects:
- :class:`epyk.core.html.HtmlLinks.DataLink`
Templates:
https://github.com/epykure/epyk-templates/blob/master/locals/components/links.py
Attributes:
----------
:param text: String. The string value to be displayed in the component
:param value: String. The value to be displayed to this component.
:param width: Tuple. Optional. A tuple with the integer for the component width and its unit
:param height: Tuple. Optional. A tuple with the integer for the component height and its unit
:param format: String. Optional. The downloaded data format
:param profile: Boolean or Dictionary. Optional. A flag to set the component performance storage
"""
height = Arguments.size(height, unit="px")
html_data = html.HtmlLinks.DataLink(self.context.rptObj,
text,
value,
width=width,
height=height,
format=format,
profile=profile)
return html_data
def formula(self,
text=None,
width=(100, "%"),
color=None,
helper=None,
profile=None):
"""
Description:
------------
Interface to the mathjax Formulas object
Usage::
rptObj.ui.texts.formula("$$x = {-b \pm \sqrt{b^2-4ac} \over 2a}.$$", helper="This is a formula")
Underlying HTML Objects:
- :class:`epyk.core.html.HtmlTextComp.Formula`
Related Pages:
https://mathjax.org/docs/index.html
Attributes:
----------
:param text: Optional. The string value to be displayed in the component
:param width: Optional. A tuple with the integer for the component width and its unit
:param color: Optional. The color of the text
:param helper:
:param profile: Optional. A flag to set the component performance storage
"""
width = Arguments.size(width, unit="%")
html_formula = html.HtmlTextComp.Formula(self.context.rptObj, text,
width, color, helper, profile)
return html_formula
def bubble(self,
records=None,
width: Union[tuple, int] = (70, "px"),
height: Union[tuple, int] = ("auto", ''),
color: str = None,
background_color: str = None,
helper: str = None,
options: dict = None,
profile: Union[dict, bool] = None):
"""
Description:
------------
The bubbles event property returns a Boolean value that indicates whether or not an event is a bubbling event.
Event bubbling directs an event to its intended target, it works like this:
A button is clicked and the event is directed to the button
If an event handler is set for that object, the event is triggered.
If no event handler is set for that object, the event bubbles up (like a bubble in water) to the objects parent.
The event bubbles up from parent to parent until it is handled, or until it reaches the document object.
:tags:
:categories:
Usage::
page.ui.vignets.bubble({"value": 23, "title": "Title"}, helper="This is a helper")
Underlying HTML Objects:
- :class:`epyk.core.html.HtmlText.Text`
- :class:`epyk.core.html.HtmlContainer.Div`
- :class:`epyk.core.html.HtmlLinks.ExternalLink`
Related Pages:
https://www.w3schools.com/jsref/event_bubbles.asp
Attributes:
----------
:param records: List. Optional. The list of dictionaries.
:param width: Tuple. Optional. A tuple with the integer for the component width and its unit.
:param height: Tuple. Optional. A tuple with the integer for the component height and its unit.
:param color: String. Optional. The font color in the component. Default inherit.
:param background_color: String. Optional. The hexadecimal color code.
:param helper: String. Optional. The value to be displayed to the helper icon.
:param options: Dictionary. Optional. Specific Python options available for this component.
:param profile: Boolean | Dictionary. Optional. A flag to set the component performance storage.
"""
width = Arguments.size(width, unit="px")
height = Arguments.size(height, unit="px")
div = self.page.ui.div(width=width,
height=height,
profile=profile,
options=options)
div.style.css.position = "relative"
bubble = self.page.ui.div(width=width,
height=width,
profile=profile,
helper=helper)
if helper is not None:
bubble.helper.style.css.right = 0
bubble.helper.style.css.bottom = 0
div.number = self.page.ui.text(records["value"], width=width)
if records.get("url") is not None:
div.title = self.page.ui.link(records["title"],
url=records['url'],
profile=profile)
div.title.no_decoration()
else:
div.title = self.page.ui.text(records["title"])
div.title.style.css.bold()
div.number.style.css.line_height = width[0]
div.number.style.css.text_align = "center"
div.number.style.css.font_size = width[0] - 45
bubble += div.number
bubble.style.css.background_color = background_color or self.page.theme.colors[
-1]
bubble.style.css.color = color or self.page.theme.greys[0]
bubble.style.css.borders_light()
bubble.style.css.border_radius = width[0]
bubble.style.css.middle()
div.style.css.text_align = "center"
div += bubble
div += div.title
html.Html.set_component_skin(div)
return div
def number(self,
number: float,
label: str = "",
title: str = None,
align: str = "center",
components=None,
width: Union[tuple, int] = ('auto', ""),
height: Union[tuple, int] = (None, "px"),
profile: Union[dict, bool] = None,
options: dict = None,
helper: str = None):
"""
Description:
------------
The <input type="number"> defines a field for entering a number.
Use the following attributes to specify restrictions:
max - specifies the maximum value allowed
min - specifies the minimum value allowed
step - specifies the legal number intervals
value - Specifies the default value
:tags:
:categories:
Usage::
number = page.ui.vignets.number(500, "Test")
number_2 = page.ui.vignets.number(500, "Test 2 ", options={"url": "http://www.google.fr"})
number.span.add_icon(page.ui.icons.get.ICON_ENVELOPE)
Underlying HTML Objects:
- :class:`epyk.core.html.HtmlTextComp.Number`
Related Pages:
https://www.w3schools.com/tags/att_input_type_number.asp
Attributes:
----------
:param number: Integer. The value.
:param label: String. Optional. The label text.
:param title: String | Component. Optional. A panel title. This will be attached to the title property.
:param align: String. Optional. The text-align property within this component.
:param components: List. Optional. The HTML components.
:param width: Tuple. Optional. A tuple with the integer for the component width and its unit.
:param height: Tuple. Optional. A tuple with the integer for the component height and its unit.
:param profile: Boolean | Dictionary. Optional. A flag to set the component performance storage.
:param options: Dictionary. Optional. Specific Python options available for this component.
:param helper: String. Optional. The value to be displayed to the helper icon.
"""
width = Arguments.size(width, unit="px")
height = Arguments.size(height, unit="px")
dfl_options = {
"digits": 0,
"thousand_sep": ',',
"decimal_sep": '.',
'type_number': 'number'
}
if options is not None:
dfl_options.update(options)
if 'symbol' in dfl_options:
dfl_options['type_number'] = 'money'
number = self.page.py.format_money(
number,
digits=dfl_options.get('digits', 0),
symbol=dfl_options.get('symbol'))
else:
number = self.page.py.format_number(number,
digits=dfl_options.get(
'digits', 0))
pre_components = []
if title is not None:
if not hasattr(title, 'options'):
title = self.page.ui.titles.title(title)
title.style.css.display = "block"
title.style.css.text_align = align
pre_components.append(title)
pre_components.append(
html.HtmlTextComp.Number(self.page, number, components, label,
width, ("auto", ""), profile, dfl_options,
helper))
container = self.page.ui.div([pre_components],
align=align,
height=height,
width=width,
profile=profile,
options=options)
container.number = pre_components[-1]
container.span = pre_components[-1].span
container.build = pre_components[-1].build
if title is not None:
container.title = title
html.Html.set_component_skin(container)
return container
def validation(self,
components=None,
width=(100, '%'),
height=(None, 'px'),
options=None,
profile=None):
"""
Description:
------------
Usage::
popup = page.popup(page.ui.title('Test'), color="red")
popup + page.paragraph('Test')
Underlying HTML Objects:
- :class:`epyk.core.html.HtmlPopup.Popup`
Related Pages:
https://www.w3schools.com/tags/tag_div.asp
Templates:
https://github.com/epykure/epyk-templates/blob/master/locals/components/modals.py
Attributes:
----------
:param components: List. The different HTML objects to be added to the component.
:param width: Tuple. Optional. A tuple with the integer for the component width and its unit.
:param height: Tuple. Optional. A tuple with the integer for the component height and its unit.
:param options: Dictionary. Optional. Specific Python options available for this component.
:param profile: Boolean | Dictionary. Optional. A flag to set the component performance storage.
"""
width = Arguments.size(width, unit="%")
height = Arguments.size(height, unit="px")
icon_details = Defaults_css.get_icon("close")
dfl_options = {
'margin': 10,
'closure': icon_details["icon"],
'top': 100
}
if options is not None:
dfl_options.update(options)
if not isinstance(components, list):
components = [components]
validate = self.page.ui.buttons.validate("Validate")
cancel = self.page.ui.buttons.cancel()
row = self.page.ui.row([validate, cancel],
position="top",
align="center")
row.options.autoSize = False
components.append(row)
popup = html.HtmlPopup.Popup(self.page, components, width, height,
dfl_options, profile)
popup.validate = validate
popup.cancel = cancel
cancel.click([popup.dom.hide()])
html.Html.set_component_skin(popup)
return popup
def icon(self,
components=None,
icon=None,
width=(100, '%'),
height=(None, 'px'),
options=None,
profile=None):
"""
Description:
------------
Display a generic popup with an icon.
Usage::
popup = page.popup(page.ui.title('Test'), color="red")
popup + page.paragraph('Test')
Underlying HTML Objects:
- :class:`epyk.core.html.HtmlPopup.Popup`
Related Pages:
https://www.w3schools.com/tags/tag_div.asp
Templates:
https://github.com/epykure/epyk-templates/blob/master/locals/components/modals.py
Attributes:
----------
:param components: List. The different HTML objects to be added to the component.
:param icon: String. Optional.
:param width: Tuple. Optional. A tuple with the integer for the component width and its unit.
:param height: Tuple. Optional. A tuple with the integer for the component height and its unit.
:param options: Dictionary. Optional. Specific Python options available for this component.
:param profile: Boolean or Dictionary. Optional. A flag to set the component performance storage.
"""
width = Arguments.size(width, unit="%")
height = Arguments.size(height, unit="px")
dfl_options = {
'margin': 10,
'closure': False,
'top': 100,
'escape': False
}
if options is not None:
dfl_options.update(options)
if not isinstance(components, list):
components = [components]
if icon is not None:
icon_success = self.page.ui.icon(icon)
icon_success.style.css.font_size = 50
icon_success.style.css.margin_bottom = 20
icon_success.style.css.margin_top = 10
success_div = self.page.ui.div(icon_success)
success_div.style.css.text_align = "center"
components.insert(0, success_div)
acknowledgement = self.page.ui.button("Ok",
align="center",
options=dfl_options.get(
"button", {}))
acknowledgement.style.css.margin_top = 10
components.append(acknowledgement)
popup = html.HtmlPopup.Popup(self.page, components, width, height,
dfl_options, profile)
popup.acknowledgement = acknowledgement
acknowledgement.click([popup.dom.hide()])
html.Html.set_component_skin(popup)
return popup
def number(self,
number,
label="",
width=('auto', ""),
height=(None, "px"),
profile=None,
options=None):
"""
Description:
------------
The <input type="number"> defines a field for entering a number.
Use the following attributes to specify restrictions:
max - specifies the maximum value allowed
min - specifies the minimum value allowed
step - specifies the legal number intervals
value - Specifies the default value
Usage::
number = rptObj.ui.vignets.number(500, "Test")
number_2 = rptObj.ui.vignets.number(500, "Test 2 ", options={"url": "http://www.google.fr"})
number.span.add_icon(rptObj.ui.icons.get.ICON_ENVELOPE)
Underlying HTML Objects:
- :class:`epyk.core.html.HtmlTextComp.Number`
Related Pages:
https://www.w3schools.com/tags/att_input_type_number.asp
Attributes:
----------
:param number:
:param label:
:param width: Tuple. Optional. A tuple with the integer for the component width and its unit
:param height: Tuple. Optional. A tuple with the integer for the component height and its unit
:param profile: Boolean or Dictionary. Optional. A flag to set the component performance storage
:param options: Dictionary. Optional. Specific Python options available for this component
"""
width = Arguments.size(width, unit="px")
height = Arguments.size(height, unit="px")
dflt_options = {
"digits": 0,
"thousand_sep": ',',
"decimal_sep": '.',
'type_number': 'number'
}
if options is not None:
dflt_options.update(options)
if 'symbol' in dflt_options:
dflt_options['type_number'] = 'money'
number = self.context.rptObj.py.format_money(
number,
digits=dflt_options.get('digits', 0),
symbol=dflt_options.get('symbol'))
else:
number = self.context.rptObj.py.format_number(
number, digits=dflt_options.get('digits', 0))
html_number = html.HtmlTextComp.Number(self.context.rptObj, number,
label, width, height, profile,
dflt_options)
return html_number
def bubble(self,
records=None,
width=(50, "px"),
height=(110, 'px'),
color=None,
background_color=None,
helper=None,
profile=None):
"""
Description:
------------
The bubbles event property returns a Boolean value that indicates whether or not an event is a bubbling event.
Event bubbling directs an event to its intended target, it works like this:
A button is clicked and the event is directed to the button
If an event handler is set for that object, the event is triggered
If no event handler is set for that object, the event bubbles up (like a bubble in water) to the objects parent
The event bubbles up from parent to parent until it is handled, or until it reaches the document object.
Usage::
rptObj.ui.vignets.bubble({"value": 23, "title": "Title"}, helper="This is a helper")
Underlying HTML Objects:
- :class:`epyk.core.html.HtmlText.Text`
- :class:`epyk.core.html.HtmlContainer.Div`
- :class:`epyk.core.html.HtmlLinks.ExternalLink`
Related Pages:
https://www.w3schools.com/jsref/event_bubbles.asp
Attributes:
----------
:param records: Optional. The list of dictionaries
: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 color: Optional. The font color in the component. Default inherit
:param background_color:
:param helper: Optional. A tooltip helper
:param profile: Optional. A flag to set the component performance storage
"""
width = Arguments.size(width, unit="px")
height = Arguments.size(height, unit="px")
div = self.context.rptObj.ui.div(width=width,
height=height,
profile=profile,
helper=helper)
bubble = self.context.rptObj.ui.div(width=width,
height=(height[0] - 60, height[1]),
profile=profile)
div.number = self.context.rptObj.ui.text(records["value"], width=width)
if records.get("url") is not None:
div.title = self.context.rptObj.ui.link(records["title"],
url=records['url'],
profile=profile)
div.title.no_decoration()
else:
div.title = self.context.rptObj.ui.text(records["title"])
div.title.style.css.bold()
div.number.style.css.line_height = height[0] - 60
div.number.style.css.text_align = "center"
div.number.style.css.font_size = height[0] - 90
bubble += div.number
bubble.style.css.background_color = background_color or self.context.rptObj.theme.success[
1]
bubble.style.css.color = color or self.context.rptObj.theme.greys[0]
bubble.style.css.borders_light()
bubble.style.css.border_radius = height[0] - 60
bubble.style.css.middle()
div.style.css.text_align = "center"
div += bubble
div += div.title
return div
def badge(self,
text="",
label=None,
icon=None,
width=(25, "px"),
height=(25, "px"),
background_color=None,
color=None,
url=None,
tooltip=None,
options=None,
profile=None):
"""
Description:
------------
Display a badge component using Bootstrap
Usage::
rptObj.ui.images.badge("Test badge", "Label", icon="fas fa-align-center")
rptObj.ui.images.badge("This is a badge", background_color="red", color="white")
rptObj.ui.images.badge(12, icon="far fa-bell", options={"badge_position": 'right'})
b = rptObj.ui.images.badge(7688, icon="fab fa-python", options={'badge_css': {'color': 'white', "background": 'red'}})
b.options.badge_css = {"background": 'green'}
Underlying HTML Objects:
- :class:`epyk.core.html.HtmlImage.Badge`
Related Pages:
https://getbootstrap.com/docs/4.0/components/badge/
Templates:
https://github.com/epykure/epyk-templates/blob/master/locals/components/image.py
https://github.com/epykure/epyk-templates/blob/master/locals/components/links.py
Attributes:
----------
:param text: The content of the badge
:param label: Optional, The label to display close to the badge
:param icon: Optional, A String with the icon to display from font-awesome
:param background_color: Optional, The background color of the badge
:param color: Optional, The text color of the badge
:param url:
: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 tooltip: Optional, The text to display in the tooltip
:param options: Dictionary. Optional. Specific Python options available for this component
:param profile: Boolean or Dictionary, A boolean to store the performances for each components
"""
width = Arguments.size(width, "px")
height = Arguments.size(height, "px")
if background_color is None:
background_color = self.context.rptObj.theme.greys[0]
if color is None:
color = self.context.rptObj.theme.success[1]
html_badge = html.HtmlImage.Badge(self.context.rptObj, text, width,
height, label, icon,
background_color, color, url,
tooltip, options or {}, profile)
return html_badge
def select(self, records=None, html_code: str = None, selected: str = None, width=(100, "%"), height=(None, "%"),
profile: Union[bool, dict] = None, multiple: bool = False, options: dict = None):
"""
Description:
------------
HTML Select component.
Usage::
record = [
{"text": 'Text 1', "value": "text 1"},
{"text": 'Text 2', "value": "text 2"},
{"text": 'Text 3', "value": "text 3"},
]
select = page.ui.select(record)
Underlying HTML Objects:
- :class:`epyk.core.html.HtmlSelect.Select`
Related Pages:
https://silviomoreto.github.io/bootstrap-select/examples/
https://www.npmjs.com/package/bootstrap-select-v4
https://www.jqueryscript.net/form/Bootstrap-4-Dropdown-Select-Plugin-jQuery.html
Attributes:
----------
:param records: List. Optional. The list of dictionaries with the input data.
:param html_code: String. Optional. An identifier for this component (on both Python and Javascript side).
:param selected: String. Optional. The selected value or values.
:param width: Tuple. Optional. Integer for the component width.
:param height: Tuple. Optional. Integer for the component height.
:param profile: Boolean | Dictionary. Optional. A flag to set the component performance storage.
:param multiple: Boolean. Optional. To set if the component can handle multiple selections.
:param options: Dictionary. The select options as defined https://developer.snapappointments.com/bootstrap-select/options/
"""
width = Arguments.size(width, unit="%")
height = Arguments.size(height, unit="%")
records = records or []
if not isinstance(records, list):
records = [{'text': v, 'value': v, "selected": True} for v in records.split(",")]
options = options or {}
options['selected'] = selected
if multiple:
if not isinstance(multiple, dict):
multiple = {"max": 2}
if selected is not None:
for rec in records:
if rec["value"] in selected:
rec["selected"] = True
icon_details = Defaults_css.get_icon("check")
options["iconBase"] = "iconBase"
options["tickIcon"] = icon_details["icon"]
html_select = html.HtmlSelect.Select(self.page, records, html_code, width, height, profile, multiple, options)
html.Html.set_component_skin(html_select)
return html_select
if selected is not None:
for rec in records:
if rec["value"] == selected:
rec["selected"] = True
html_select = html.HtmlSelect.Select(self.page, records, html_code, width, height, profile, multiple, options)
html.Html.set_component_skin(html_select)
return html_select
def move(self,
current,
previous=None,
components=None,
title: str = None,
align: str = "center",
width: Union[tuple, int] = (100, '%'),
height: Union[tuple, int] = (None, "px"),
color: str = None,
label: str = None,
options: dict = None,
helper: str = None,
profile: Union[dict, bool] = None):
"""
Description:
------------
:tags:
:categories:
Usage::
page.ui.numbers.move(100, 60, helper="test")
Underlying HTML Objects:
- :class:`epyk.core.html.HtmlTextComp.Delta`
Attributes:
----------
:param current: Number. The current value.
:param previous: Number. Optional. Default the current value and not move.
:param components: HTML Component. Optional. List of HTML component to be added.
:param title: String | Component. Optional. The title definition.
:param align: String. Optional. The text-align property within this component.
:param color: String. Optional. The text color.
:param label: String. Optional. The label for the up and down component.
:param width: Tuple. Optional. A tuple with the integer for the component width and its unit.
:param height: Tuple. Optional. A tuple with the integer for the component height and its unit.
:param options: Dictionary. Optional. Specific Python options available for this component.
:param helper: String. Optional. The value to be displayed to the helper icon.
:param profile: Boolean | Dictionary. Optional. A flag to set the component performance storage.
"""
width = Arguments.size(width, unit="%")
height = Arguments.size(height, unit="px")
dflt_options = {
"digits": 0,
'thousand_sep': ",",
'decimal_sep': ".",
'red': self.page.theme.danger[1],
'green': self.page.theme.success[1],
'orange': self.page.theme.warning[1]
}
previous = previous or current
if options is not None:
dflt_options.update(options)
components = components or []
if title is not None:
if not hasattr(title, 'options'):
title = self.page.ui.titles.title(title)
title.style.css.display = "block"
title.style.css.text_align = align
components.insert(0, title)
html_up_down = html.HtmlTextComp.UpDown(self.page, {
"value": current,
'previous': previous
}, components, color, label, width, height, dflt_options, helper,
profile)
if title is not None:
html_up_down.title = title
html.Html.set_component_skin(html_up_down)
return html_up_down
def right(self,
data=None,
color=None,
width=(100, "%"),
height=(30, 'px'),
htmlCode=None,
helper=None,
options=None,
profile=None):
"""
Description:
------------
Attributes:
----------
:param data:
:param color:
:param width:
:param height:
:param htmlCode:
:param helper:
:param options:
:param profile:
"""
width = Arguments.size(width, unit="%")
height = Arguments.size(height, unit="px")
dflt_options = {"tab_width": 100}
if options is not None:
dflt_options.update(options)
titles, panels = [], []
for k in data:
if not isinstance(k, dict):
k = {"value": k}
titles.append(
self.context.rptObj.ui.text(k["value"],
width=(dflt_options['tab_width'],
'px'),
align="center"))
children = k.get("children", [])
col = self.context.rptObj.ui.div(width=(dflt_options['tab_width'],
'px'))
col.style.css.display = None
col.style.css.bottom = height[0]
col.style.css.padding = "0 2px"
col.style.css.background = self.context.rptObj.theme.greys[1]
col.style.css.position = "absolute"
if children:
items = []
for c in children:
if hasattr(c, 'options'):
items.append(c)
else:
if not isinstance(c, dict):
c = {"value": c}
link = self.context.rptObj.ui.link(*c)
items.append(link)
col.add(items)
panels.append(col)
html_list = html.HtmlList.List(self.context.rptObj, [], color, width,
height, htmlCode, helper, options or {},
profile)
html_list.css({"list-style": 'none'})
html_div = self.context.rptObj.ui.div()
html_div.style.css.background = self.context.rptObj.theme.greys[0]
html_div.css({"position": "fixed", "margin": 0, "left": 0})
html_div.style.css.bottom = 0
html_div.panels = panels
html_div.titles = titles
for i, t in enumerate(titles):
cont = self.context.rptObj.ui.table([panels[i], t],
width=("auto", ''))
cont.mouse([panels[i].dom.show().r], [panels[i].dom.hide().r])
html_div.add(cont)
html_div.style.css.line_height = height[0]
if self.context.rptObj.body.style.css.padding_bottom is not None:
self.context.rptObj.body.style.css.padding_bottom = int(self.context.rptObj.body.style.css.padding_bottom[:-2]) + \
height[0] + 5
else:
self.context.rptObj.body.style.css.padding_bottom = height[0] + 5
return html_div
def right(self,
data=None,
color: str = None,
width: Union[tuple, int] = (100, "%"),
height: Union[tuple, int] = (30, 'px'),
html_code: str = None,
helper: str = None,
options: dict = None,
profile: Union[bool, dict] = None):
"""
Description:
------------
Usage::
page.ui.lists.
Attributes:
----------
:param data:
:param color:
:param width: Tuple. Optional. A tuple with the integer for the component width and its unit
:param height: Tuple. Optional. A tuple with the integer for the component height and its unit
:param html_code:
:param helper:
:param options: Dictionary. Optional. Specific Python options available for this component
:param profile: Boolean | Dictionary. Optional. A flag to set the component performance storage
"""
width = Arguments.size(width, unit="%")
height = Arguments.size(height, unit="px")
dfl_options = {"tab_width": 100}
if options is not None:
dfl_options.update(options)
titles, panels = [], []
for k in data:
if not isinstance(k, dict):
k = {"value": k}
titles.append(
self.page.ui.text(k["value"],
width=(dfl_options['tab_width'], 'px'),
align="center"))
children = k.get("children", [])
col = self.page.ui.div(width=(dfl_options['tab_width'], 'px'))
col.style.css.display = None
col.style.css.bottom = height[0]
col.style.css.padding = "0 2px"
col.style.css.background = self.page.theme.greys[1]
col.style.css.position = "absolute"
if children:
items = []
for c in children:
if hasattr(c, 'options'):
items.append(c)
else:
if not isinstance(c, dict):
c = {"value": c}
link = self.page.ui.link(*c)
items.append(link)
col.add(items)
panels.append(col)
html_list = html.HtmlList.List(self.page, [], color, width, height,
html_code, helper, options or {},
profile)
html_list.css({"list-style": 'none'})
html_div = self.page.ui.div()
html_div.style.css.background = self.page.theme.greys[0]
html_div.css({"position": "fixed", "margin": 0, "left": 0})
html_div.style.css.bottom = 0
html_div.panels = panels
html_div.titles = titles
for i, t in enumerate(titles):
cont = self.page.ui.table([panels[i], t], width=("auto", ''))
cont.mouse([panels[i].dom.show().r], [panels[i].dom.hide().r])
html_div.add(cont)
html_div.style.css.line_height = height[0]
if self.page.body.style.css.padding_bottom is not None:
self.page.body.style.css.padding_bottom = int(
self.page.body.style.css.padding_bottom[:-2]) + height[0] + 5
else:
self.page.body.style.css.padding_bottom = height[0] + 5
html.Html.set_component_skin(html_div)
return html_div
def custom(self, record, y_columns=None, x_axis=None, profile=None, width=(100, "%"), height=(330, "px"),
options=None, html_code=None):
"""
Description:
------------
Display a bar chart from ChartJs.
:tags:
:categories:
Usage::
Related Pages:
https://www.chartjs.org/samples/latest/scriptable/bar.html
Attributes:
----------
:param record: List. Optional. The list of dictionaries with the input data.
:param y_columns: List. Optional. The columns corresponding to keys in the dictionaries in the record.
:param x_axis: String. Optional. The column corresponding to a key in the dictionaries in the record.
:param profile: Boolean | Dictionary. Optional. A flag to set the component performance storage.
:param width: Tuple. Optional. The width of the component in the page, default (100, '%').
:param height: Tuple. Optional. The height of the component in the page, default (330, "px").
:param options: Dictionary. Optional. Specific Python options available for this component.
:param html_code: String. Optional. An identifier for this component (on both Python and Javascript side).
"""
width = Arguments.size(width, unit="%")
height = Arguments.size(height, unit="px")
if self.page.ext_packages is None:
self.page.ext_packages = {}
chartjs_defined_package = {
'funnel-chart-js': {
'version': '1.1.2',
'req': [{'alias': 'chart.js'}],
'website': 'https://www.npmjs.com/package/chartjs-plugin-funnel',
'modules': [
{'script': 'chart.funnel.min.js', 'path': '',
'cdnjs': '%s/funnel-chart-js/dist/' % options['npm_path'].replace("\\", "/")},
]},
'chartjs-chart-sankey': {
'version': '0.1.3',
'website': 'https://www.npmjs.com/package/chartjs-chart-sankey',
'req': [{'alias': 'chart.js'}],
'modules': [
{'script': 'chartjs-chart-sankey.min.js', 'path': '',
'cdnjs': '%s/chartjs-chart-sankey/dist/' % options['npm_path'].replace("\\", "/")}
]}
}
if options.get('npm') is not None and options['npm'] not in chartjs_defined_package:
folder = "dist"
if not os.path.exists('%s/%s/%s' % (options['npm_path'].replace("\\", "/"), options['npm'], folder)):
folder = 'build'
if not os.path.exists('%s/%s/%s' % (options['npm_path'].replace("\\", "/"), options['npm'], folder)):
text = "Missing module %s/%s/dist or build in the package - use web npm to install package to your app"
raise ValueError(text % (options['npm_path'].replace("\\", "/"), options['npm']))
chartjs_defined_package[options['npm']] = {
'req': [{'alias': 'chart.js'}], 'version': 'N/A',
'modules': [
{'script': '%s.min.js' % options.get('script', options['npm']), 'path': '',
'cdnjs': '%s/%s/%s' % (options['npm_path'].replace("\\", "/"), options['npm'], folder)},
]}
del options['npm_path']
if 'script' in options:
del options['script']
self.page.ext_packages.update(chartjs_defined_package)
options = options or {}
options.update({'y_columns': y_columns or [], 'x_axis': x_axis, 'commons': {"opacity": self.opacity}})
data = self.page.data.chartJs.y(record, y_columns, x_axis)
bar_chart = graph.GraphChartJs.ChartExts(self.page, width, height, html_code, options, profile)
bar_chart.colors(self.page.theme.charts)
bar_chart.labels(data['labels'])
for i, d in enumerate(data['datasets']):
bar_chart.add_dataset(d["data"], d['label'])
bar_chart.options.scales.y_axis().ticks.beginAtZero = True
return bar_chart
def delta(self,
record=None,
components=None,
title=None,
align="center",
width=('auto', ''),
height=('auto', ''),
options=None,
helper=None,
profile=None):
"""
Description:
------------
Usage::
page.ui.rich.delta({'number': 100, 'prevNumber': 60, 'thresold1': 100, 'thresold2': 50}, helper="test")
Underlying HTML Objects:
- :class:`epyk.core.html.HtmlTextComp.Delta`
:tags: Numbers |
:categories: Container |
Attributes:
----------
:param record: Dictionary. Optional. The input data for this component.
:param components: List. Optional. The HTML components to be added to this component.
:param title: String | Component. Optional. A panel title. This will be attached to the title property.
:param align: String. The text-align property within this component.
:param width: Tuple. Optional. A tuple with the integer for the component width and its unit.
:param height: Tuple. Optional. A tuple with the integer for the component height and its unit.
:param options: Dictionary. Optional. Specific Python options available for this component.
:param helper: String. Optional. A tooltip helper.
:param profile: Boolean | Dictionary. Optional. A flag to set the component performance storage.
"""
width = Arguments.size(width, unit="px")
height = Arguments.size(height, unit="px")
dflt_options = {
"digits": 0,
'thousand_sep': ",",
'decimal_sep': ".",
'red': self.page.theme.danger[1],
'green': self.page.theme.success[1],
'orange': self.page.theme.warning[1]
}
if options is not None:
dflt_options.update(options)
container = self.page.ui.div(align=align,
height=height,
width=width,
profile=profile,
options=options)
if title is not None:
if not hasattr(title, 'options'):
title = self.page.ui.titles.title(title)
title.style.css.display = "block"
title.style.css.text_align = align
container.add(title)
main_component = html.HtmlTextComp.Delta(self.page, record or {},
components, width,
("auto", ''), dflt_options,
helper, profile)
container.add(main_component)
container.build = main_component.build
if title is not None:
container.title = title
html.Html.set_component_skin(container)
return container
def top(self,
data=None,
color: str = None,
width: Union[tuple, int] = (100, "%"),
height: Union[tuple, int] = (30, 'px'),
html_code: str = None,
helper: str = None,
options: dict = None,
profile: Union[bool, dict] = None):
"""
Description:
------------
Add a menu item at the top of the page.
The menu will be fixed on the page, always visible
Usage::
l = page.ui.lists.list(["A", "B"])
page.ui.menus.top([{"value": "Menu 1", 'children': ["Item 1", "Item 2"]},"Menu 1 2"])
Underlying HTML Objects:
- :class:`epyk.core.html.HtmlContainer.Div`
- :class:`epyk.core.html.HtmlContainer.Col`
- :class:`epyk.core.html.HtmlContainer.Grid`
- :class:`epyk.core.html.HtmlText.Title`
- :class:`epyk.core.html.HtmlList.List`
Related Pages:
https://www.w3schools.com/bootstrap/bootstrap_list_groups.asp
http://astronautweb.co/snippet/font-awesome/
Attributes:
----------
:param data:
:param color: String. Optional. The font color in the component. Default inherit
:param Union[tuple, int] width: Optional. A tuple with the integer for the component width and its unit
:param height: Tuple. Optional. A tuple with the integer for the component height and its unit
:param html_code: String. Optional. An identifier for this component (on both Python and Javascript side)
:param helper: String. Optional. A tooltip helper
:param options: Dictionary. Optional. Specific Python options available for this component
:param profile: Boolean or Dictionary. Optional. A flag to set the component performance storage
"""
width = Arguments.size(width, unit="%")
height = Arguments.size(height, unit="px")
dflt_options = {"tab_width": 100}
if options is not None:
dflt_options.update(options)
titles, panels = [], []
for k in data:
if not isinstance(k, dict):
k = {"value": k}
titles.append(
self.page.ui.text(k["value"],
width=(dflt_options['tab_width'], 'px'),
align="center"))
children = k.get("children", [])
col = self.page.ui.col(width=(dflt_options['tab_width'], 'px'))
col.style.css.display = None
col.style.css.padding = "0 2px"
col.style.css.background = self.page.theme.greys[0]
col.style.css.position = "absolute"
if children:
items = []
for c in children:
if hasattr(c, 'options'):
items.append(c)
else:
if not isinstance(c, dict):
c = {"text": c}
link = self.page.ui.link(**c)
link.style.css.display = 'block'
items.append(link)
col.add(items)
panels.append(col)
html_list = html.HtmlList.List(self.page, [], color, width, height,
html_code, helper, options or {},
profile)
html_list.css({"list-style": 'none'})
html_div = self.page.ui.div()
html_div.style.css.background = self.page.theme.greys[1]
html_div.css({"position": "fixed", "margin": 0, "left": 0})
html_div.style.css.margin_top = int(
self.page.body.style.css.padding_top[:-2])
html_div.style.css.top = 0
html_div.panels = panels
html_div.titles = titles
for i, t in enumerate(titles):
cont = self.page.ui.div([t, panels[i]], width=("auto", ''))
cont.mouse([panels[i].dom.show(display_value="block").r],
[panels[i].dom.hide().r])
html_div.add(cont)
html_div.style.css.line_height = height[0]
if self.page.body.style.css.padding_top is not None:
self.page.body.style.css.padding_top = int(
self.page.body.style.css.padding_top[:-2]) + height[0] + 5
else:
self.page.body.style.css.padding_top = height[0] + 5
html.Html.set_component_skin(html_div)
return html_div
def countdown(self,
day,
month,
year,
hour=0,
minute=0,
second=0,
label=None,
icon="fas fa-stopwatch",
time_ms_factor=1000,
width=(None, '%'),
height=(None, 'px'),
html_code=None,
helper=None,
options=None,
profile=None):
"""
Description:
------------
Add a countdown to the page and remove the content if the page has expired.
:tags:
:categories:
Usage::
page.ui.rich.countdown(24, 9 2021)
Underlying HTML Objects:
- :class:`epyk.core.html.HtmlDates.CountDownDate`
Related Pages:
https://www.w3schools.com/js/js_date_methods.asp
https://www.w3schools.com/howto/howto_js_countdown.asp
https://fontawesome.com/icons/stopwatch?style=solid
Attributes:
----------
:param day: Integer. . Day's number.
:param month: Integer. . Month's number.
:param year: Integer. Year's number.
:param hour: Integer. Optional. Number of hours.
:param minute: Integer. Optional. Number of minutes.
:param second: Integer. Optional. Number of seconds.
:param label: String. Optional. The component label content.
:param icon: String. Optional. The component icon content from font-awesome references.
:param time_ms_factor: Integer. Optional. The format from the format in milliseconds.
:param width: Tuple. Optional. A tuple with the integer for the component width and its unit.
:param height: Tuple. Optional. A tuple with the integer for the component height and its unit.
:param html_code: String. Optional. The component identifier code (for both Python and Javascript).
:param helper: String. Optional. A tooltip helper.
:param options: Dictionary. Optional. Specific Python options available for this component.
:param profile: Boolean | Dictionary. Optional. A flag to set the component performance storage.
"""
width = Arguments.size(width, unit="%")
height = Arguments.size(height, unit="px")
html_cd = html.HtmlDates.CountDownDate(self.page, day, month, year,
hour, minute, second, label,
icon, time_ms_factor, width,
height, html_code, helper,
options or {}, profile)
html.Html.set_component_skin(html_cd)
return html_cd
def hamburger(self, components, title="", color=None, align="center", width=(100, "%"), height=(None, "px"),
html_code=None, helper=None, options=None, profile=False):
"""
Description:
------------
Add hamburger panel.
:tags:
:categories:
Usage::
Underlying HTML Objects:
- :class:`epyk.core.html.HtmlContainer.PanelSlide`
Attributes:
----------
:param components: List. Optional. The different HTML objects to be added to the component.
:param title: String. Optional. A panel title. This will be attached to the title property.
:param color: String. Optional. The font color in the component. Default inherit.
:param align: String. Optional. The text-align property within this component (Default center).
:param width: Tuple. Optional. A tuple with the integer for the component width and its unit.
:param height: Tuple. Optional. A tuple with the integer for the component height and its unit.
:param html_code: String. Optional. An identifier for this component (on both Python and Javascript side).
:param helper: String. Optional. A tooltip helper.
:param options: Dictionary. Optional. Specific Python options available for this component.
:param profile: Boolean | Dictionary. Optional. A flag to set the component performance storage.
"""
width = Arguments.size(width, unit="%")
height = Arguments.size(height, unit="px")
if components is not None and not isinstance(components, list):
_components = [components]
else:
_components = components
components = []
for component in _components:
if not hasattr(component, 'options'):
components.append(self.page.ui.texts.paragraph(component, options={"markdown": True}))
else:
components.append(component)
dfl_options = {"icon_expanded": "", "expanded": False, "icon_closed": "", "click_type": 'icon'}
if options is not None:
dfl_options.update(options)
html_slide = html.HtmlContainer.PanelSlide(
self.page, components, title, color, width, height, html_code, helper, dfl_options, profile)
html_slide.icon = self.page.ui.icons.hamburger()
html_slide.icon.options.managed = False
html_slide.icon.style.css.float = "right"
html_slide.icon.style.css.margin_top = 4
html_slide.icon.style.css.margin_right = 4
html_slide.style.css.border = "1px solid %s" % self.page.theme.greys[2]
html_slide._vals[1].style.css.padding = 5
html_slide.title.add(html_slide.icon)
html_slide.style.css.margin_top = 5
html_slide.style.css.margin_bottom = 5
if align == "center":
html_slide.style.css.margin = "5px auto"
html_slide.style.css.display = "block"
html.Html.set_component_skin(html_slide)
return html_slide
def search_input(self,
text='',
placeholder='Search..',
color=None,
width=(100, '%'),
height=(None, "px"),
html_code=None,
tooltip=None,
extensible=False,
options=None,
profile=None):
"""
Description:
------------
Search bar.
:tags:
:categories:
Usage::
page.ui.inputs.search()
Underlying HTML Objects:
- :class:`epyk.core.html.HtmlInput.Search`
Related Pages:
https://www.w3schools.com/howto/tryit.asp?filename=tryhow_css_anim_search
Attributes:
----------
:param text: String. Optional. The value to be displayed to the component.
:param placeholder: String. Optional. The text display when empty.
:param color: String. Optional. The font color in the component. Default inherit.
:param width: Tuple. Optional. A tuple with the integer for the component width and its unit.
:param height: Tuple. Optional. A tuple with the integer for the component height and its unit.
:param html_code: String. Optional. An identifier for this component (on both Python and Javascript side).
:param tooltip: String. Optional. A string with the value of the tooltip.
:param extensible: Boolean. Optional. Flag to specify the input style.
:param options: Dictionary. Optional. Specific Python options available for this component.
:param profile: Boolean | Dictionary. Optional. A flag to set the component performance storage.
"""
width = Arguments.size(width, unit="px")
height = Arguments.size(height, unit="px")
icon_details = Defaults_css.get_icon("search")
dflt_options = {
"icon": icon_details["icon"],
"icon_family": icon_details["icon_family"],
'position': 'left',
'select': True,
"border": 1
}
if options is not None:
dflt_options.update(options)
html_s = html.HtmlInput.Search(self.page, text, placeholder, color,
width, height, html_code, tooltip,
extensible, dflt_options, profile)
html.Html.set_component_skin(html_s)
return html_s