@jsenv/navi 0.10.2 → 0.11.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (207) hide show
  1. package/dist/jsenv_navi.js +13838 -23291
  2. package/dist/jsenv_navi.js.map +1281 -0
  3. package/package.json +6 -8
  4. package/index.js +0 -122
  5. package/src/action_private_properties.js +0 -11
  6. package/src/action_proxy_test.html +0 -353
  7. package/src/action_run_states.js +0 -5
  8. package/src/actions.js +0 -1401
  9. package/src/browser_integration/browser_integration.js +0 -216
  10. package/src/browser_integration/document_back_and_forward.js +0 -17
  11. package/src/browser_integration/document_loading_signal.js +0 -100
  12. package/src/browser_integration/document_state_signal.js +0 -9
  13. package/src/browser_integration/document_url_signal.js +0 -9
  14. package/src/browser_integration/use_is_visited.js +0 -19
  15. package/src/browser_integration/via_history.js +0 -232
  16. package/src/browser_integration/via_navigation.js +0 -168
  17. package/src/components/action_execution/form_context.js +0 -5
  18. package/src/components/action_execution/render_actionable_component.jsx +0 -29
  19. package/src/components/action_execution/use_action.js +0 -99
  20. package/src/components/action_execution/use_execute_action.js +0 -193
  21. package/src/components/action_execution/use_run_on_mount.js +0 -9
  22. package/src/components/action_renderer.jsx +0 -125
  23. package/src/components/callout/callout.js +0 -990
  24. package/src/components/callout/callout_demo.html +0 -201
  25. package/src/components/callout/test_dynamic_positioning.html +0 -161
  26. package/src/components/callout/test_html_document_iframe.html +0 -182
  27. package/src/components/demos/0_button_demo.html +0 -707
  28. package/src/components/demos/10_column_reordering_debug.html +0 -277
  29. package/src/components/demos/11_table_selection_debug.html +0 -432
  30. package/src/components/demos/1_checkbox_demo.html +0 -754
  31. package/src/components/demos/2_input_textual_demo.html +0 -286
  32. package/src/components/demos/3_radio_demo.html +0 -874
  33. package/src/components/demos/4_select_demo.html +0 -100
  34. package/src/components/demos/5_list_scrollable_demo.html +0 -153
  35. package/src/components/demos/6_tablist_demo.html +0 -77
  36. package/src/components/demos/7_table_selection_demo.html +0 -176
  37. package/src/components/demos/8_table_fixed_headers_demo.html +0 -584
  38. package/src/components/demos/9_table_column_drag_demo.html +0 -325
  39. package/src/components/demos/action/0_button_demo.html +0 -204
  40. package/src/components/demos/action/10_shortcuts_demo.html +0 -189
  41. package/src/components/demos/action/11_nested_shortcuts_demo.xhtml +0 -401
  42. package/src/components/demos/action/1_input_text_demo.html +0 -876
  43. package/src/components/demos/action/2_form_multiple.html +0 -303
  44. package/src/components/demos/action/3_details_demo.html +0 -203
  45. package/src/components/demos/action/4_input_checkbox_demo.html +0 -731
  46. package/src/components/demos/action/5_input_checkbox_state_demo.html +0 -270
  47. package/src/components/demos/action/6_checkbox_list_demo.html +0 -341
  48. package/src/components/demos/action/7_radio_list_demo.html +0 -357
  49. package/src/components/demos/action/8_editable_demo.html +0 -431
  50. package/src/components/demos/action/9_link_demo.html +0 -194
  51. package/src/components/demos/demo.md +0 -0
  52. package/src/components/demos/route/basic/basic.html +0 -14
  53. package/src/components/demos/route/basic/basic_route_demo.jsx +0 -224
  54. package/src/components/demos/route/multi/multi.html +0 -14
  55. package/src/components/demos/route/multi/multi_route_demo.jsx +0 -277
  56. package/src/components/demos/ui_transition/0_action_renderer_ui_transition_demo.html +0 -695
  57. package/src/components/demos/ui_transition/1_nested_ui_transition_demo.html +0 -429
  58. package/src/components/demos/ui_transition/2_height_transition_test.html +0 -295
  59. package/src/components/details/details.jsx +0 -245
  60. package/src/components/details/summary_marker.jsx +0 -141
  61. package/src/components/edition/editable.jsx +0 -186
  62. package/src/components/error_boundary_context.js +0 -9
  63. package/src/components/field/README.md +0 -247
  64. package/src/components/field/button.jsx +0 -429
  65. package/src/components/field/checkbox_list.jsx +0 -185
  66. package/src/components/field/collect_form_element_values.js +0 -82
  67. package/src/components/field/custom_field.js +0 -106
  68. package/src/components/field/form.jsx +0 -209
  69. package/src/components/field/input.jsx +0 -16
  70. package/src/components/field/input_checkbox.jsx +0 -434
  71. package/src/components/field/input_radio.jsx +0 -432
  72. package/src/components/field/input_textual.jsx +0 -389
  73. package/src/components/field/label.jsx +0 -46
  74. package/src/components/field/radio_list.jsx +0 -183
  75. package/src/components/field/select.jsx +0 -256
  76. package/src/components/field/use_action_events.js +0 -132
  77. package/src/components/field/use_form_events.js +0 -59
  78. package/src/components/field/use_ui_state_controller.js +0 -506
  79. package/src/components/item_tracker/README.md +0 -461
  80. package/src/components/item_tracker/use_isolated_item_tracker.jsx +0 -209
  81. package/src/components/item_tracker/use_isolated_item_tracker_demo.html +0 -148
  82. package/src/components/item_tracker/use_isolated_item_tracker_demo.jsx +0 -460
  83. package/src/components/item_tracker/use_item_tracker.jsx +0 -143
  84. package/src/components/item_tracker/use_item_tracker_demo.html +0 -207
  85. package/src/components/item_tracker/use_item_tracker_demo.jsx +0 -216
  86. package/src/components/keyboard_shortcuts/active_keyboard_shortcuts.jsx +0 -87
  87. package/src/components/keyboard_shortcuts/aria_key_shortcuts.js +0 -61
  88. package/src/components/keyboard_shortcuts/keyboard_key_meta.js +0 -17
  89. package/src/components/keyboard_shortcuts/keyboard_shortcuts.js +0 -371
  90. package/src/components/keyboard_shortcuts/os.js +0 -9
  91. package/src/components/layout/demos/demo_flex.html +0 -638
  92. package/src/components/layout/demos/demo_layout_style_buttons.html +0 -351
  93. package/src/components/layout/demos/demo_layout_style_input.html +0 -226
  94. package/src/components/layout/demos/demo_layout_style_text.html +0 -514
  95. package/src/components/layout/flex.jsx +0 -109
  96. package/src/components/layout/layout_context.jsx +0 -3
  97. package/src/components/layout/spacing.jsx +0 -20
  98. package/src/components/layout/use_layout_style.js +0 -249
  99. package/src/components/link/link.jsx +0 -267
  100. package/src/components/link/link_with_icon.jsx +0 -52
  101. package/src/components/loader/loader_background.jsx +0 -372
  102. package/src/components/loader/loading_spinner.jsx +0 -68
  103. package/src/components/loader/network_speed.js +0 -83
  104. package/src/components/loader/rectangle_loading.jsx +0 -244
  105. package/src/components/props_composition/demos/demo_with_props_style.html +0 -81
  106. package/src/components/props_composition/with_props_class_name.js +0 -37
  107. package/src/components/props_composition/with_props_style.js +0 -26
  108. package/src/components/route.jsx +0 -19
  109. package/src/components/selection/selection.jsx +0 -1583
  110. package/src/components/svg/font_sized_svg.jsx +0 -59
  111. package/src/components/svg/icon_and_text.jsx +0 -21
  112. package/src/components/svg/svg_mask_overlay.jsx +0 -105
  113. package/src/components/table/drag/table_drag.jsx +0 -506
  114. package/src/components/table/resize/table_resize.jsx +0 -650
  115. package/src/components/table/resize/table_size.js +0 -43
  116. package/src/components/table/selection/table_selection.js +0 -106
  117. package/src/components/table/selection/table_selection.jsx +0 -203
  118. package/src/components/table/sticky/sticky_group.js +0 -354
  119. package/src/components/table/sticky/table_sticky.js +0 -25
  120. package/src/components/table/sticky/table_sticky.jsx +0 -501
  121. package/src/components/table/table.jsx +0 -721
  122. package/src/components/table/table_css.js +0 -211
  123. package/src/components/table/table_ui.jsx +0 -49
  124. package/src/components/table/use_cells_and_columns.js +0 -90
  125. package/src/components/table/use_object_array_to_cells.js +0 -46
  126. package/src/components/table/z_indexes.js +0 -23
  127. package/src/components/tablist/tablist.jsx +0 -99
  128. package/src/components/text/demos/demo_text_and_icon.html +0 -421
  129. package/src/components/text/overflow.jsx +0 -15
  130. package/src/components/text/text.jsx +0 -83
  131. package/src/components/text/text_and_count.jsx +0 -28
  132. package/src/components/ui_transition.jsx +0 -128
  133. package/src/components/use_auto_focus.js +0 -94
  134. package/src/components/use_batch_during_render.js +0 -33
  135. package/src/components/use_debounce_true.js +0 -31
  136. package/src/components/use_dependencies_diff.js +0 -35
  137. package/src/components/use_focus_group.js +0 -20
  138. package/src/components/use_initial_value.js +0 -78
  139. package/src/components/use_is_visited.js +0 -19
  140. package/src/components/use_ref_array.js +0 -38
  141. package/src/components/use_signal_sync.js +0 -50
  142. package/src/components/use_stable_callback.js +0 -68
  143. package/src/components/use_state_array.js +0 -47
  144. package/src/docs/actions.md +0 -250
  145. package/src/docs/demos/resource/action_status.jsx +0 -42
  146. package/src/docs/demos/resource/demo.md +0 -1
  147. package/src/docs/demos/resource/resource_demo_0.html +0 -84
  148. package/src/docs/demos/resource/resource_demo_10_post_gc.html +0 -364
  149. package/src/docs/demos/resource/resource_demo_11_describe_many.html +0 -362
  150. package/src/docs/demos/resource/resource_demo_2.html +0 -173
  151. package/src/docs/demos/resource/resource_demo_3_filtered_users.html +0 -415
  152. package/src/docs/demos/resource/resource_demo_4_details.html +0 -284
  153. package/src/docs/demos/resource/resource_demo_5_renderer_lazy.html +0 -115
  154. package/src/docs/demos/resource/resource_demo_6_gc.html +0 -217
  155. package/src/docs/demos/resource/resource_demo_7_child_gc.html +0 -240
  156. package/src/docs/demos/resource/resource_demo_8_proxy_gc.html +0 -319
  157. package/src/docs/demos/resource/resource_demo_9_describe_one.html +0 -472
  158. package/src/docs/demos/resource/tata.jsx +0 -3
  159. package/src/docs/demos/resource/toto.jsx +0 -3
  160. package/src/docs/demos/user_nav/user_nav.html +0 -12
  161. package/src/docs/demos/user_nav/user_nav.jsx +0 -330
  162. package/src/docs/resource_dependencies.md +0 -103
  163. package/src/docs/resource_with_params.md +0 -80
  164. package/src/navi_css_vars.js +0 -14
  165. package/src/notes.md +0 -34
  166. package/src/route/route.js +0 -596
  167. package/src/route/route.xtest.html +0 -228
  168. package/src/store/array_signal_store.js +0 -537
  169. package/src/store/local_storage_signal.js +0 -17
  170. package/src/store/resource_graph.js +0 -1304
  171. package/src/store/tests/resource_graph_autoreload_demo.html +0 -12
  172. package/src/store/tests/resource_graph_autoreload_demo.jsx +0 -964
  173. package/src/store/tests/resource_graph_dependencies.test_manual.js +0 -95
  174. package/src/store/value_in_local_storage.js +0 -187
  175. package/src/symbol_object_signal.js +0 -1
  176. package/src/use_action_data.js +0 -10
  177. package/src/use_action_status.js +0 -47
  178. package/src/utils/add_many_event_listeners.js +0 -15
  179. package/src/utils/array_add_remove.js +0 -61
  180. package/src/utils/array_signal.js +0 -15
  181. package/src/utils/compare_two_js_values.js +0 -172
  182. package/src/utils/execute_with_cleanup.js +0 -21
  183. package/src/utils/get_caller_info.js +0 -85
  184. package/src/utils/is_signal.js +0 -20
  185. package/src/utils/js_value_weak_map.js +0 -162
  186. package/src/utils/js_value_weak_map_demo.html +0 -690
  187. package/src/utils/merge_two_js_values.js +0 -53
  188. package/src/utils/stringify_for_display.js +0 -131
  189. package/src/utils/weak_effect.js +0 -48
  190. package/src/validation/constraints/confirm_constraint.js +0 -14
  191. package/src/validation/constraints/create_unique_value_constraint.js +0 -27
  192. package/src/validation/constraints/native_constraints.js +0 -338
  193. package/src/validation/constraints/readonly_constraint.js +0 -41
  194. package/src/validation/constraints/same_as_constraint.js +0 -42
  195. package/src/validation/constraints/single_space_constraint.js +0 -13
  196. package/src/validation/custom_constraint_validation.js +0 -793
  197. package/src/validation/custom_message.js +0 -18
  198. package/src/validation/demos/browser_style.png +0 -0
  199. package/src/validation/demos/demo_same_as_constraint.html +0 -259
  200. package/src/validation/demos/form_validation_demo.html +0 -142
  201. package/src/validation/demos/form_validation_demo_preact.html +0 -87
  202. package/src/validation/demos/form_validation_native_popover_demo.html +0 -168
  203. package/src/validation/demos/form_validation_vs_native_demo.html +0 -172
  204. package/src/validation/hooks/use_constraints.js +0 -23
  205. package/src/validation/hooks/use_custom_validation_ref.js +0 -73
  206. package/src/validation/hooks/use_validation_message.js +0 -19
  207. package/src/validation/input_change_effect.js +0 -106
