def outlined(self, value="", label="", leading_icon=None, trailing_icon=None):
"""
Description:
------------
Usage::
text_1 = rptObj.materials.inputs.outlined("Test", "Title", leading_icon="favorite")
text_2 = rptObj.materials.inputs.outlined("Test", "Title", trailing_icon="visibility")
Related Pages:
https://material.io/develop/web/components/input-controls/text-field/
Attributes:
----------
:param value:
:param label:
:param leading_icon:
:param trailing_icon:
"""
schema = {"type": 'div', 'css': False, 'children': [
{"type": 'input', "class": "mdc-text-field__input", 'css': False, 'args': {'text': value}},
{"type": 'div', "class": "mdc-notched-outline", 'css': False, 'children': [
{"type": 'div', "class": "mdc-notched-outline__leading", 'css': False},
{"type": 'div', "class": "mdc-notched-outline__notch", 'css': False, 'children': [
{"type": 'mdc_floating', 'class-keep': True, 'args': {'label': label}}
]},
{"type": 'div', "class": "mdc-notched-outline__trailing", 'css': False},
]},
]}
if leading_icon is not None:
schema['children'] = [{"type": 'mdc_icon', 'class-keep': True, 'css': False, 'args': {'text': leading_icon, 'in_text_field': True}}] + schema['children']
if trailing_icon is not None:
schema['children'] = [{"type": 'mdc_icon', 'class-keep': True, 'css': False, 'args': {'text': trailing_icon, 'in_text_field': True}}] + schema['children']
html_b = self.context.rptObj.materials.composite(schema, options={"reset_class": True})
dom_obj_ripple = JsMdcComponents.TextRipple(html_b)
html_b.style.builder(html_b.style.varName, dom_obj_ripple.instantiate("#%s" % html_b.htmlCode))
dom_obj = JsMdcComponents.TextNothedOutline(html_b)
html_b.style.builder("%s_notch" % html_b.style.varName, dom_obj.instantiate("#%s" % html_b.htmlCode))
# Add the specific dom features
html_b.dom = dom_obj_ripple
if leading_icon is not None:
html_b.attr['class'].add("mdc-text-field--with-leading-icon")
if trailing_icon is not None:
html_b.attr['class'].add("mdc-text-field--with-trailing-icon")
html_b.css({"margin-top": '5px'})
return html_b
def toggle(self, flag, htmlCode=None, profile=None):
"""
Description:
------------
Switches communicate an action a user can take. They are typically placed throughout your UI, in places like dialogs, forms, cards, and toolbars.
Related Pages:
https://material-components.github.io/material-components-web-catalog/#/component/switch
https://material-components.github.io/material-components-web-catalog/#/component/switch
Attributes:
----------
:param flag: Boolean. The init state of the toggle component.
:param htmlCode: Optional. String. The component identifier code (for both Python and Javascript)
:param profile: Optional. Not yet available
"""
schema = {
"type":
'div',
'css':
False,
'children': [{
"type": 'div',
"class": "mdc-switch__track",
'css': False
}, {
"type":
'div',
"class":
"mdc-switch__thumb-underlay",
'css':
False,
'children': [{
"type": 'div',
"class": "mdc-switch__thumb",
'css': False
}, {
"type": 'checkbox',
"class": "mdc-switch__native-control",
'args': {
'flag': flag
},
'aria': {
'role': 'switch',
'checked': flag
}
}]
}]
}
html_b = self.context.rptObj.materials.composite(
schema, options={"reset_class": True})
dom_obj = JsMdcComponents.ButtonSwitch(html_b)
html_b.style.builder(html_b.style.varName,
dom_obj.instantiate("#%s" % html_b.htmlCode))
# Add the specific dom features
html_b.dom = dom_obj
html_b.style.css.margin = 5
return html_b
def toggle(self, icon, htmlCode=None, tooltip=None, profile=None, options=None):
"""
Description:
------------
The icon button can be used to toggle between an on and off icon.
https://material-components.github.io/material-components-web-catalog/#/component/icon-button
Attributes:
----------
:param icon: String. The icon from Materials Icons
:param htmlCode: Optional. String. The component identifier code (for both Python and Javascript)
:param tooltip:
:param profile: Optional. Not yet available
:param options: Optional. Dictionary. the component specific items
"""
schema = {"type": 'button', 'css': None, 'arias': {"label": ""}, 'children': [
{"type": 'mdc_icon', 'class-keep': True, 'css': None, 'class': 'mdc-icon-button__icon mdc-icon-button__icon--on', 'args': {"text": icon}},
{"type": 'mdc_icon', 'class-keep': True, 'css': None, 'class': 'mdc-icon-button__icon', 'args': {"text": "%s_border" % icon}},
]}
html_button = self.context.rptObj.materials.composite(schema, options={"reset_class": True})
dom_obj = JsMdcComponents.ButtonToggle(html_button)
html_button.style.builder(html_button.style.varName, dom_obj.instantiate("#%s" % html_button.htmlCode))
# Add the specific dom features
html_button.dom = dom_obj
return html_button
def text(self, icon, value, htmlCode=None):
"""
Description:
------------
Related Pages:
https://material.io/develop/web/components/input-controls/text-field/icon/
Attributes:
----------
:param icon: Optional.
:param value:
:param htmlCode:
"""
schema = {"type": 'label', 'class': "mdc-text-field--outlined mdc-text-field--with-trailing-icon", 'css': None, 'children': [
{"type": 'input', 'class': "mdc-text-field__input", 'css': None, 'arias': {"labelledby": htmlCode or ''}},
{"type": 'mdc_icon', 'class-keep': True, 'class': "mdc-text-field__icon--trailing", 'css': None, 'attrs': {"role": 'button'}, 'args': {"text": icon, 'in_text_field': True}},
{"type": 'div', 'class': "mdc-notched-outline", 'css': None, 'children': [
{"type": 'div', 'class': "mdc-notched-outline__leading", 'css': None},
{"type": 'div', 'class': "mdc-notched-outline__notch", 'css': None, 'children': [
{"type": 'mdc_floating', 'class-keep': True, 'css': None, 'args': {"label": value}},
]},
{"type": 'div', 'class': "mdc-notched-outline__trailing", 'css': None},
]},
]}
span = self.context.rptObj.materials.composite(schema, options={"reset_class": True})
dom_obj = JsMdcComponents.TextRipple(span)
span.style.builder(span.style.varName, dom_obj.instantiate("#%s" % span.htmlCode))
# Add the specific dom features
span.dom = dom_obj
return span
def radio(self, flag=False, value="", group_name=None):
"""
Description:
------------
Radio buttons allow the user to select one option from a set while seeing all available options.
Related Pages:
https://material.io/develop/web/components/input-controls/radio-buttons/
Attributes:
----------
:param flag:
:param flag:
:param group_name:
"""
schema = {"type": 'div', 'class': None, 'css': None, 'children': [
{"type": 'mdc_radio', 'class-keep': True, 'css': None, 'args': {"value": value, 'flag': flag, 'group_name': group_name}}]}
div = self.context.rptObj.materials.composite(schema, options={"reset_class": True})
div.set_attrs({"class": None, 'css': None})
dom_obj = JsMdcComponents.Field(div)
div.style.builder(div.style.varName, dom_obj.instantiate("#%s" % div.htmlCode))
# Add the specific dom features
div.dom = dom_obj
div.onReady([div.dom.input("radio")])
return div
def line(self, label="", htmlCode=None):
"""
Description:
------------
Floating labels display the type of input a field requires.
Every Text Field and Select should have a label, except for full-width text fields, which use the input’s placeholder attribute instead.
Related Pages:
https://material.io/develop/web/components/input-controls/floating-label/
Attributes:
----------
:param label:
:param htmlCode: Optional. String. The component identifier code (for both Python and Javascript)
"""
schema = {
"type": 'div',
'class': None,
'css': None,
'args': {
"htmlObjs": label
}
}
span = self.context.rptObj.materials.composite(schema)
dom_obj = JsMdcComponents.Line(span)
span.style.builder(span.style.varName,
dom_obj.instantiate("#%s" % span.htmlCode))
# Add the specific dom features
span.dom = dom_obj
return span
def extended(self, label, icon=None, mini=False):
"""
Description:
------------
NOTE: The extended FAB must contain label where as the icon is optional.
The icon and label may be specified in whichever order is appropriate based on context.
Attributes:
----------
:param icon: String. The icon from Materials Icons
"""
schema = {
"type":
'button',
'class':
"mdc-fab--extended",
'css':
None,
'children': [
{
"type": 'div',
'class': 'mdc-fab__ripple',
'css': None
},
{
"type": 'span',
'class': 'mdc-fab__label',
'css': None,
'args': {
"text": label
}
},
]
}
if mini:
schema['class'] += " mdc-fab--mini"
if icon is not None:
self.context.rptObj.cssImport.add("material-icons")
schema['children'].insert(
1, {
"type": 'mdc_icon',
'class-keep': True,
'class': 'mdc-fab__icon',
'css': None,
'args': {
"text": icon
}
})
button = self.context.rptObj.materials.composite(
schema, options={"reset_class": True})
dom_obj = JsMdcComponents.FAB(button)
button.style.builder(button.style.varName,
dom_obj.instantiate("#%s" % button.htmlCode))
# Add the specific dom features
button.dom = dom_obj
return button
def selections(self, data):
"""
Description:
------------
MDC List can handle selecting/deselecting list elements based on click or keyboard actions.
When enabled, the space and enter keys (or click event) will trigger a single list item to become selected and any other previously selected element to become deselected.
Related Pages:
https://material.io/develop/web/components/lists/
Attributes:
----------
:param data:
"""
schema = {
"type": 'div',
'css': False,
'attrs': {
'role': 'listbox'
},
'children': []
}
for i, d in enumerate(data):
schema['children'].append({
'type':
'item',
'class':
"mdc-list-item",
'css':
False,
'attrs': {
"tabindex": i,
'role': 'option'
},
'children': [{
"type": 'span',
'class': "mdc-list-item__text",
'css': False,
'args': {
"text": d
}
}]
})
html_l = self.context.rptObj.materials.composite(
schema, options={"reset_class": True})
dom_obj = JsMdcComponents.List(html_l)
html_l.style.builder(html_l.style.varName,
dom_obj.instantiate("#%s" % html_l.htmlCode))
# Add the specific dom features
html_l.dom = dom_obj
html_l.onReady([html_l.dom.singleSelection(True)])
return html_l
def button(self, icon, mini=False):
"""
Description:
------------
Attributes:
----------
:param icon: String. The icon from Materials Icons
"""
self.context.rptObj.cssImport.add("material-icons")
schema = {
"type":
'button',
'class':
None,
'css':
None,
'arias': {
"pressed": False
},
'children': [
{
"type": 'div',
'class': 'mdc-fab__ripple',
'css': None
},
{
"type": 'mdc_icon',
'class-keep': True,
'class': 'mdc-fab__icon',
'css': None,
'args': {
"text": icon
}
},
]
}
if mini:
schema['class'] = "mdc-fab--mini"
button = self.context.rptObj.materials.composite(
schema, options={"reset_class": True})
dom_obj = JsMdcComponents.FAB(button)
button.style.builder(button.style.varName,
dom_obj.instantiate("#%s" % button.htmlCode))
# Add the specific dom features
button.dom = dom_obj
return button
def field(self, icon=""):
"""
Description:
------------
Attributes:
----------
:param icon: String. The icon from Materials Icons
"""
schema = {"type": 'span', 'class': "material-icons", 'css': None, 'attrs': {"role": 'button'}, 'args': {"text": icon}}
span = self.context.rptObj.materials.composite(schema)
dom_obj = JsMdcComponents.Icon(span)
span.style.builder(span.style.varName, dom_obj.instantiate("#%s" % span.htmlCode))
# Add the specific dom features
span.dom = dom_obj
return span
def surface(self):
"""
Description:
------------
Related Pages:
https://material.io/develop/web/components/menu-surface/
"""
schema = {"type": 'div', 'class': None, 'css': None}
menu = self.context.rptObj.materials.composite(schema, options={"reset_class": True})
dom_obj = JsMdcComponents.MenuSurface(menu)
menu.style.builder(menu.style.varName, dom_obj.instantiate("#%s" % menu.htmlCode))
# Add the specific dom features
menu.dom = dom_obj
return menu
def field(self, htmlCode=None):
"""
Description:
------------
Attributes:
----------
:param htmlCode: Optional. String. The component identifier code (for both Python and Javascript)
"""
schema = {"type": 'label', 'css': None}
label = self.context.rptObj.materials.composite(
schema, options={"reset_class": True})
dom_obj = JsMdcComponents.TextRipple(label)
label.style.builder(label.style.varName,
dom_obj.instantiate("#%s" % label.htmlCode))
# Add the specific dom features
label.dom = dom_obj
return label
def checkbox(self, flag, text, width=24, height=24):
"""
Description:
------------
Checkboxes allow the user to select one or more items from a set.
Usage::
rptObj.materials.inputs.checkbox(True, "test")
rptObj.materials.inputs.checkbox(False, "test2")
chk3 = rptObj.materials.inputs.checkbox(False, "test3")
rptObj.js.addOnReady([chk3.dom.setStatus('indeterminate')])
Related Pages:
https://material.io/develop/web/components/input-controls/checkboxes/
Attributes:
----------
:param text:
"""
schema = {"type": 'div', 'class': 'mdc-form-field', 'css': False, 'children': [
{"type": 'div', "class": "mdc-checkbox", 'css': False, 'children': [
{'type': 'checkbox', 'class': 'mdc-checkbox__native-control', 'alias': 'checkbox', 'css': False, 'args': {'flag': flag}},
{'type': 'div', 'class': 'mdc-checkbox__background', 'css': False, 'children': [
{'type': 'svg', 'class': 'mdc-checkbox__checkmark', 'css': False, 'attrs': {'viewBox': '0 0 %s %s' % (width, height)}, 'children': [
{'type': 'path', 'class': 'mdc-checkbox__checkmark-path', 'css': False, 'args': {'bespoke_path': ["M1.73,12.91 8.1,19.28 22.79,4.59"]}}
]},
{'type': 'div', 'class': 'mdc-checkbox__mixedmark', 'css': False}
]},
{'type': 'div', 'class': 'checkbox__ripple', 'css': False}
]},
{'type': 'label', 'css': False, 'args': {'text': text}}
]}
html_chk = self.context.rptObj.materials.composite(schema, options={"reset_class": True})
dom_obj = JsMdcComponents.CheckBox(html_chk)
if flag:
self.context.rptObj.js.addOnReady([dom_obj.setStatus('checked')])
html_chk.style.builder(html_chk.style.varName, dom_obj.instantiate("#%s" % html_chk.htmlCode))
html_chk.dom = dom_obj
return html_chk
def list(self, data):
"""
Description:
------------
Related Pages:
https://material.io/develop/web/components/lists/
Attributes:
----------
:param data:
"""
schema = {"type": 'div', 'css': False, 'children': []}
for i, d in enumerate(data):
schema['children'].append({
'type':
'item',
'class':
"mdc-list-item",
'css':
False,
'attrs': {
"tabindex": i
},
'children': [{
"type": 'span',
'class': "mdc-list-item__text",
'css': False,
'args': {
"text": d
}
}]
})
html_l = self.context.rptObj.materials.composite(
schema, options={"reset_class": True})
dom_obj = JsMdcComponents.List(html_l)
html_l.style.builder(html_l.style.varName,
dom_obj.instantiate("#%s" % html_l.htmlCode))
# Add the specific dom features
html_l.dom = dom_obj
return html_l
def button(self, text=""):
"""
Description:
------------
The icon button will work without JavaScript, but you can enhance it to have a ripple effect by instantiating MDCRipple on the root element. See MDC Ripple for details.
Related Pages:
https://material.io/develop/web/components/buttons/icon-buttons/
Attributes:
----------
:param text:
"""
schema = {"type": 'button', 'class': "material-icons", 'css': None}
button = self.context.rptObj.materials.composite(schema, options={"reset_class": True})
dom_obj = JsMdcComponents.ButtonFloating(button)
button.style.builder(button.style.varName, dom_obj.instantiate("#%s" % button.htmlCode))
# Add the specific dom features
button.dom = dom_obj
button.onReady([button.dom.unbounded(True)])
return button
def chip(self, text):
"""
Description:
------------
Chips are compact elements that allow users to enter information, select a choice, filter content, or trigger an action.
Usage::
rptObj.materials.inputs.chip(["test %s" % i for i in range(5)])
Related Pages:
https://material.io/develop/web/components/chips/
Attributes:
----------
:param text:
"""
schema = {"type": 'div', 'class': 'mdc-chip-set mdc-chip-set--input', 'attrs': {'role': 'grid'}, 'children': []}
if not isinstance(text, list):
text = [text]
for t in text:
schema['children'].append({"type": 'div', "class": "mdc-chip", 'css': False, 'attrs': {'role': 'row'}, 'children': [
{"type": 'div', "class": "mdc-chip__ripple", 'css': False},
{"type": 'icon', "class": "material-icons mdc-chip__icon mdc-chip__icon--leading", 'css': False, 'args': {'text': 'event'}},
{"type": 'div', 'attrs': {'role': 'gridcell'}, 'css': False, 'children': [
{"type": 'div', "class": "mdc-chip__primary-action", 'attrs': {'role': 'button'}, 'css': False, 'children': [
{"type": 'span', "class": "mdc-chip__text", 'css': False, 'args': {'text': t}},
]},
]},
]})
html_c = self.context.rptObj.materials.composite(schema, options={"reset_class": True})
dom_obj = JsMdcComponents.Chip(html_c)
html_c.style.builder(html_c.style.varName, dom_obj.instantiate("#%s" % html_c.htmlCode))
# Add the specific dom features
html_c.dom = dom_obj
return html_c
def mdc_radio(self, flag=False, value="", group_name=None):
"""
Description:
------------
Radio buttons allow the user to select one option from a set while seeing all available options.
Usage::
rptObj.materials.inputs.radio(True, group_name="group_1")
rptObj.materials.inputs.radio(False, group_name="group_1")
Related Pages:
https://material.io/develop/web/components/input-controls/radio-buttons/
Attributes:
----------
:param flag:
:param value:
:param group_name:
"""
schema = {"type": 'div', 'css': False, 'children': [
{"type": 'radio', "class": "mdc-radio__native-control", 'attrs': {"value": value}, 'css': False, 'args': {'flag': flag, 'group_name': group_name}},
{"type": 'div', "class": "mdc-radio__background", 'css': False, 'children': [
{"type": 'div', "class": "mdc-radio__outer-circle", 'css': False},
{"type": 'div', "class": "mdc-radio__inner-circle", 'css': False},
]},
{"type": 'div', "class": "mdc-radio__ripple", 'css': False},
]}
html_r = self.context.rptObj.materials.composite(schema, options={"reset_class": True})
dom_obj = JsMdcComponents.Radio(html_r)
html_r.style.builder(html_r.style.varName, dom_obj.instantiate("#%s" % html_r.htmlCode))
# Add the specific dom features
html_r.dom = dom_obj
html_r.css({"margin": '5px'})
return html_r
def icon(self, text="", in_text_field=False, tooltip=""):
"""
Description:
------------
Related Pages:
https://material.io/develop/web/components/buttons/icon-buttons/
Attributes:
----------
:param text:
:param in_text_field:
:param tooltip:
"""
schema = {"type": 'span', 'class': "material-icons", 'css': None, 'attrs': {"role": 'button'}, 'args': {"text": text}}
span = self.context.rptObj.materials.composite(schema, options={"reset_class": True})
if in_text_field:
dom_obj = JsMdcComponents.Icon(span)
span.style.builder(span.style.varName, dom_obj.instantiate("#%s" % span.htmlCode))
# Add the specific dom features
span.dom = dom_obj
span.tooltip(tooltip)
return span
def outlined(self, data, label="", htmlCode=None):
"""
Description:
------------
MDC Select provides Material Design single-option select menus, using the MDC menu. The Select component is fully accessible, and supports RTL rendering.
Related Pages:
https://material.io/develop/web/components/input-controls/select-menus/
Attributes:
----------
:param data: Array. The list of data
:param label: Optional. String. The component label
:param htmlCode: Optional. String. The component identifier code (for both Python and Javascript)
"""
schema = {
"type":
'div',
'class':
'mdc-select--outlined',
'css':
False,
'children': [{
"type":
'div',
"class":
"mdc-select__anchor demo-width-class",
'css':
False,
'children': [
{
"type": 'icon',
"class": "mdc-select__dropdown-icon",
'css': False
},
{
"type": 'div',
"class": "mdc-select__selected-text",
'css': False
},
{
"type":
'div',
"class":
"mdc-notched-outline",
'css':
False,
'children': [{
"type": 'div',
"class": "mdc-notched-outline__leading",
'css': False
}, {
"type":
'div',
"class":
"mdc-notched-outline__notch",
'css':
False,
'children': [{
"type": 'mdc_floating',
'class-keep': True,
'args': {
"label": label
}
}]
}, {
"type": 'div',
"class": "mdc-notched-outline__trailing",
'css': False
}]
},
]
}, {
"type":
'div',
"class":
"mdc-select__menu mdc-menu mdc-menu-surface demo-width-class",
'css':
False,
'children': [{
"type": 'list',
"class": "mdc-list",
'css': False,
'children': []
}]
}]
}
for d in data:
schema['children'][1]['children'][0]['children'].append({
"type": 'item',
"class": "mdc-list-item",
'css': False,
'args': {
"text": d
},
'attrs': {
"data-value": d
}
})
html_b = self.context.rptObj.materials.composite(
schema, options={"reset_class": True})
html_b.style.css.margin = 2
dom_obj = JsMdcComponents.Select(html_b)
html_b.style.builder(html_b.style.varName,
dom_obj.instantiate("#%s" % html_b.htmlCode))
# Add the specific dom features
html_b.dom = dom_obj
return html_b
def filled(self, data, label="", htmlCode=None):
"""
Description:
------------
The select uses an MDCMenu component instance to contain the list of options, but uses the data-value attribute instead of value to represent the options’ values.
Related Pages:
https://material.io/develop/web/components/input-controls/select-menus/
Attributes:
----------
:param data: Array. The list of data
:param label: Optional. String. The component label
:param htmlCode: Optional. String. The component identifier code (for both Python and Javascript)
"""
schema = {
"type":
'div',
'css':
False,
'children': [{
"type":
'div',
"class":
"mdc-select__anchor demo-width-class",
'css':
False,
'children': [{
"type": 'icon',
"class": "mdc-select__dropdown-icon",
'css': False
}, {
"type": 'div',
"class": "mdc-select__selected-text",
'css': False
}, {
"type": 'mdc_floating',
'class-keep': True,
'css': False,
'args': {
"label": label
}
}, {
"type": 'mdc_line',
'class-keep': True
}]
}, {
"type":
'div',
"class":
"mdc-select__menu mdc-menu mdc-menu-surface demo-width-class",
'css':
False,
'children': [
{
"type": 'list',
"class": "mdc-list",
'css': False,
'children': []
},
]
}]
}
for d in data:
schema['children'][1]['children'][0]['children'].append({
"type": 'item',
"class": "mdc-list-item",
'css': False,
'args': {
"text": d
},
'attrs': {
"data-value": d
}
})
html_b = self.context.rptObj.materials.composite(
schema, options={"reset_class": True})
dom_obj = JsMdcComponents.Select(html_b)
html_b.style.builder(html_b.style.varName,
dom_obj.instantiate("#%s" % html_b.htmlCode))
# Add the specific dom features
html_b.dom = dom_obj
return html_b
def icon(self, value, htmlCode=None):
"""
Description:
------------
Usage::
rptObj.materials.texts.icon("favorite")
Related Pages:
https://material.io/develop/web/components/input-controls/text-field/icon/
Attributes:
----------
:param value:
:param htmlCode: Optional. String. The component identifier code (for both Python and Javascript)
"""
schema = {
"type":
'label',
'class':
'mdc-text-field mdc-text-field--with-leading-icon',
'children': [
{
"type": 'icon',
"class":
"material-icons mdc-text-field__icon mdc-text-field__icon--leading",
'attrs': {
'tabindex': 0
},
'arias': {
'role': 'button'
},
'css': False,
'args': {
'text': value
}
},
{
"type": 'input',
'class': 'mdc-text-field__input'
},
{
"type": 'span',
'class': 'mdc-floating-label'
},
{
"type": 'div',
'class': 'mdc-line-ripple'
},
]
}
html_t = self.context.rptObj.materials.composite(
schema, options={"reset_class": True})
dom_obj = JsMdcComponents.Icon(html_t)
html_t.style.builder(html_t.style.varName,
dom_obj.instantiate("#%s" % html_t.htmlCode))
# Add the specific dom features
html_t.dom = dom_obj
return html_t
def snackbar(self,
text,
btn_label='RETRY',
btn_action=None,
type='NORMAL',
dismiss=True):
"""
Description:
------------
Snackbars provide brief messages about app processes at the bottom of the screen.
Usage::
rptObj.materials.text.checkbox(True, "test")
rptObj.materials.inputs.checkbox(False, "test2")
chk3 = rptObj.materials.inputs.checkbox(False, "test3")
rptObj.js.addOnReady([chk3.dom.setStatus('indeterminate')])
Related Pages:
https://material.io/develop/web/components/snackbars/
Attributes:
----------
:param text: text to appear in the bar
:param btn_label: Label to be applied to the snackbar
:param btn_action: Action to trigger on click
:param type: Normal, Leading or Stacked
"""
display_map = {
'NORMAL': 'mdc-snackbar',
'STACKED': 'mdc-snackbar mdc-snackbar--stacked',
'LEADING': 'mdc-snackbar mdc-snackbar--leading'
}
if dismiss:
schema = {
"type":
'div',
'class':
display_map.get(type.upper(), 'mdc-snackbar'),
'css':
False,
'children': [
{
"type":
'div',
"class":
"mdc-snackbar__surface",
'css':
False,
'children': [
{
'type': 'div',
'class': 'mdc-snackbar__label',
'css': False,
'attrs': {
'role': 'status'
},
'arias': {
'live': 'polite'
},
'args': {
'htmlObjs': text
}
},
{
'type':
'div',
'class':
'mdc-snackbar__actions',
'css':
False,
'children': [
{
'type':
'button',
'class':
'mdc-button mdc-snackbar__action',
'css':
False,
'attrs': {
'type': 'button'
},
'children': [{
'type': 'div',
'class': 'mdc-button__ripple',
'css': False
}, {
'type': 'span',
'class': 'mdc-button__label',
'css': False,
'args': {
'text': btn_label
}
}]
},
{
'type': 'button',
'class':
'mdc-icon-button mdc-snackbar__dismiss material-icons',
'css': False,
'attrs': {
'title': 'Dismiss'
},
'args': {
'text': 'close'
}
},
]
},
]
},
]
}
else:
schema = {
"type":
'div',
'class':
display_map.get(type.upper(), 'mdc-snackbar'),
'css':
False,
'children': [
{
"type":
'div',
"class":
"mdc-snackbar__surface",
'css':
False,
'children': [
{
'type': 'div',
'class': 'mdc-snackbar__label',
'css': False,
'attrs': {
'role': 'status'
},
'arias': {
'live': 'polite'
},
'args': {
'htmlObjs': text
}
},
{
'type':
'div',
'class':
'mdc-snackbar__actions',
'css':
False,
'children': [
{
'type':
'button',
'class':
'mdc-button mdc-snackbar__action',
'css':
False,
'attrs': {
'type': 'button'
},
'children': [{
'type': 'div',
'class': 'mdc-button__ripple',
'css': False
}, {
'type': 'span',
'class': 'mdc-button__label',
'css': False,
'args': {
'text': btn_label
}
}]
},
]
},
]
},
]
}
html_snackbar = self.context.rptObj.materials.composite(
schema, options={"reset_class": True})
dom_obj = JsMdcComponents.SnackBar(html_snackbar)
html_snackbar.style.builder(
html_snackbar.style.varName,
dom_obj.instantiate("#%s" % html_snackbar.htmlCode))
html_snackbar.dom = dom_obj
return html_snackbar
def slider(self, value=0, total=100, label="", htmlCode=None):
"""
Description:
------------
MDC Slider provides an implementation of the Material Design slider component.
It is modeled after the browser’s <input type="range"> element. Sliders are fully RTL-aware, and conform to the WAI-ARIA slider authoring practices.
Related Pages:
https://material.io/develop/web/components/input-controls/sliders/
Attributes:
----------
:param value:
:param total:
:param label:
:param htmlCode: Optional. String. The component identifier code (for both Python and Javascript)
"""
schema = {
"type":
'div',
'css':
None,
'attrs': {
"tabindex": 0
},
'arias': {
"role": 'slider',
'label': label,
'valuenow': value,
'valuemax': total,
'valuemin': 0
},
'children': [
{
"type":
'div',
'class':
'mdc-slider__track-container',
'css':
None,
'children': [{
"type": 'div',
'class': 'mdc-slider__track',
'css': None
}]
},
{
"type":
'div',
'class':
'mdc-slider__thumb-container',
'css':
None,
'children': [{
"type": 'circle',
'class': 'mdc-slider__thumb',
'css': None,
'args': {
"x": 10.5,
"y": 10.5,
'r': 7.875,
"width": (21, "px"),
"height": (21, "px")
}
}]
},
#{"type": 'div', 'class': 'mdc-slider__focus-ring', 'css': None}
]
}
html_pr = self.context.rptObj.materials.composite(
schema, options={"reset_class": True})
dom_obj = JsMdcComponents.Slider(html_pr)
html_pr.style.builder(html_pr.style.varName,
dom_obj.instantiate("#%s" % html_pr.htmlCode))
# Add the specific dom features
html_pr.dom = dom_obj
return html_pr
def progressbar(self, number=0, total=100, label="", htmlCode=None):
"""
The MDC Linear Progress component is a spec-aligned linear progress indicator component adhering to the Material Design progress & activity requirements.
Related Pages:
https://material.io/develop/web/components/linear-progress/
Attributes:
----------
:param number:
:param total:
:param label:
:param htmlCode: Optional. String. The component identifier code (for both Python and Javascript)
"""
schema = {
"type":
'div',
'css':
None,
'arias': {
'role': 'progressbar',
'valuemin': 0,
'valuemax': 1,
'valuenow': number / total,
'label': label
},
'children': [
{
"type": 'div',
'class': 'mdc-linear-progress__buffering-dots',
'css': None
},
{
"type": 'div',
'class': 'mdc-linear-progress__buffer',
'css': None
},
{
"type":
'div',
'css':
None,
'class':
'mdc-linear-progress__bar mdc-linear-progress__primary-bar',
'children': [{
"type": 'span',
'class': 'mdc-linear-progress__bar-inner',
'css': None
}]
},
{
"type":
'div',
'css':
None,
'class':
'mdc-linear-progress__bar mdc-linear-progress__secondary-bar',
'children': [{
"type": 'span',
'class': 'mdc-linear-progress__bar-inner',
'css': None
}]
},
]
}
html_pr = self.context.rptObj.materials.composite(
schema, options={"reset_class": True})
dom_obj = JsMdcComponents.LinearProgress(html_pr)
html_pr.style.builder(html_pr.style.varName,
dom_obj.instantiate("#%s" % html_pr.htmlCode))
# Add the specific dom features
html_pr.dom = dom_obj
html_pr.onReady([html_pr.dom.setProgress(number)])
return html_pr
def tracker(self, value=0, total=100, label="", htmlCode=None):
"""
Description:
------------
Discrete sliders support display markers on their tracks by adding the mdc-slider--display-markers modifier class to mdc-slider, and <div class="mdc-slider__track-marker-container"></div> to the track container.
Related Pages:
https://material.io/develop/web/components/input-controls/sliders/
Attributes:
----------
:param value:
:param total:
:param label:
:param htmlCode: Optional. String. The component identifier code (for both Python and Javascript)
"""
schema = {
"type":
'div',
'class':
'mdc-slider mdc-slider--discrete mdc-slider--display-markers',
'css':
None,
'attrs': {
"tabindex": 0
},
'arias': {
"role": 'slider',
'label': label,
'valuenow': value,
'valuemax': total,
'valuemin': 0
},
'children': [
{
"type":
'div',
'class':
'mdc-slider__track-container',
'css':
None,
'children': [
{
"type": 'div',
'class': 'mdc-slider__track',
'css': None
},
{
"type": 'div',
'class': 'mdc-slider__track-marker-container',
'css': None
},
]
},
{
"type":
'div',
'class':
'mdc-slider__thumb-container',
'css':
None,
'children': [{
"type":
'div',
'class':
'mdc-slider__pin',
'css':
None,
'children': [{
"type": 'span',
'class': 'mdc-slider__pin-value-marker',
'css': None
}]
}, {
"type": 'circle',
'class': 'mdc-slider__thumb',
'css': None,
'args': {
"x": 10.5,
"y": 10.5,
'r': 7.875,
"width": (21, "px"),
"height": (21, "px")
}
}, {
"type": 'div',
'class': 'mdc-slider__focus-ring',
'css': None
}]
},
# {"type": 'div', 'class': 'mdc-slider__focus-ring', 'css': None}
]
}
html_pr = self.context.rptObj.materials.composite(
schema, options={"reset_class": True})
dom_obj = JsMdcComponents.Slider(html_pr)
html_pr.style.builder(html_pr.style.varName,
dom_obj.instantiate("#%s" % html_pr.htmlCode))
# Add the specific dom features
html_pr.dom = dom_obj
return html_pr
def button(self, icon, label=""):
"""
Description:
------------
The icon button from Materials
Related Pages:
https://material.io/develop/web/components/buttons/floating-action-buttons/
Attributes:
----------
:param icon: String. The icon from Materials Icons
:param label: String. The label
"""
self.context.rptObj.cssImport.add("material-icons")
if not label:
schema = {
"type":
'button',
'class':
None,
'css':
None,
'arias': {
"pressed": False
},
'children': [{
"type": 'div',
'class': 'mdc-button__ripple',
'css': None
}, {
"type": 'span',
'class': 'mdc-button__label',
'css': None,
'args': {
"text": label
}
}, {
"type": 'div',
'class': 'material-icons mdc-button__icon',
'css': None,
'args': {
"htmlObjs": icon
}
}]
}
else:
schema = {
"type":
'button',
'class':
None,
'css':
None,
'arias': {
"pressed": False
},
'children': [{
"type": 'div',
'class': 'mdc-fab__ripple',
'css': None
}, {
"type": 'span',
'class': 'mdc-fab__icon material-icons',
'css': None,
'args': {
"text": icon
}
}]
}
button = self.context.rptObj.materials.composite(
schema, options={"reset_class": True})
dom_obj = JsMdcComponents.Button(button)
button.style.builder(button.style.varName,
dom_obj.instantiate("#%s" % button.htmlCode))
# Add the specific dom features
button.dom = dom_obj
return button
def app_bar(self, title, icon="menu", buttons=None, htmlCode=None):
"""
Description:
------------
MDC Top App Bar acts as a container for items such as application title, navigation icon, and action items.
Related Pages:
https://material.io/develop/web/components/drawers/
Attributes:
----------
:param title:
:param icon:
:param buttons:
:param htmlCode: Optional. String. The component identifier code (for both Python and Javascript)
"""
schema = {
"type":
'header',
'class-keep':
True,
'class':
'app-bar',
'css':
False,
'children': [{
"type":
'div',
'css':
False,
'class':
'mdc-top-app-bar__row',
'children': [{
"type":
'section',
'css':
False,
'class':
"mdc-top-app-bar__section mdc-top-app-bar__section--align-start",
'children': [
{
"type":
'icon',
'class-keep':
True,
'css':
False,
'args': {
'text': icon
},
'class':
"mdc-top-app-bar__navigation-icon mdc-icon-button"
},
{
"type": 'span',
'css': False,
'class': 'mdc-top-app-bar__title',
'args': {
"text": title
}
},
]
}, {
"type": 'div',
'css': False,
'class':
'mdc-top-app-bar__section mdc-top-app-bar__section--align-end',
'attrs': {
"role": 'toolbar'
},
'children': []
}]
}]
}
if buttons is not None:
for b in buttons:
schema['children'][1]['children'].append({
"type":
'icon',
'class-keep':
True,
'css':
False,
'arias': {
'label': b
},
'args': {
'text': b
},
'class':
"mdc-top-app-bar__navigation-icon mdc-icon-button"
})
html_t = self.context.rptObj.materials.composite(
schema, options={"reset_class": True})
dom_obj = JsMdcComponents.TopBar(html_t)
html_t.style.builder(html_t.style.varName,
dom_obj.instantiate("#%s" % html_t.htmlCode))
# Add the specific dom features
html_t.dom = dom_obj
return html_t
def drawers(self, sections, htmlCode=None):
"""
Description:
------------
The MDC Navigation Drawer is used to organize access to destinations and other functionality on an app.
Related Pages:
https://material.io/develop/web/components/drawers/
Attributes:
----------
:param sections:
:param htmlCode: Optional. String. The component identifier code (for both Python and Javascript)
"""
schema = {
"type":
'aside',
'class-keep':
True,
'class':
'mdc-drawer--modal',
'css':
False,
'children': [{
"type":
'div',
'css':
False,
'class':
'mdc-drawer__content',
'children': [{
"type": 'nav',
'class': 'mdc-list',
'css': False,
'children': []
}]
}]
}
for s in sections:
schema['children'][0]['children'][0]['children'].append({
"type":
'link',
'class':
'mdc-list-item',
'args': {
"text": '',
'url': '#'
},
'css':
False,
'children': [{
"type": 'icon',
'class': 'material-icons mdc-list-item__graphic',
'css': False,
'arias': {
'hidden': True
},
'args': {
'text': 'inbox'
}
}, {
"type": 'span',
'css': False,
'class': 'mdc-list-item__text',
'args': {
"text": s
}
}]
})
html_t = self.context.rptObj.materials.composite(
schema, options={"reset_class": True})
dom_obj = JsMdcComponents.Drawers(html_t)
html_t.style.builder(html_t.style.varName,
dom_obj.instantiate("#%s" % html_t.htmlCode))
# Add the specific dom features
html_t.dom = dom_obj
return html_t
def checkbox(self, data, group_name=None):
"""
Description:
------------
When rendering list with checkbox items all pre-selected list items should contain aria-checked set to true and the native checkbox input element should contain checked attribute, all other list items should have aria-checked set to false.
Each list item in checkbox list contains role="checkbox" attribute and the list root should contain role="group" and aria-label attributes.
Related Pages:
https://material.io/develop/web/components/lists/
Attributes:
----------
:param data:
:param group_name:
"""
if group_name is None:
group_name = "radios_%s" % id(data)
schema = {
"type": 'list',
'css': False,
'arias': {
'label': 'List with checkbox items'
},
'attrs': {
'role': 'group'
},
'children': []
}
for i, d in enumerate(data):
schema['children'].append({
'type':
'item',
'class':
"mdc-list-item",
'css':
False,
'attrs': {
"tabindex": i,
'role': 'checkbox'
},
'arias': {
'checked': False
},
'children': [
{
"type":
'div',
'class':
"mdc-list-item__graphic",
'css':
False,
'children': [
{
"type":
'div',
"class":
"mdc-checkbox",
'css':
False,
'children': [{
"type": 'checkbox',
"class": "mdc-checkbox__native-control",
'css': False,
'attrs': {
"value": d
},
'args': {
'flag': False
}
}, {
"type": 'div',
"class": "mdc-checkbox__background",
'css': False
}]
},
]
},
{
"type": 'label',
"class": "mdc-list-item__text",
'css': False,
'args': {
"text": d
}
},
]
})
html_l = self.context.rptObj.materials.composite(
schema, options={"reset_class": True})
dom_obj = JsMdcComponents.List(html_l)
html_l.style.builder(html_l.style.varName,
dom_obj.instantiate("#%s" % html_l.htmlCode))
# Add the specific dom features
html_l.dom = dom_obj
return html_l
def tabs(self, data, htmlCode=None):
"""
Description:
------------
Tabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.
The Tab Bar contains the Tab Scroller and Tab components.
Related Pages:
https://material.io/develop/web/components/tabs/tab-bar/
Attributes:
----------
:param data:
:param htmlCode: Optional. String. The component identifier code (for both Python and Javascript)
"""
schema = {
"type":
'div',
'css':
False,
'attrs': {
'role': 'tablist'
},
'children': [{
"type":
'div',
'css':
False,
'class':
'mdc-tab-scroller',
'children': [{
"type":
'div',
'css':
False,
'class':
"mdc-tab-scroller__scroll-area",
'children': [{
"type": 'div',
'css': False,
'class': "mdc-tab-scroller__scroll-content",
'children': []
}]
}]
}]
}
for text in data:
schema['children'][0]['children'][0]['children'][0][
'children'].append({
"type":
'button',
'css':
False,
'class':
'mdc-tab mdc-tab--active',
'attrs': {
"role": 'tab'
},
'arias': {
"selected": False
},
'children': [{
"type":
'div',
'css':
False,
'class':
'mdc-tab__content',
'children': [
{
"type": 'span',
'css': False,
'class': 'mdc-tab__icon material-icons',
'arias': {
"hidden": True
}
},
{
"type": 'span',
'css': False,
'class': 'mdc-tab__text-label',
'args': {
"text": text
}
},
]
}, {
"type":
'div',
'css':
False,
'class':
'mdc-tab-indicator mdc-tab-indicator',
'children': [{
"type":
'span',
'css':
False,
'class':
'mdc-tab-indicator__content mdc-tab-indicator__content--underline'
}]
}, {
"type": 'span',
'css': False,
'class': 'mdc-tab__ripple'
}]
})
html_t = self.context.rptObj.materials.composite(
schema, options={"reset_class": True})
#
dom_obj = JsMdcComponents.TabBar(html_t)
html_t.style.builder(html_t.style.varName,
dom_obj.instantiate("#%s" % html_t.htmlCode))
# Add the specific dom features
html_t.dom = dom_obj
return html_t