jprdonnelly/pyscript
1
0
Fork 0
mirror of https://github.com/pyscript/pyscript.git synced 2025-12-19 18:27:29 -05:00
Code Issues Projects Releases Wiki Activity

simplify base elements demo by moving all the examples to the examples module

Browse Source
This commit is contained in:
Fabio Pliger
2024-02-02 12:41:57 -06:00
parent 6c838ae30d
commit cf987b1ce9
2 changed files with 45 additions and 70 deletions
Download Patch File Download Diff File Expand all files Collapse all files

56
pyscript.core/test/ui/demo.py
View File

@@ -149,8 +149,7 @@ def create_markdown_components_page():
the main area
"""
div_ = div()
div_.append(h2("Markdown"))
div_ = div(h2("Markdown"))
# Buttons
markdown_txt_area = shoelace.TextArea(
@@ -188,66 +187,18 @@ def create_basic_components_page():
the main area
"""
div_ = div()
div_.append(h2("Base components:"))
div_ = div(h2("Base components:"))
for component_label, component in examples.kits["elements"].items():
# div.append(create_component_details(component_label, component))
div_.append(h3(component_label))
div_.append(create_component_example(component['instance'], component['code']))
# Buttons
div_.append(h3("Buttons"))
btn = button("Click me!")
when("click", btn)(lambda: window.alert("Clicked!"))
btn_code = dedent(
"""btn = button("Click me!")
when('click', btn)(lambda: window.alert("Clicked!"))"""
)
div_.append(create_component_example(btn, btn_code))
# Inputs
inputs_div = div()
div_.append(h3("Inputs"))
inputs_code = []
for input_type in [
"text",
"password",
"email",
"number",
"date",
"time",
"color",
"range",
]:
inputs_div.append(input_(type=input_type, style={"display": "block"}))
inputs_code.append(f"input_(type='{input_type}')")
inputs_code = "\n".join(inputs_code)
div_.append(create_component_example(inputs_div, inputs_code))
# DIV
div_.append(h3("Div"))
_div = div(
"This is a div",
style={
"text-align": "center",
"width": "100%",
"margin": "0 auto 0",
"background-color": "cornsilk",
},
)
code = "div = div('This is a div', style={'text-align': 'center', 'margin': '0 auto 0', 'background-color': 'cornsilk'})"
div_.append(create_component_example(_div, code))
return div_
# ********** CREATE ALL THE LAYOUT **********
grid = Grid("minmax(150px, 200px) 20px auto", style={"min-height": "100%"})
grid = Grid("140px 20px auto", style={"min-height": "100%"})
# ********** MAIN PANEL **********
main_area = create_main_area()
@@ -264,6 +215,7 @@ def restore_home():
def basic_components():
write_to_main(create_basic_components_page())
# Make sure we highlight the code
window.hljs.highlightAll()

59
pyscript.core/test/ui/examples.py
View File

@@ -1,5 +1,5 @@
from pyweb import pydom
from pyweb.ui import elements as el
from pyweb.ui.elements import a, button, code, div, Grid, h1, h2, h3, input_, p
from pyweb.ui.shoelace import (
Alert,
Button,
@@ -21,7 +21,7 @@ Details(LOREM_IPSUM, summary="Try me")
"""
example_dialog_close_btn = Button("Close")
example_dialog = Dialog(
el.div([el.p(LOREM_IPSUM), example_dialog_close_btn]), label="Try me"
div([p(LOREM_IPSUM), example_dialog_close_btn]), label="Try me"
)
example_dialog_btn = Button("Open Dialog")
@@ -36,61 +36,80 @@ when("click", example_dialog_close_btn)(toggle_dialog)
pydom.body.append(example_dialog)
# ELEMENTS
btn = el.button("Click me!")
# Button
btn = button("Click me!")
when("click", btn)(lambda: window.alert("Clicked!"))
# Inputs
inputs_div = div()
inputs_code = []
for input_type in [
"text",
"password",
"email",
"number",
"date",
"time",
"color",
"range",
]:
inputs_div.append(input_(type=input_type, style={"display": "block"}))
inputs_code.append(f"input_(type='{input_type}')")
inputs_code = "\n".join(inputs_code)
kits = {
"shoelace": {
"Alert": {
"instance": Alert(
"This is a standard alert. You can customize its content and even the icon."
),
"code": el.code(
"code": code(
"Alert('This is a standard alert. You can customize its content and even the icon.'"
),
},
"Icon": {
"instance": Icon(name="heart"),
"code": el.code('Icon(name="heart")'),
"code": code('Icon(name="heart")'),
},
"Button": {
"instance": Button("Try me"),
"code": el.code('Button("Try me")'),
"code": code('Button("Try me")'),
},
"Card": {
"instance": Card(
el.p("This is a cool card!"),
p("This is a cool card!"),
image="https://pyscript.net/assets/images/pyscript-sticker-black.svg",
footer=el.div([Button("More Info"), Rating()]),
footer=div([Button("More Info"), Rating()]),
),
"code": el.code(
"code": code(
"""
Card(el.p("This is a cool card!"), image="https://pyscript.net/assets/images/pyscript-sticker-black.svg", footer=el.div([Button("More Info"), Rating()]))
Card(p("This is a cool card!"), image="https://pyscript.net/assets/images/pyscript-sticker-black.svg", footer=div([Button("More Info"), Rating()]))
"""
),
},
"Details": {
"instance": Details(LOREM_IPSUM, summary="Try me"),
"code": el.code('Details(LOREM_IPSUM, summary="Try me")'),
"code": code('Details(LOREM_IPSUM, summary="Try me")'),
},
"Dialog": {
"instance": example_dialog_btn,
"code": el.code(
"code": code(
'Dialog(div([p(LOREM_IPSUM), Button("Close")]), summary="Try me")'
),
},
"Divider": {
"instance": Divider(),
"code": el.code("Divider()"),
"code": code("Divider()"),
},
"Rating": {
"instance": Rating(),
"code": el.code("Rating()"),
"code": code("Rating()"),
},
"Radio": {
"instance": Radio(),
"code": el.code("Radio()"),
"code": code("Radio()"),
},
},
'elements':{
@@ -101,8 +120,12 @@ when('click', btn)(lambda: window.alert("Clicked!"))
'''
},
'div': {
'instance': el.div("This is a div"),
'code': 'div("This is a div")'
}
'instance': div("This is a div", style={'text-align': 'center', 'margin': '0 auto', 'background-color': 'cornsilk'}),
'code': 'div("This is a div", style={"text-align": "center", "margin": "0 auto", "background-color": "cornsilk"})'
},
'input':{
'instance': inputs_div,
'code': inputs_code
},
}
}