Skip to content

Commit de2b71e

Browse files
PoojaB26pinkeshmars
PoojaB26
and
pinkeshmars
authored
Add widget rewrites + component migration (#39)
* Add widget rewrites + component migration * Add more widgets from old docs * Add component from old docs * generate dynamic children doc * add container videos * add container props image * Update docs/resources/ui-building-blocks/widgets/built-in-widgets/container.md * Update docs/resources/ui-building-blocks/widgets/built-in-widgets/dividers.md * Update docs/resources/ui-building-blocks/widgets/widget-commonalities.md * Update docs/resources/ui-building-blocks/widgets/built-in-widgets/icons.md * Update docs/resources/ui-building-blocks/widgets/built-in-widgets/dividers.md * Update docs/resources/ui-building-blocks/widgets/built-in-widgets/dividers.md * Update docs/resources/ui-building-blocks/widgets/built-in-widgets/image.md * Update docs/resources/ui-building-blocks/widgets/built-in-widgets/list-grid.md * Update docs/resources/ui-building-blocks/widgets/built-in-widgets/list-grid.md * Update docs/resources/ui-building-blocks/widgets/built-in-widgets/mouse-region.md * Update docs/resources/ui-building-blocks/widgets/built-in-widgets/mouse-region.md * Update docs/resources/ui-building-blocks/widgets/built-in-widgets/text.md * Update docs/resources/ui-building-blocks/widgets/built-in-widgets/text.md * Update docs/resources/ui-building-blocks/widgets/built-in-widgets/text.md * Update docs/resources/ui-building-blocks/widgets/built-in-widgets/text.md * Update docs/resources/ui-building-blocks/widgets/built-in-widgets/text.md * Update docs/resources/ui-building-blocks/widgets/built-in-widgets/text.md * Update docs/resources/ui-building-blocks/widgets/built-in-widgets/text.md * Update docs/resources/ui-building-blocks/widgets/built-in-widgets/text.md * Address review comments * Address review comments * Minor fixes --------- Co-authored-by: pinkeshmars <[email protected]> Co-authored-by: Pinkesh <[email protected]>
1 parent e39a903 commit de2b71e

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

77 files changed

+3009
-8
lines changed

‎docs/ff-concepts/responsiveness/_category_.json

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
{
2+
"label": "Responsiveness"
3+
}

‎docs/ff-concepts/responsiveness/conditional-builder.md

Lines changed: 24 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,24 @@
1+
2+
# ConditionalBuilder
3+
4+
The `ConditionalBuilder` widget allows you to dynamically display different widgets based on certain conditions (either [single](/advanced-functionality/conditional-logic#single-condition) or [multiple](/advanced-functionality/conditional-logic#multiple-conditions-and-or)). Using this widget, you can define different conditions, each associated with a specific widget to be displayed when that condition is true. It's like having a switch that shows different things depending on what's happening in your app.
5+
6+
For example, displaying different charts based on user roles. For team members, an individual progress chart can be shown. Team leads can view the overall progress of the entire team, while project managers can see over project progress chart. Just like the below:
7+
8+
![img.png](../../resources/ui-building-blocks/components/built-in-components/img.png)
9+
10+
## Adding ConditionalBuilder widget
11+
12+
To add the `ConditionalBuilder` widget to your app:
13+
14+
1. Add the **ConditionalBuilder** widget (from the **Base Elements**) to where you want to display dynamic widgets.
15+
5. Move to the **Properties Panel** **>** **Conditional Builder Properties,** andUnder the **First Condition**, provide the **IF** [condition](/advanced-functionality/conditional-logic) by clicking on **UNSET**.
16+
8. Now, besides the **THEN**, click **Empty**. This will automatically select the **IF** widget in the widget tree. Inside that, add a widget that you want to display if this condition is true.
17+
11. To add one more condition-based widget, click on the "+" button, add a condition for the **ELSE IF** section, and add a widget inside the **Else If** widget in the widget tree.
18+
14. If none of the conditions are satisfied, add a default widget to display inside the **Else** widget.
19+
17. Use the **Show In UI Builder** option to see that particular widget in the [canvas area](/getting-started/ui-builder/canvas-area). You can see only one widget at a time.
20+
21+
<div class="video-container"><iframe src="https://www.loom.
22+
com/embed/fe8edb48bdf744abab13f3ba7f925c5c?sid=85533669-195d-4f5e-aeae-029ceee40cb5" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe></div>
23+
24+

‎docs/ff-concepts/responsiveness/wrap.md

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,2 @@
1+
2+
# Wrap

‎docs/resources/ui-building-blocks/components/built-in-components/badge.md

Lines changed: 279 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,279 @@
1+
2+
3+
# Badge
4+
5+
The Badget widget indicates the number of items that need your attention. Typically it's a medium-sized dot that floats over other widgets such as IconButton.
6+
7+
For example, You could use the badge widget to show the number of unread notifications and items in your shopping cart.
8+
9+
![img_3.png](img_3.png)
10+
11+
## Adding Badge widget
12+
13+
Here's an example of how you can add the Badge widget to your project:
14+
15+
1. First, drag the **Badge** widget from the Base Elements tab and carefully drop it into the
16+
Actions section of the AppBar.
17+
5. Now, add the **IconButton** widget inside the **Badge** widget. Customize the Icon and its color as per your requirement.
18+
8. Select the **Badge** widget, move to the properties panel, and set the **top** side padding to 5 and **right** side padding to 15.
19+
20+
21+
<div style={{
22+
position: 'relative',
23+
paddingBottom: 'calc(56.67989417989418% + 41px)', // Keeps the aspect ratio and additional padding
24+
height: 0,
25+
width: '100%'
26+
}}>
27+
<iframe
28+
src="https://demo.arcade.software/5cTUQAbE32UQzrdnFwtO?embed&show_copy_link=true"
29+
title=""
30+
style={{
31+
position: 'absolute',
32+
top: 0,
33+
left: 0,
34+
width: '100%',
35+
height: '100%',
36+
colorScheme: 'light'
37+
}}
38+
frameborder="0"
39+
loading="lazy"
40+
webkitAllowFullScreen
41+
mozAllowFullScreen
42+
allowFullScreen
43+
allow="clipboard-write">
44+
</iframe>
45+
</div>
46+
47+
<p></p>
48+
49+
## Customizing
50+
51+
You can customize the appearance and behavior of the badge widget using the various properties
52+
available under the **Properties Panel**.
53+
54+
### Setting badge text
55+
56+
You can set the badge text that appears inside the badge. Usually, it's a numeric value.
57+
58+
To set the badge text:
59+
60+
1. Select the **Badge** widget from the widget or the canvas area.
61+
5. Move to the properties panel (on the right side of your screen), and scroll down to the **Badge Properties** section.
62+
8. Find the **Text** property and enter a value. You would probably set this value from the variable or field from the backend database, such as the API response variable and Firestore document field. To do so, click on the **Set from Variable**.
63+
64+
<p></p>
65+
66+
<div style={{
67+
position: 'relative',
68+
paddingBottom: 'calc(56.67989417989418% + 41px)', // Keeps the aspect ratio and additional padding
69+
height: 0,
70+
width: '100%'
71+
}}>
72+
<iframe
73+
src="https://demo.arcade.software/TJTALzWwwYWwj7vCTMmJ?embed&show_copy_link=true"
74+
title=""
75+
style={{
76+
position: 'absolute',
77+
top: 0,
78+
left: 0,
79+
width: '100%',
80+
height: '100%',
81+
colorScheme: 'light'
82+
}}
83+
frameborder="0"
84+
loading="lazy"
85+
webkitAllowFullScreen
86+
mozAllowFullScreen
87+
allowFullScreen
88+
allow="clipboard-write">
89+
</iframe>
90+
</div>
91+
92+
<p></p>
93+
94+
### Styling badge text
95+
96+
To change the badge text style:
97+
98+
1. Select the **Badge** widget from the widget or the canvas area.
99+
5. Move to the properties panel (on the right side of your screen), and scroll down to the **Badge Properties** section.
100+
8. Find the **Theme Text Style** property and change the style as per instructions
101+
[here](../../widgets/built-in-widgets/text.md).
102+
103+
### Show/hide badge
104+
105+
You might want to hide the badge widget initially and only show it when some items need the user's attention—for example, showing the notification badge only when there are new/unread notifications.
106+
107+
To show/hide the badge widget:
108+
109+
1. Select the **Badge** widget from the widget or the canvas area.
110+
5. Move to the properties panel (on the right side of your screen), and scroll down to the **Badge Properties** section.
111+
8. Find the **Show Badge** property and check/uncheck to show/hide the badge. Most probably, you would set this value from the variable such as the app state variable and variable from API response. To do so, click on the **Set from Variable**.
112+
113+
<div style={{
114+
position: 'relative',
115+
paddingBottom: 'calc(56.67989417989418% + 41px)', // Keeps the aspect ratio and additional padding
116+
height: 0,
117+
width: '100%'
118+
}}>
119+
<iframe
120+
src="https://demo.arcade.software/Qi5uf3nPfZHwCoY7VA33?embed&show_copy_link=true"
121+
title=""
122+
style={{
123+
position: 'absolute',
124+
top: 0,
125+
left: 0,
126+
width: '100%',
127+
height: '100%',
128+
colorScheme: 'light'
129+
}}
130+
frameborder="0"
131+
loading="lazy"
132+
webkitAllowFullScreen
133+
mozAllowFullScreen
134+
allowFullScreen
135+
allow="clipboard-write">
136+
</iframe>
137+
</div>
138+
139+
### Changing badge color
140+
141+
To change the badge color:
142+
143+
1. Select the **Badge** widget from the widget or the canvas area.
144+
5. Move to the properties panel (on the right side of your screen), and scroll down to the **Badge Properties** section.
145+
8. Find the Badge Color property, click on the box next to the already selected color, select the color, and then click **Use Color** or click on an already selected colorand enter a Hex Code directly. You can also choose the color by clicking the **Palette** and **Simple** button.
146+
147+
<div style={{
148+
position: 'relative',
149+
paddingBottom: 'calc(56.67989417989418% + 41px)', // Keeps the aspect ratio and additional padding
150+
height: 0,
151+
width: '100%'
152+
}}>
153+
<iframe
154+
src="https://demo.arcade.software/IwwmHUITgPBfFkK5VWI4?embed&show_copy_link=true"
155+
title=""
156+
style={{
157+
position: 'absolute',
158+
top: 0,
159+
left: 0,
160+
width: '100%',
161+
height: '100%',
162+
colorScheme: 'light'
163+
}}
164+
frameborder="0"
165+
loading="lazy"
166+
webkitAllowFullScreen
167+
mozAllowFullScreen
168+
allowFullScreen
169+
allow="clipboard-write">
170+
</iframe>
171+
</div>
172+
173+
### Changing elevation
174+
175+
To change the elevation (depth or Z-axis) of the badge:
176+
177+
1. Select the **Badge** widget from the widget or the canvas area.
178+
179+
5. Move to the properties panel (on the right side of your screen), and scroll down to the **Badge Properties** section.
180+
8. Find the **Elevation** input box and enter the value to see the drop shadow effect below the badge. The Higher value sets the bigger size of the shadow, and the 0 value removes the shadow.
181+
182+
<div style={{
183+
position: 'relative',
184+
paddingBottom: 'calc(56.67989417989418% + 41px)', // Keeps the aspect ratio and additional padding
185+
height: 0,
186+
width: '100%'
187+
}}>
188+
<iframe
189+
src="https://demo.arcade.software/0RTCxjg1LBR3W0TeErYK?embed&show_copy_link=true"
190+
title=""
191+
style={{
192+
position: 'absolute',
193+
top: 0,
194+
left: 0,
195+
width: '100%',
196+
height: '100%',
197+
colorScheme: 'light'
198+
}}
199+
frameborder="0"
200+
loading="lazy"
201+
webkitAllowFullScreen
202+
mozAllowFullScreen
203+
allowFullScreen
204+
allow="clipboard-write">
205+
</iframe>
206+
</div>
207+
208+
### Changing badge position
209+
210+
By default, the badge is displayed on the top right side of its child widget. You can change its position and bring it to the left side.
211+
212+
To change the badge position:
213+
214+
1. Select the **Badge** widget from the widget or the canvas area.
215+
5. Move to the properties panel (on the right side of your screen), and scroll down to the **Badge Properties** section.
216+
8. Find the **Position (Start or End)** property and click on the icons to change the position.
217+
218+
<div style={{
219+
position: 'relative',
220+
paddingBottom: 'calc(56.67989417989418% + 41px)', // Keeps the aspect ratio and additional padding
221+
height: 0,
222+
width: '100%'
223+
}}>
224+
<iframe
225+
src="https://demo.arcade.software/oBTo3m1sHq4rYDWEnLW1?embed&show_copy_link=true"
226+
title=""
227+
style={{
228+
position: 'absolute',
229+
top: 0,
230+
left: 0,
231+
width: '100%',
232+
height: '100%',
233+
colorScheme: 'light'
234+
}}
235+
frameborder="0"
236+
loading="lazy"
237+
webkitAllowFullScreen
238+
mozAllowFullScreen
239+
allowFullScreen
240+
allow="clipboard-write">
241+
</iframe>
242+
</div>
243+
244+
### Allow animating badge
245+
246+
By default, the badge widget animates whenever the value is changed.
247+
248+
To allow/disallows animating badge:
249+
250+
1. Select the **Badge** widget from the widget or the canvas area.
251+
252+
5. Move to the properties panel (on the right side of your screen), and scroll down to the **Badge Properties** section.
253+
8. Find the **Animate** toggle, and then turn it on or off.
254+
255+
<div style={{
256+
position: 'relative',
257+
paddingBottom: 'calc(56.67989417989418% + 41px)', // Keeps the aspect ratio and additional padding
258+
height: 0,
259+
width: '100%'
260+
}}>
261+
<iframe
262+
src="https://demo.arcade.software/qRMyvLeZaqz9SnYBaZcE?embed&show_copy_link=true"
263+
title=""
264+
style={{
265+
position: 'absolute',
266+
top: 0,
267+
left: 0,
268+
width: '100%',
269+
height: '100%',
270+
colorScheme: 'light'
271+
}}
272+
frameborder="0"
273+
loading="lazy"
274+
webkitAllowFullScreen
275+
mozAllowFullScreen
276+
allowFullScreen
277+
allow="clipboard-write">
278+
</iframe>
279+
</div>

0 commit comments

Comments
 (0)