Skip to content

Commit f1bed1c

Browse files
LineIndentLineIndent
committed
add simple icon wrapper
1 parent dadfe47 commit f1bed1c

37 files changed

+1389
-11424
lines changed

‎demo/demo/demo.py‎

Lines changed: 47 additions & 47 deletions
Original file line numberDiff line numberDiff line change
@@ -3,65 +3,65 @@
33
import reflex as rx
44

55
import reflex_ui as ui
6-
6+
from .simple_icon import simple_icon_demo
77

88
class State(rx.State):
99
seed: int = 0
1010

1111

1212
def index() -> rx.Component:
13-
# Welcome Page (Index)
1413
return rx.el.div(
15-
ui.tooltip(
16-
ui.button(
17-
ui.icon("SmileIcon"),
18-
"Click me",
19-
on_click=rx.toast.success(
20-
"You are cool :)",
21-
position="top-center",
14+
# Left: Column of UI components
15+
rx.el.div(
16+
ui.tooltip(
17+
ui.button(
18+
ui.icon("SmileIcon"),
19+
"Click me",
20+
on_click=rx.toast.success(
21+
"You are cool :)",
22+
position="top-center",
23+
),
2224
),
25+
content="Seriously, click me",
2326
),
24-
content="Seriously, click me",
25-
),
26-
ui.checkbox(
27-
label="Click me",
28-
on_checked_change=lambda value: rx.toast.success(f"Value: {value}"),
29-
),
30-
ui.slider(
31-
value=State.seed,
32-
on_value_change=State.set_seed,
33-
on_value_committed=lambda value: rx.toast.success(f"Value: {value}"),
34-
class_name="max-w-xs",
35-
),
36-
ui.gradient_profile(
37-
seed=State.seed,
38-
class_name="size-10",
39-
),
40-
ui.switch(
41-
on_checked_change=lambda value: rx.toast.success(f"Value: {value}"),
27+
ui.checkbox(
28+
label="Click me",
29+
on_checked_change=lambda value: rx.toast.success(f"Value: {value}"),
30+
),
31+
ui.slider(
32+
value=State.seed,
33+
on_value_change=State.set_seed,
34+
on_value_committed=lambda value: rx.toast.success(f"Value: {value}"),
35+
class_name="max-w-xs",
36+
),
37+
ui.gradient_profile(
38+
seed=State.seed,
39+
class_name="size-10",
40+
),
41+
ui.switch(
42+
on_checked_change=lambda value: rx.toast.success(f"Value: {value}"),
43+
),
44+
ui.select(
45+
items=[f"Item {i}" for i in range(1, 11)],
46+
name="select",
47+
default_value="Select an item",
48+
on_value_change=lambda value: rx.toast.success(f"Value: {value}"),
49+
on_open_change=lambda value: rx.toast.success(f"Open: {value}"),
50+
),
51+
class_name="flex flex-col gap-y-6 justify-center items-center",
4252
),
43-
ui.select(
44-
items=[
45-
"Item 1",
46-
"Item 2",
47-
"Item 3",
48-
"Item 4",
49-
"Item 5",
50-
"Item 6",
51-
"Item 7",
52-
"Item 8",
53-
"Item 9",
54-
"Item 10",
55-
],
56-
name="select",
57-
default_value="Select an item",
58-
on_value_change=lambda value: rx.toast.success(f"Value: {value}"),
59-
on_open_change=lambda value: rx.toast.success(f"Open: {value}"),
53+
54+
# Right: Icon demo
55+
rx.el.div(
56+
simple_icon_demo(),
57+
class_name="flex justify-center items-center",
6058
),
59+
60+
# Theme switcher (floating top-right)
6161
ui.theme_switcher(class_name="absolute top-4 right-4"),
62-
class_name=ui.cn(
63-
"flex flex-col gap-6 items-center justify-center h-screen", "bg-secondary-1"
64-
),
62+
63+
# Parent container: center everything horizontally & vertically
64+
class_name="flex flex-row gap-16 justify-center items-center h-screen bg-secondary-1 relative",
6565
)
6666

6767

‎demo/demo/simple_icon.py‎

Lines changed: 41 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,41 @@
1+
import reflex as rx
2+
import reflex_ui as ui
3+
4+
def simple_icon_demo():
5+
icons = [
6+
"SiGithub",
7+
"SiPytorch",
8+
"SiPython",
9+
"SiReact",
10+
"SiDell",
11+
"SiOkta",
12+
"SiOpenai",
13+
"SiDatabricks",
14+
"SiDocker",
15+
"SiLinux",
16+
"SiVercel",
17+
"SiNetlify"
18+
]
19+
20+
# Define the pyramid shape (row lengths)
21+
row_counts = [1, 2, 3, 4, 5, 4, 3, 2, 1]
22+
23+
# Track the index in the icons list
24+
index = 0
25+
rows = []
26+
27+
for count in row_counts:
28+
row_icons = icons[index:index+count]
29+
index += count
30+
31+
rows.append(
32+
rx.el.div(
33+
*[ui.simple_icon(icon, size=48) for icon in row_icons],
34+
class_name="flex justify-center gap-3 py-1"
35+
)
36+
)
37+
38+
return rx.el.div(
39+
*rows,
40+
class_name="w-full h-screen flex flex-col items-center justify-center"
41+
)

‎reflex_ui/__init__.py‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -38,6 +38,7 @@
3838
**_REFLEX_UI_MAPPING,
3939
"components": ["base"],
4040
"components.icons.hugeicon": ["hi", "icon"],
41+
"components.icons.simple_icon": ["simple_icon"],
4142
"components.icons.others": ["spinner"],
4243
"utils.twmerge": ["cn"],
4344
}

‎reflex_ui/__init__.pyi‎

Lines changed: 13 additions & 79 deletions
Original file line numberDiff line numberDiff line change
@@ -3,8 +3,9 @@
33
# This file was generated by `reflex/utils/pyi_generator.py`!
44
# ------------------------------------------------------
55

6-
from . import components, utils
7-
from .components import base
6+
from . import components
7+
from . import utils
8+
89
from .components.base.accordion import accordion
910
from .components.base.avatar import avatar
1011
from .components.base.badge import badge
@@ -30,86 +31,19 @@ from .components.base.switch import switch
3031
from .components.base.tabs import tabs
3132
from .components.base.textarea import textarea
3233
from .components.base.theme_switcher import theme_switcher
33-
from .components.base.toggle import toggle
3434
from .components.base.toggle_group import toggle_group
35+
from .components.base.toggle import toggle
3536
from .components.base.tooltip import tooltip
36-
from .components.icons.hugeicon import hi, icon
37+
from .components import base
38+
from .components.icons.hugeicon import hi
39+
from .components.icons.hugeicon import icon
40+
from .components.icons.simple_icon import simple_icon
3741
from .components.icons.others import spinner
3842
from .utils.twmerge import cn
3943

40-
_REFLEX_UI_MAPPING = {
41-
"components.base.accordion": ["accordion"],
42-
"components.base.avatar": ["avatar"],
43-
"components.base.badge": ["badge"],
44-
"components.base.button": ["button"],
45-
"components.base.card": ["card"],
46-
"components.base.checkbox": ["checkbox"],
47-
"components.base.collapsible": ["collapsible"],
48-
"components.base.context_menu": ["context_menu"],
49-
"components.base.dialog": ["dialog"],
50-
"components.base.drawer": ["drawer"],
51-
"components.base.gradient_profile": ["gradient_profile"],
52-
"components.base.input": ["input"],
53-
"components.base.link": ["link"],
54-
"components.base.menu": ["menu"],
55-
"components.base.navigation_menu": ["navigation_menu"],
56-
"components.base.popover": ["popover"],
57-
"components.base.preview_card": ["preview_card"],
58-
"components.base.scroll_area": ["scroll_area"],
59-
"components.base.select": ["select"],
60-
"components.base.skeleton": ["skeleton"],
61-
"components.base.slider": ["slider"],
62-
"components.base.switch": ["switch"],
63-
"components.base.tabs": ["tabs"],
64-
"components.base.textarea": ["textarea"],
65-
"components.base.theme_switcher": ["theme_switcher"],
66-
"components.base.toggle_group": ["toggle_group"],
67-
"components.base.toggle": ["toggle"],
68-
"components.base.tooltip": ["tooltip"],
69-
}
70-
_SUBMODULES = {"components", "utils"}
71-
_SUBMOD_ATTRS = {
72-
**_REFLEX_UI_MAPPING,
73-
"components": ["base"],
74-
"components.icons.hugeicon": ["hi", "icon"],
75-
"components.icons.others": ["spinner"],
76-
"utils.twmerge": ["cn"],
77-
}
44+
from reflex.utils import lazy_loader
45+
_REFLEX_UI_MAPPING = {'components.base.accordion': ['accordion'], 'components.base.avatar': ['avatar'], 'components.base.badge': ['badge'], 'components.base.button': ['button'], 'components.base.card': ['card'], 'components.base.checkbox': ['checkbox'], 'components.base.collapsible': ['collapsible'], 'components.base.context_menu': ['context_menu'], 'components.base.dialog': ['dialog'], 'components.base.drawer': ['drawer'], 'components.base.gradient_profile': ['gradient_profile'], 'components.base.input': ['input'], 'components.base.link': ['link'], 'components.base.menu': ['menu'], 'components.base.navigation_menu': ['navigation_menu'], 'components.base.popover': ['popover'], 'components.base.preview_card': ['preview_card'], 'components.base.scroll_area': ['scroll_area'], 'components.base.select': ['select'], 'components.base.skeleton': ['skeleton'], 'components.base.slider': ['slider'], 'components.base.switch': ['switch'], 'components.base.tabs': ['tabs'], 'components.base.textarea': ['textarea'], 'components.base.theme_switcher': ['theme_switcher'], 'components.base.toggle_group': ['toggle_group'], 'components.base.toggle': ['toggle'], 'components.base.tooltip': ['tooltip']}
46+
_SUBMODULES = {'components', 'utils'}
47+
_SUBMOD_ATTRS = {**_REFLEX_UI_MAPPING, 'components': ['base'], 'components.icons.hugeicon': ['hi', 'icon'], 'components.icons.simple_icon': ['simple_icon'], 'components.icons.others': ['spinner'], 'utils.twmerge': ['cn']}
7848

79-
__all__ = [
80-
"accordion",
81-
"avatar",
82-
"badge",
83-
"base",
84-
"button",
85-
"card",
86-
"checkbox",
87-
"cn",
88-
"collapsible",
89-
"components",
90-
"context_menu",
91-
"dialog",
92-
"drawer",
93-
"gradient_profile",
94-
"hi",
95-
"icon",
96-
"input",
97-
"link",
98-
"menu",
99-
"navigation_menu",
100-
"popover",
101-
"preview_card",
102-
"scroll_area",
103-
"select",
104-
"skeleton",
105-
"slider",
106-
"spinner",
107-
"switch",
108-
"tabs",
109-
"textarea",
110-
"theme_switcher",
111-
"toggle",
112-
"toggle_group",
113-
"tooltip",
114-
"utils",
115-
]
49+
__all__ = ['accordion', 'avatar', 'badge', 'base', 'button', 'card', 'checkbox', 'cn', 'collapsible', 'components', 'context_menu', 'dialog', 'drawer', 'gradient_profile', 'hi', 'icon', 'input', 'link', 'menu', 'navigation_menu', 'popover', 'preview_card', 'scroll_area', 'select', 'simple_icon', 'skeleton', 'slider', 'spinner', 'switch', 'tabs', 'textarea', 'theme_switcher', 'toggle', 'toggle_group', 'tooltip', 'utils']

‎reflex_ui/components/__init__.pyi‎

Lines changed: 5 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,9 @@
33
# This file was generated by `reflex/utils/pyi_generator.py`!
44
# ------------------------------------------------------
55

6-
from . import base, icons
6+
from . import base
7+
from . import icons
78

8-
__all__ = ["base", "icons"]
9+
from reflex.utils import lazy_loader
10+
11+
__all__ = ['base', 'icons']

‎reflex_ui/components/base/__init__.pyi‎

Lines changed: 5 additions & 36 deletions
Original file line numberDiff line numberDiff line change
@@ -3,8 +3,6 @@
33
# This file was generated by `reflex/utils/pyi_generator.py`!
44
# ------------------------------------------------------
55

6-
from reflex_ui import _REFLEX_UI_MAPPING
7-
86
from .accordion import accordion
97
from .avatar import avatar
108
from .badge import badge
@@ -30,42 +28,13 @@ from .switch import switch
3028
from .tabs import tabs
3129
from .textarea import textarea
3230
from .theme_switcher import theme_switcher
33-
from .toggle import toggle
3431
from .toggle_group import toggle_group
32+
from .toggle import toggle
3533
from .tooltip import tooltip
3634

35+
from reflex.utils import lazy_loader
36+
from reflex_ui import _REFLEX_UI_MAPPING
3737
_SUBMODULES = set()
38-
_SUBMOD_ATTRS = {
39-
"".join(k.split("components.base.")[-1]): v for k, v in _REFLEX_UI_MAPPING.items()
40-
}
38+
_SUBMOD_ATTRS = {''.join(k.split('components.base.')[-1]): v for k, v in _REFLEX_UI_MAPPING.items()}
4139

42-
__all__ = [
43-
"accordion",
44-
"avatar",
45-
"badge",
46-
"button",
47-
"card",
48-
"checkbox",
49-
"collapsible",
50-
"context_menu",
51-
"dialog",
52-
"drawer",
53-
"gradient_profile",
54-
"input",
55-
"link",
56-
"menu",
57-
"navigation_menu",
58-
"popover",
59-
"preview_card",
60-
"scroll_area",
61-
"select",
62-
"skeleton",
63-
"slider",
64-
"switch",
65-
"tabs",
66-
"textarea",
67-
"theme_switcher",
68-
"toggle",
69-
"toggle_group",
70-
"tooltip",
71-
]
40+
__all__ = ['accordion', 'avatar', 'badge', 'button', 'card', 'checkbox', 'collapsible', 'context_menu', 'dialog', 'drawer', 'gradient_profile', 'input', 'link', 'menu', 'navigation_menu', 'popover', 'preview_card', 'scroll_area', 'select', 'skeleton', 'slider', 'switch', 'tabs', 'textarea', 'theme_switcher', 'toggle', 'toggle_group', 'tooltip']

0 commit comments

Comments
 (0)