1+ from py_html .el .base import render_component
2+ from starlette .responses import HTMLResponse
3+
4+ from ellar .common .responses .models import HTMLResponseModel
5+
6+ from ellar .common import ModuleRouter
7+
8+ from ellar .app import AppFactory
9+ from ellar_cli .main import create_ellar_cli
10+
11+ from py_html .contrib .bootstrap .icon import BIcon
12+
13+ from py_html .contrib .bootstrap .avatar import BAvatar , BAvatarGroup
14+
15+ from py_html .contrib .bootstrap .layout_grid_system import BContainer , BRow , BCol
16+
17+ from py_html .styles import StyleCSS
18+ import py_html .el as el
19+
20+ router = ModuleRouter ("/example" )
21+
22+ @router .get ("/" , response = HTMLResponse )
23+ 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+ ),
47+ el .Body (
48+ content = lambda ctx : el .Fragment (
49+ """
50+ <div class="container-fluid">
51+ <h1>My First Bootstrap Page</h1>
52+ <p>This is some text.</p>
53+ </div>
54+ """ ,
55+ BContainer (
56+ fluid = True ,
57+ content = (
58+ el .H1 (content = "My First Bootstrap Page" ),
59+ el .P (content = "This is some text." ),
60+ )
61+ ),
62+ BContainer (
63+ class_name = "p-5 my-5 border" ,
64+ content = (
65+ el .H1 (content = "My First Bootstrap Page" ),
66+ el .P (content = "This is some text." ),
67+ )
68+ ),
69+ BContainer (
70+ class_name = "p-5 my-5 bg-dark text-white" ,
71+ content = (
72+ el .H1 (content = "My First Bootstrap Page" ),
73+ el .P (content = "This is some text." ),
74+ )
75+ ),
76+ BContainer (
77+ class_name = "p-5 my-5 bg-primary text-white" ,
78+ content = (
79+ el .H1 (content = "My First Bootstrap Page" ),
80+ el .P (content = "This is some text." )
81+ )
82+ ),
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+ ),
132+ )
133+ )
134+ )),
135+
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" ),
151+ )
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+ ]
176+ )
177+ )
178+ ),
179+ )
180+ )
181+ )
182+ )
183+
184+ return render_component (content , {})
185+
186+ def bootstrap ():
187+ application = AppFactory .create_app (routers = [router ])
188+ return application
189+
190+
191+ cli = create_ellar_cli ("bootstrap_exercise:bootstrap" )
192+
193+
194+ if __name__ == "__main__" :
195+ cli ()
0 commit comments