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

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
},
}
}