Skip to content

Commit bad958b

Browse files
eadwinCodeeadwinCode
committed
Added Component and LazyComponent, refactor NodeContext and BuildContext and fixed component dynamic loading
1 parent dad8df0 commit bad958b

File tree

10 files changed

+443
-366
lines changed

10 files changed

+443
-366
lines changed

‎bootstrap_exercise.py‎

Lines changed: 99 additions & 118 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,4 @@
1+
from py_html.contrib.bootstrap.main import BootstrapHTML
12
from py_html.el.base import render_component
23
from starlette.responses import HTMLResponse
34

@@ -19,31 +20,11 @@
1920

2021
router = ModuleRouter("/example")
2122

23+
2224
@router.get("/", response=HTMLResponse)
2325
def template():
24-
content = el.Html(
25-
content=(
26-
el.Head(
27-
content=lambda ctx: el.Fragment(
28-
el.Title(page_title="Bootstrap Example"),
29-
el.Meta(charset="utf-8"),
30-
el.Meta(name="viewport", content="width=device-width, initial-scale=1"),
31-
# Latest compiled and minified CSS
32-
el.Link(
33-
href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css",
34-
rel="stylesheet"
35-
),
36-
el.Link(
37-
href="https://cdn.jsdelivr.net/npm/[email protected]/font/bootstrap-icons.min.css",
38-
rel="stylesheet"
39-
),
40-
# Latest compiled JavaScript
41-
el.Script(
42-
src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"
43-
),
44-
*(ctx.get('root_styles', []))
45-
)
46-
),
26+
content = BootstrapHTML(
27+
content=[
4728
el.Body(
4829
content=lambda ctx: el.Fragment(
4930
"""
@@ -80,116 +61,116 @@ def template():
8061
el.P(content="This is some text.")
8162
)
8263
),
83-
BContainer(
84-
class_name=f"p-5 my-5 border",
85-
content=(
86-
el.H1(content="Avatars Examples"),
87-
el.Div(class_name="mt-2", content=(
88-
BAvatar(text="Foo", class_name="mx-2", size="72px"),
89-
BAvatar(icon="people-fill", class_name="mx-2", size="72px"),
90-
BAvatar(
91-
icon="people-fill",
92-
class_name="mx-2",
93-
size="45px",
94-
badge='100',
95-
variant="primary",
96-
badge_variant="dark"
97-
),
98-
BAvatar(
99-
icon="people-fill",
100-
class_name="mx-2",
101-
size="45px",
102-
badge=BIcon(icon_name="exclamation-circle-fill",variant="warning"),
103-
variant="danger",
104-
badge_variant="danger",
105-
badge_position="bottom-left"
106-
),
107-
)),
108-
el.Hr(),
109-
el.H1(content="Avatars Group Examples"),
110-
el.Div(class_name="mt-2", content=(
111-
BAvatarGroup(
112-
size="4rem",
113-
over_lap=0.2,
114-
content=(
115-
BAvatar(text="Foo", size="72px"),
116-
BAvatar(icon="people-fill", size="72px"),
117-
BAvatar(
118-
icon="people-fill",
119-
size="45px",
120-
badge='100',
121-
variant="primary",
122-
badge_variant="dark"
123-
),
124-
BAvatar(
125-
icon="people-fill",
126-
size="45px",
127-
badge=BIcon(icon_name="exclamation-circle-fill", variant="warning"),
128-
variant="danger",
129-
badge_variant="danger",
130-
badge_position="bottom-left"
131-
),
64+
BContainer(
65+
class_name=f"p-5 my-5 border",
66+
content=(
67+
el.H1(content="Avatars Examples"),
68+
el.Div(class_name="mt-2", content=(
69+
BAvatar(text="Foo", class_name="mx-2", size="72px"),
70+
BAvatar(icon="people-fill", class_name="mx-2", size="72px"),
71+
BAvatar(
72+
icon="people-fill",
73+
class_name="mx-2",
74+
size="45px",
75+
badge='100',
76+
variant="primary",
77+
badge_variant="dark"
78+
),
79+
BAvatar(
80+
icon="people-fill",
81+
class_name="mx-2",
82+
size="45px",
83+
badge=BIcon(icon_name="exclamation-circle-fill",variant="warning"),
84+
variant="danger",
85+
badge_variant="danger",
86+
badge_position="bottom-left"
87+
),
88+
)),
89+
el.Hr(),
90+
el.H1(content="Avatars Group Examples"),
91+
el.Div(class_name="mt-2", content=(
92+
BAvatarGroup(
93+
size=f"{i+1 * 2}rem",
94+
over_lap=0.2,
95+
content=(
96+
BAvatar(text="Foo", size="72px"),
97+
BAvatar(icon="people-fill", size="72px"),
98+
BAvatar(
99+
icon="people-fill",
100+
size="45px",
101+
badge='100',
102+
variant="primary",
103+
badge_variant="dark"
104+
),
105+
BAvatar(
106+
icon="people-fill",
107+
size="45px",
108+
badge=BIcon(icon_name="exclamation-circle-fill", variant="warning"),
109+
variant="danger",
110+
badge_variant="danger",
111+
badge_position="bottom-right"
112+
),
113+
)
132114
)
133-
)
134-
)),
115+
for i in range(5)
116+
)),
135117

136-
)
137-
),
138-
BContainer(
139-
class_name="p-5 my-5 border",
140-
content=el.Div(
141-
class_name="h2 mb-0",
142-
content=(
143-
BIcon(icon_name="exclamation-circle-fill", class_name="mx-1", variant="success"),
144-
BIcon(icon_name="exclamation-circle-fill", class_name="mx-1",variant="warning"),
145-
BIcon(icon_name="exclamation-circle-fill", class_name="mx-1",variant="info"),
146-
BIcon(icon_name="exclamation-circle-fill", class_name="mx-1",variant="danger"),
147-
BIcon(icon_name="exclamation-circle-fill", class_name="mx-1",variant="primary"),
148-
BIcon(icon_name="exclamation-circle-fill", class_name="mx-1",variant="secondary"),
149-
BIcon(icon_name="exclamation-circle", class_name="mx-1 bg-info",variant="dark",),
150-
BIcon(icon_name="bell-fill", class_name="border rounded p-2 mx-1", variant="dark"),
151118
)
152-
)
153-
),
154-
el.Fragment(ctx.get('root_styles', [])),
155-
BContainer(
156-
class_name="p-5 my-5 bg-primary text-white",
157-
content=el.Fragment(
158-
BRow(
159-
class_name="justify-content-md-center",
160-
content=[
161-
BCol(col=True, lg=2, content="1 of 3", style=StyleCSS(background_color="red")),
162-
BCol(cols="12", md="auto", content="Variable width content",
163-
style=StyleCSS(background_color="yellow")),
164-
BCol(col=True, lg=2, content="Variable width content",
165-
style=StyleCSS(background_color="pink")),
166-
]
167-
),
168-
BRow(
169-
content=[
170-
BCol(content="1 of 3", style=StyleCSS(background_color="orange")),
171-
BCol(cols="12", md="auto", content="Variable width content",
172-
style=StyleCSS(background_color="gray")),
173-
BCol(col=True, lg=2, content="Variable width content",
174-
style=StyleCSS(background_color="smoke")),
175-
]
119+
),
120+
BContainer(
121+
class_name="p-5 my-5 border",
122+
content=el.Div(
123+
class_name="h2 mb-0",
124+
content=(
125+
BIcon(icon_name="exclamation-circle-fill", class_name="mx-1", variant="success"),
126+
BIcon(icon_name="exclamation-circle-fill", class_name="mx-1",variant="warning"),
127+
BIcon(icon_name="exclamation-circle-fill", class_name="mx-1",variant="info"),
128+
BIcon(icon_name="exclamation-circle-fill", class_name="mx-1",variant="danger"),
129+
BIcon(icon_name="exclamation-circle-fill", class_name="mx-1",variant="primary"),
130+
BIcon(icon_name="exclamation-circle-fill", class_name="mx-1",variant="secondary"),
131+
BIcon(icon_name="exclamation-circle", class_name="mx-1 bg-info",variant="dark",),
132+
BIcon(icon_name="bell-fill", class_name="border rounded p-2 mx-1", variant="dark"),
133+
)
176134
)
177-
)
178-
),
135+
),
136+
BContainer(
137+
class_name="p-5 my-5 bg-primary text-white",
138+
content=el.Fragment(
139+
BRow(
140+
class_name="justify-content-md-center",
141+
content=[
142+
BCol(col=True, lg=2, content="1 of 3", style=StyleCSS(background_color="red")),
143+
BCol(cols="12", md="auto", content="Variable width content",
144+
style=StyleCSS(background_color="yellow")),
145+
BCol(col=True, lg=2, content="Variable width content",
146+
style=StyleCSS(background_color="pink")),
147+
]
148+
),
149+
BRow(
150+
content=[
151+
BCol(content="1 of 3", style=StyleCSS(background_color="orange")),
152+
BCol(cols="12", md="auto", content="Variable width content",
153+
style=StyleCSS(background_color="gray")),
154+
BCol(col=True, lg=2, content="Variable width content",
155+
style=StyleCSS(background_color="smoke")),
156+
]
157+
)
158+
)
159+
),
179160
)
180161
)
181-
)
162+
]
182163
)
183164

184165
return render_component(content, {})
185166

167+
186168
def bootstrap():
187169
application = AppFactory.create_app(routers=[router])
188170
return application
189171

190172

191173
cli = create_ellar_cli("bootstrap_exercise:bootstrap")
192174

193-
194175
if __name__ == "__main__":
195-
cli()
176+
cli()

0 commit comments

Comments
 (0)