package/src/components/layout/demos/demo_flex.html DELETED
@@ -1,638 +0,0 @@
1
- <!doctype html>
2
- <html>
3
- <head>
4
- <meta charset="utf-8" />
5
- <title>Flex Layout Demo</title>
6
- <style>
7
- .demo-box {
8
- min-width: 60px;
9
- padding: 10px;
10
- text-align: center;
11
- background: #e3f2fd;
12
- border: 1px solid #90caf9;
13
- border-radius: 4px;
14
- }
15
- .demo-section {
16
- margin-bottom: 30px;
17
- padding: 20px;
18
- background: #f8f9fa;
19
- border-radius: 8px;
20
- }
21
-
22
- h3 {
23
- margin-top: 0;
24
- }
25
- </style>
26
- </head>
27
- <body>
28
- <div id="app"></div>
29
- <script type="module" jsenv-type="module/jsx">
30
- /* eslint-disable no-unused-vars */
31
- import { render } from "preact";
32
- import { FlexRow, FlexColumn, FlexItem, Button } from "@jsenv/navi";
33
-
34
- const DemoBox = ({ children, ...props }) => (
35
- <div className="demo-box" {...props}>
36
- {children}
37
- </div>
38
- );
39
-
40
- const Demo = () => {
41
- return (
42
- <div style={{ padding: "20px", fontFamily: "system-ui, sans-serif" }}>
43
- <h1>Flex Layout Demo</h1>
44
-
45
- <h2>FlexRow</h2>
46
-
47
- <section className="demo-section">
48
- <h3>1. Basic FlexRow</h3>
49
- <FlexRow>
50
- <DemoBox>Item 1</DemoBox>
51
- <DemoBox>Item 2</DemoBox>
52
- <DemoBox>Item 3</DemoBox>
53
- </FlexRow>
54
- </section>
55
-
56
- <section className="demo-section">
57
- <h3>2. FlexRow with Gap</h3>
58
- <FlexRow gap="15px">
59
- <DemoBox>Item 1</DemoBox>
60
- <DemoBox>Item 2</DemoBox>
61
- <DemoBox>Item 3</DemoBox>
62
- </FlexRow>
63
- </section>
64
-
65
- <section className="demo-section">
66
- <h3>3. FlexRow with Horizontal Alignment (alignX)</h3>
67
-
68
- <h4>alignX="start" (default)</h4>
69
- <FlexRow
70
- alignX="start"
71
- gap="10px"
72
- style={{
73
- width: "400px",
74
- height: "80px",
75
- background: "#fff3e0",
76
- padding: "10px",
77
- }}
78
- >
79
- <DemoBox>Short</DemoBox>
80
- <DemoBox style={{ height: "60px", lineHeight: "60px" }}>
81
- Tall Item
82
- </DemoBox>
83
- <DemoBox>Short</DemoBox>
84
- </FlexRow>
85
-
86
- <h4>alignX="center"</h4>
87
- <FlexRow
88
- alignX="center"
89
- gap="10px"
90
- style={{
91
- width: "400px",
92
- height: "80px",
93
- background: "#e8f5e8",
94
- padding: "10px",
95
- }}
96
- >
97
- <DemoBox>Short</DemoBox>
98
- <DemoBox style={{ height: "60px", lineHeight: "60px" }}>
99
- Tall Item
100
- </DemoBox>
101
- <DemoBox>Short</DemoBox>
102
- </FlexRow>
103
-
104
- <h4>alignX="end"</h4>
105
- <FlexRow
106
- alignX="end"
107
- gap="10px"
108
- style={{
109
- width: "400px",
110
- height: "80px",
111
- background: "#ffebee",
112
- padding: "10px",
113
- }}
114
- >
115
- <DemoBox>Short</DemoBox>
116
- <DemoBox style={{ height: "60px", lineHeight: "60px" }}>
117
- Tall Item
118
- </DemoBox>
119
- <DemoBox>Short</DemoBox>
120
- </FlexRow>
121
-
122
- <h4>alignX="space-between"</h4>
123
- <FlexRow
124
- alignX="space-between"
125
- style={{
126
- width: "400px",
127
- height: "80px",
128
- background: "#e3f2fd",
129
- padding: "10px",
130
- }}
131
- >
132
- <DemoBox>Short</DemoBox>
133
- <DemoBox style={{ height: "60px", lineHeight: "60px" }}>
134
- Tall Item
135
- </DemoBox>
136
- <DemoBox>Short</DemoBox>
137
- </FlexRow>
138
-
139
- <h4>alignX="space-around"</h4>
140
- <FlexRow
141
- alignX="space-around"
142
- style={{
143
- width: "400px",
144
- height: "80px",
145
- background: "#f3e5f5",
146
- padding: "10px",
147
- }}
148
- >
149
- <DemoBox>Short</DemoBox>
150
- <DemoBox style={{ height: "60px", lineHeight: "60px" }}>
151
- Tall Item
152
- </DemoBox>
153
- <DemoBox>Short</DemoBox>
154
- </FlexRow>
155
- </section>
156
-
157
- <section className="demo-section">
158
- <h3>4. FlexRow with Vertical Alignment (alignY)</h3>
159
-
160
- <h4>alignY="start"</h4>
161
- <FlexRow
162
- alignY="start"
163
- gap="10px"
164
- style={{
165
- height: "80px",
166
- background: "#fff3e0",
167
- padding: "10px",
168
- }}
169
- >
170
- <DemoBox>Short</DemoBox>
171
- <DemoBox style={{ height: "60px", lineHeight: "60px" }}>
172
- Tall Item
173
- </DemoBox>
174
- <DemoBox>Short</DemoBox>
175
- </FlexRow>
176
-
177
- <h4>alignY="center"</h4>
178
- <FlexRow
179
- alignY="center"
180
- gap="10px"
181
- style={{
182
- height: "80px",
183
- background: "#e8f5e8",
184
- padding: "10px",
185
- }}
186
- >
187
- <DemoBox>Short</DemoBox>
188
- <DemoBox style={{ height: "60px", lineHeight: "60px" }}>
189
- Tall Item
190
- </DemoBox>
191
- <DemoBox>Short</DemoBox>
192
- </FlexRow>
193
-
194
- <h4>alignY="end"</h4>
195
- <FlexRow
196
- alignY="end"
197
- gap="10px"
198
- style={{
199
- height: "80px",
200
- background: "#ffebee",
201
- padding: "10px",
202
- }}
203
- >
204
- <DemoBox>Short</DemoBox>
205
- <DemoBox style={{ height: "60px", lineHeight: "60px" }}>
206
- Tall Item
207
- </DemoBox>
208
- <DemoBox>Short</DemoBox>
209
- </FlexRow>
210
-
211
- <h4>alignY="stretch" (default)</h4>
212
- <FlexRow
213
- alignY="stretch"
214
- gap="10px"
215
- style={{
216
- height: "80px",
217
- background: "#e1f5fe",
218
- padding: "10px",
219
- }}
220
- >
221
- <DemoBox>Short</DemoBox>
222
- <DemoBox style={{ lineHeight: "60px" }}>Tall Item</DemoBox>
223
- <DemoBox>Short</DemoBox>
224
- </FlexRow>
225
- </section>
226
-
227
- <section className="demo-section">
228
- <h3>5. Real-World Example: Button with alignX</h3>
229
-
230
- <FlexRow
231
- gap="10px"
232
- style={{ background: "#f5f5f5", padding: "10px" }}
233
- >
234
- <DemoBox>Content</DemoBox>
235
- <DemoBox>More content</DemoBox>
236
- <Button alignX="end" alignY="center">
237
- Action Button
238
- </Button>
239
- </FlexRow>
240
- </section>
241
-
242
- <h2>FlexRow + FlexItem</h2>
243
-
244
- <section className="demo-section">
245
- <h3>6. FlexItem Basic Usage</h3>
246
-
247
- <FlexRow gap="10px">
248
- <FlexItem>
249
- <DemoBox>FlexItem 1</DemoBox>
250
- </FlexItem>
251
- <FlexItem>
252
- <DemoBox>FlexItem 2</DemoBox>
253
- </FlexItem>
254
- <FlexItem>
255
- <DemoBox>FlexItem 3</DemoBox>
256
- </FlexItem>
257
- </FlexRow>
258
- </section>
259
-
260
- <section className="demo-section">
261
- <h3>7. FlexItem with Growth</h3>
262
-
263
- <FlexRow gap="10px">
264
- <FlexItem>
265
- <DemoBox>Fixed</DemoBox>
266
- </FlexItem>
267
- <FlexItem grow>
268
- <DemoBox>Grows to fill</DemoBox>
269
- </FlexItem>
270
- <FlexItem>
271
- <DemoBox>Fixed</DemoBox>
272
- </FlexItem>
273
- </FlexRow>
274
- </section>
275
-
276
- <h2>FlexColumn</h2>
277
-
278
- <section className="demo-section">
279
- <h3>8. Basic FlexColumn</h3>
280
- <FlexColumn style={{ height: "200px" }}>
281
- <DemoBox>Item 1</DemoBox>
282
- <DemoBox>Item 2</DemoBox>
283
- <DemoBox>Item 3</DemoBox>
284
- </FlexColumn>
285
- </section>
286
-
287
- <section className="demo-section">
288
- <h3>9. FlexColumn with Gap</h3>
289
- <FlexColumn gap="15px" style={{ height: "200px" }}>
290
- <DemoBox>Item 1</DemoBox>
291
- <DemoBox>Item 2</DemoBox>
292
- <DemoBox>Item 3</DemoBox>
293
- </FlexColumn>
294
- </section>
295
-
296
- <section className="demo-section">
297
- <h3>10. FlexColumn with Horizontal Alignment</h3>
298
-
299
- <h4>alignX="start"</h4>
300
- <FlexColumn
301
- alignX="start"
302
- gap="10px"
303
- style={{
304
- height: "150px",
305
- width: "300px",
306
- background: "#fff3e0",
307
- padding: "10px",
308
- }}
309
- >
310
- <DemoBox>Short</DemoBox>
311
- <DemoBox style={{ width: "200px" }}>Wide Item</DemoBox>
312
- <DemoBox>Short</DemoBox>
313
- </FlexColumn>
314
-
315
- <h4>alignX="center"</h4>
316
- <FlexColumn
317
- alignX="center"
318
- gap="10px"
319
- style={{
320
- height: "150px",
321
- width: "300px",
322
- background: "#e8f5e8",
323
- padding: "10px",
324
- }}
325
- >
326
- <DemoBox>Short</DemoBox>
327
- <DemoBox style={{ width: "200px" }}>Wide Item</DemoBox>
328
- <DemoBox>Short</DemoBox>
329
- </FlexColumn>
330
-
331
- <h4>alignX="end"</h4>
332
- <FlexColumn
333
- alignX="end"
334
- gap="10px"
335
- style={{
336
- height: "150px",
337
- width: "300px",
338
- background: "#ffebee",
339
- padding: "10px",
340
- }}
341
- >
342
- <DemoBox>Short</DemoBox>
343
- <DemoBox style={{ width: "200px" }}>Wide Item</DemoBox>
344
- <DemoBox>Short</DemoBox>
345
- </FlexColumn>
346
-
347
- <h4>alignX="stretch" (default)</h4>
348
- <FlexColumn
349
- alignX="stretch"
350
- gap="10px"
351
- style={{
352
- height: "150px",
353
- width: "300px",
354
- background: "#e1f5fe",
355
- padding: "10px",
356
- }}
357
- >
358
- <DemoBox>Short</DemoBox>
359
- <DemoBox>Wide Item</DemoBox>
360
- <DemoBox>Short</DemoBox>
361
- </FlexColumn>
362
- </section>
363
-
364
- <section className="demo-section">
365
- <h3>11. FlexColumn with Vertical Alignment (alignY)</h3>
366
-
367
- <h4>alignY="start" (default)</h4>
368
- <FlexColumn
369
- alignY="start"
370
- gap="10px"
371
- style={{
372
- height: "200px",
373
- width: "300px",
374
- background: "#fff3e0",
375
- padding: "10px",
376
- }}
377
- >
378
- <DemoBox>Short</DemoBox>
379
- <DemoBox style={{ width: "200px" }}>Wide Item</DemoBox>
380
- <DemoBox>Short</DemoBox>
381
- </FlexColumn>
382
-
383
- <h4>alignY="center"</h4>
384
- <FlexColumn
385
- alignY="center"
386
- gap="10px"
387
- style={{
388
- height: "200px",
389
- width: "300px",
390
- background: "#e8f5e8",
391
- padding: "10px",
392
- }}
393
- >
394
- <DemoBox>Short</DemoBox>
395
- <DemoBox style={{ width: "200px" }}>Wide Item</DemoBox>
396
- <DemoBox>Short</DemoBox>
397
- </FlexColumn>
398
-
399
- <h4>alignY="end"</h4>
400
- <FlexColumn
401
- alignY="end"
402
- gap="10px"
403
- style={{
404
- height: "200px",
405
- width: "300px",
406
- background: "#ffebee",
407
- padding: "10px",
408
- }}
409
- >
410
- <DemoBox>Short</DemoBox>
411
- <DemoBox style={{ width: "200px" }}>Wide Item</DemoBox>
412
- <DemoBox>Short</DemoBox>
413
- </FlexColumn>
414
-
415
- <h4>alignY="space-between"</h4>
416
- <FlexColumn
417
- alignY="space-between"
418
- style={{
419
- height: "200px",
420
- width: "300px",
421
- background: "#e3f2fd",
422
- padding: "10px",
423
- }}
424
- >
425
- <DemoBox>Short</DemoBox>
426
- <DemoBox style={{ width: "200px" }}>Wide Item</DemoBox>
427
- <DemoBox>Short</DemoBox>
428
- </FlexColumn>
429
- </section>
430
-
431
- <h2>FlexItem Individual Alignment</h2>
432
- <p
433
- style={{
434
- marginBottom: "20px",
435
- padding: "15px",
436
- background: "#fff3e0",
437
- borderRadius: "6px",
438
- fontSize: "14px",
439
- }}
440
- >
441
- <strong>Note:</strong> The examples below show how individual
442
- FlexItem components can override the container's alignment.
443
- However,{" "}
444
- <strong>
445
- in most cases, you should use the FlexRow/FlexColumn alignX and
446
- alignY props instead
447
- </strong>
448
- , as they control all items at once and are more efficient.
449
- FlexItem alignment is useful for special cases where you need one
450
- or two items to behave differently from the rest.
451
- </p>
452
-
453
- <section className="demo-section">
454
- <h3>12. FlexItem Individual Alignment in Rows</h3>
455
-
456
- <h4>FlexItem alignX in Row</h4>
457
- <FlexRow
458
- gap="10px"
459
- style={{
460
- background: "#f3e5f5",
461
- padding: "10px",
462
- }}
463
- >
464
- <FlexItem>
465
- <DemoBox>Default</DemoBox>
466
- </FlexItem>
467
- <FlexItem alignX="start">
468
- <DemoBox>alignX="start"</DemoBox>
469
- </FlexItem>
470
- <FlexItem alignX="center">
471
- <DemoBox>alignX="center"</DemoBox>
472
- </FlexItem>
473
- <FlexItem alignX="end">
474
- <DemoBox>alignX="end"</DemoBox>
475
- </FlexItem>
476
- </FlexRow>
477
-
478
- <h4>FlexItem alignY in Row</h4>
479
- <FlexRow
480
- gap="10px"
481
- style={{
482
- height: "100px",
483
- background: "#e1f5fe",
484
- padding: "10px",
485
- }}
486
- >
487
- <FlexItem>
488
- <DemoBox>Default</DemoBox>
489
- </FlexItem>
490
- <FlexItem alignY="start">
491
- <DemoBox>alignY="start"</DemoBox>
492
- </FlexItem>
493
- <FlexItem alignY="end">
494
- <DemoBox>alignY="end"</DemoBox>
495
- </FlexItem>
496
- <FlexItem alignY="stretch">
497
- <DemoBox style={{ height: "100%" }}>alignY="stretch"</DemoBox>
498
- </FlexItem>
499
- </FlexRow>
500
- </section>
501
-
502
- <section className="demo-section">
503
- <h3>13. FlexItem Individual Alignment in Columns</h3>
504
-
505
- <h4>FlexItem alignX in Column</h4>
506
- <FlexColumn
507
- gap="10px"
508
- style={{
509
- height: "200px",
510
- width: "300px",
511
- background: "#f3e5f5",
512
- padding: "10px",
513
- }}
514
- >
515
- <FlexItem>
516
- <DemoBox>Default</DemoBox>
517
- </FlexItem>
518
- <FlexItem alignX="start">
519
- <DemoBox>alignX="start"</DemoBox>
520
- </FlexItem>
521
- <FlexItem alignX="center">
522
- <DemoBox>alignX="center"</DemoBox>
523
- </FlexItem>
524
- <FlexItem alignX="end">
525
- <DemoBox>alignX="end"</DemoBox>
526
- </FlexItem>
527
- </FlexColumn>
528
-
529
- <h4>FlexItem alignY in Column</h4>
530
- <FlexColumn
531
- gap="10px"
532
- style={{
533
- height: "300px",
534
- width: "200px",
535
- background: "#e1f5fe",
536
- padding: "10px",
537
- }}
538
- >
539
- <FlexItem>
540
- <DemoBox>Default</DemoBox>
541
- </FlexItem>
542
- <FlexItem alignY="start">
543
- <DemoBox>alignY="start"</DemoBox>
544
- </FlexItem>
545
- <FlexItem alignY="center">
546
- <DemoBox>alignY="center"</DemoBox>
547
- </FlexItem>
548
- <FlexItem alignY="end">
549
- <DemoBox>alignY="end"</DemoBox>
550
- </FlexItem>
551
- </FlexColumn>
552
- </section>
553
-
554
- <section className="demo-section">
555
- <h3>14. FlexItem Practical Examples - Column Layout</h3>
556
-
557
- <h4>Single item pushed to bottom</h4>
558
- <FlexColumn
559
- gap="10px"
560
- style={{
561
- height: "200px",
562
- background: "#fff3e0",
563
- padding: "10px",
564
- }}
565
- >
566
- <DemoBox>Item 1</DemoBox>
567
- <DemoBox>Item 2</DemoBox>
568
- <FlexItem alignY="end">
569
- <DemoBox>Pushed to bottom</DemoBox>
570
- </FlexItem>
571
- </FlexColumn>
572
-
573
- <h4>Item centered vertically</h4>
574
- <FlexColumn
575
- gap="10px"
576
- style={{
577
- height: "200px",
578
- background: "#e8f5e8",
579
- padding: "10px",
580
- }}
581
- >
582
- <DemoBox>Item 1</DemoBox>
583
- <FlexItem alignY="center">
584
- <DemoBox>Centered</DemoBox>
585
- </FlexItem>
586
- <DemoBox>Item 3</DemoBox>
587
- </FlexColumn>
588
- </section>
589
-
590
- <section className="demo-section">
591
- <h3>15. When to Use FlexItem Alignment</h3>
592
- <p style={{ marginBottom: "15px", fontSize: "14px" }}>
593
- FlexItem alignment is useful when you need exceptions to the
594
- container's alignment:
595
- </p>
596
-
597
- <h4>Example: Most items start, one pushed to end</h4>
598
- <FlexRow
599
- alignX="start"
600
- gap="10px"
601
- style={{
602
- background: "#fff8e1",
603
- padding: "10px",
604
- }}
605
- >
606
- <DemoBox>Start</DemoBox>
607
- <DemoBox>Start</DemoBox>
608
- <FlexItem alignX="end">
609
- <DemoBox>Pushed to end</DemoBox>
610
- </FlexItem>
611
- </FlexRow>
612
-
613
- <h4>Example: Most items aligned start, one centered</h4>
614
- <FlexColumn
615
- alignX="start"
616
- gap="10px"
617
- style={{
618
- height: "200px",
619
- width: "300px",
620
- background: "#e8f5e8",
621
- padding: "10px",
622
- }}
623
- >
624
- <DemoBox>Left aligned</DemoBox>
625
- <FlexItem alignX="center">
626
- <DemoBox>Centered exception</DemoBox>
627
- </FlexItem>
628
- <DemoBox>Left aligned</DemoBox>
629
- </FlexColumn>
630
- </section>
631
- </div>
632
- );
633
- };
634
-
635
- render(<Demo />, document.getElementById("app"));
636
- </script>
637
- </body>
638
- </html>