Skip to content

Commit 9a22cd1

Browse files
pinkeshmarspinkeshmars
committed
Moved GIFs to arcade
1 parent 404429e commit 9a22cd1

Some content is hidden

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

42 files changed

+676
-36
lines changed

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

Lines changed: 100 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,6 @@ sidebar_position: 3
99
# Calendar
1010
The Calendar widget shows days in a month and a week. You can use the Calendar widget to filter the event list by date. For example, showing appointments on a specific date.
1111

12-
![calendar](imgs/calendar-fi.avif)
1312

1413
## Adding Calendar to your project
1514

@@ -52,7 +51,31 @@ When you select/change any date on the calendar, you can display it on the page
5251

5352
Let's build an example of showing the selected date in a Text widget that looks like the one below:
5453

55-
![showing-selected-date.gif](imgs/showing-selected-date.gif)
54+
<div style={{
55+
position: 'relative',
56+
paddingBottom: 'calc(56.67989417989418% + 41px)', // Keeps the aspect ratio and additional padding
57+
height: 0,
58+
width: '100%'}}>
59+
<iframe
60+
src="https://demo.arcade.software/flTBTqgrm4qEVJKVX9CK?embed&show_copy_link=true"
61+
title=""
62+
style={{
63+
position: 'absolute',
64+
top: 0,
65+
left: 0,
66+
width: '100%',
67+
height: '100%',
68+
colorScheme: 'light'
69+
}}
70+
frameborder="0"
71+
loading="lazy"
72+
webkitAllowFullScreen
73+
mozAllowFullScreen
74+
allowFullScreen
75+
allow="clipboard-write">
76+
</iframe>
77+
</div>
78+
<p></p>
5679

5780
The steps to show the selected date in the Text widget are as follows:
5881

@@ -281,13 +304,61 @@ You can change the color of the icons displayed on the top right side of the cal
281304
2. Move to the Properties panel and scroll down to the **Calendar** section.
282305
3. Find the **Icon Colors** property, click on the box next to **Unset**, select the color, and then click **Use Color** or click on **Unset** and enter a Hex Code directly. You can also choose the color by clicking the Palette and Simple button.
283306

284-
![changing-icon-color.gif](imgs/changing-icon-color.gif)
307+
<div style={{
308+
position: 'relative',
309+
paddingBottom: 'calc(56.67989417989418% + 41px)', // Keeps the aspect ratio and additional padding
310+
height: 0,
311+
width: '100%'}}>
312+
<iframe
313+
src="https://demo.arcade.software/fB2aHoT3Qv9FrlXP4wGV?embed&show_copy_link=true"
314+
title=""
315+
style={{
316+
position: 'absolute',
317+
top: 0,
318+
left: 0,
319+
width: '100%',
320+
height: '100%',
321+
colorScheme: 'light'
322+
}}
323+
frameborder="0"
324+
loading="lazy"
325+
webkitAllowFullScreen
326+
mozAllowFullScreen
327+
allowFullScreen
328+
allow="clipboard-write">
329+
</iframe>
330+
</div>
331+
<p></p>
285332

286333
### Separate title and icons
287334

288335
By default, the calendar title (displaying the current month-year) and the icon for changing the month are positioned on the same row. If you wish to place them in separate rows, navigate to the **Properties Panel > Calendar >** and **enable the Two-row Header** option.
289336

290-
![separate-title-icon.gif](imgs/separate-title-icon.gif)
337+
<div style={{
338+
position: 'relative',
339+
paddingBottom: 'calc(56.67989417989418% + 41px)', // Keeps the aspect ratio and additional padding
340+
height: 0,
341+
width: '100%'}}>
342+
<iframe
343+
src="https://demo.arcade.software/C6QmsfHDwktnhPyFkuYi?embed&show_copy_link=true"
344+
title=""
345+
style={{
346+
position: 'absolute',
347+
top: 0,
348+
left: 0,
349+
width: '100%',
350+
height: '100%',
351+
colorScheme: 'light'
352+
}}
353+
frameborder="0"
354+
loading="lazy"
355+
webkitAllowFullScreen
356+
mozAllowFullScreen
357+
allowFullScreen
358+
allow="clipboard-write">
359+
</iframe>
360+
</div>
361+
<p></p>
291362

292363
### Changing row height
293364

@@ -299,4 +370,28 @@ To change the row height:
299370
2. Move to the Properties panel and scroll down to the **Calendar** section.
300371
3. Find the **Row Height** property and enter the value.
301372

302-
![changing-row-height.gif](imgs/changing-row-height.gif)
373+
<div style={{
374+
position: 'relative',
375+
paddingBottom: 'calc(56.67989417989418% + 41px)', // Keeps the aspect ratio and additional padding
376+
height: 0,
377+
width: '100%'}}>
378+
<iframe
379+
src="https://demo.arcade.software/srhb02TuijJ6YI555RV0?embed&show_copy_link=true"
380+
title=""
381+
style={{
382+
position: 'absolute',
383+
top: 0,
384+
left: 0,
385+
width: '100%',
386+
height: '100%',
387+
colorScheme: 'light'
388+
}}
389+
frameborder="0"
390+
loading="lazy"
391+
webkitAllowFullScreen
392+
mozAllowFullScreen
393+
allowFullScreen
394+
allow="clipboard-write">
395+
</iframe>
396+
</div>
397+
<p></p>

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

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -14,7 +14,6 @@ The Bar Chart shows the rectangular bars on a graph whose height varies as per i
1414

1515
For example, you could use the Bar chart to display each year's income and expense value together.
1616

17-
![bar-chart-fi.avif](../imgs/bar-chart-fi.avif)
1817

1918
## Adding bar chart
2019

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

Lines changed: 100 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,6 @@ import TabItem from '@theme/TabItem';
1111
# Chart
1212
The chart widget is used to represent the information in a graphical format. You can use it to display complex information in an easily understandable format.
1313

14-
![chart-fi.png](../imgs/chart-fi.png)
1514

1615
## Types of chart
1716

@@ -324,10 +323,58 @@ To display numbers on the X-axis:
324323

325324
<Tabs>
326325
<TabItem value="1" label="Displaying numbers on the X axis" default>
327-
![Displaying numbers on the X axis](../imgs/display-numbers-on-x-axis.gif)
326+
<div style={{
327+
position: 'relative',
328+
paddingBottom: 'calc(56.67989417989418% + 41px)', // Keeps the aspect ratio and additional padding
329+
height: 0,
330+
width: '100%'}}>
331+
<iframe
332+
src="https://demo.arcade.software/5AcZkCLWyOzTn5fwhLaX?embed&show_copy_link=true"
333+
title=""
334+
style={{
335+
position: 'absolute',
336+
top: 0,
337+
left: 0,
338+
width: '100%',
339+
height: '100%',
340+
colorScheme: 'light'
341+
}}
342+
frameborder="0"
343+
loading="lazy"
344+
webkitAllowFullScreen
345+
mozAllowFullScreen
346+
allowFullScreen
347+
allow="clipboard-write">
348+
</iframe>
349+
</div>
350+
<p></p>
328351
</TabItem>
329352
<TabItem value="2" label="Displaying numbers (with formatting) on the X axis">
330-
![Displaying numbers (with formatting) on the X axis](../imgs/display-numbers-with-formatting-on-x-axis.gif)
353+
<div style={{
354+
position: 'relative',
355+
paddingBottom: 'calc(56.67989417989418% + 41px)', // Keeps the aspect ratio and additional padding
356+
height: 0,
357+
width: '100%'}}>
358+
<iframe
359+
src="https://demo.arcade.software/JEOGGv8mqnZIdupEMGo1?embed&show_copy_link=true"
360+
title=""
361+
style={{
362+
position: 'absolute',
363+
top: 0,
364+
left: 0,
365+
width: '100%',
366+
height: '100%',
367+
colorScheme: 'light'
368+
}}
369+
frameborder="0"
370+
loading="lazy"
371+
webkitAllowFullScreen
372+
mozAllowFullScreen
373+
allowFullScreen
374+
allow="clipboard-write">
375+
</iframe>
376+
</div>
377+
<p></p>
331378
</TabItem>
332379
</Tabs>
333380

@@ -390,12 +437,59 @@ To display numbers on the Y axis:
390437
5. You can also customize the appearance of the numbers.
391438

392439

393-
394440
<Tabs>
395441
<TabItem value="1" label="Displaying numbers on the Y axis" default>
396-
![display-numbers-on-y-axis](../imgs/display-numbers-on-y-axis.gif)
442+
<div style={{
443+
position: 'relative',
444+
paddingBottom: 'calc(56.67989417989418% + 41px)', // Keeps the aspect ratio and additional padding
445+
height: 0,
446+
width: '100%'}}>
447+
<iframe
448+
src="https://demo.arcade.software/qJn8HQDX9R64b2AI66vc?embed&show_copy_link=true"
449+
title=""
450+
style={{
451+
position: 'absolute',
452+
top: 0,
453+
left: 0,
454+
width: '100%',
455+
height: '100%',
456+
colorScheme: 'light'
457+
}}
458+
frameborder="0"
459+
loading="lazy"
460+
webkitAllowFullScreen
461+
mozAllowFullScreen
462+
allowFullScreen
463+
allow="clipboard-write">
464+
</iframe>
465+
</div>
466+
<p></p>
397467
</TabItem>
398468
<TabItem value="2" label="Displaying numbers (with formatting) on the Y axis">
399-
![display-numbers-with-formatting-on-y-axis](../imgs/display-numbers-with-formatting-on-y-axis.gif)
469+
<div style={{
470+
position: 'relative',
471+
paddingBottom: 'calc(56.67989417989418% + 41px)', // Keeps the aspect ratio and additional padding
472+
height: 0,
473+
width: '100%'}}>
474+
<iframe
475+
src="https://demo.arcade.software/iXMOcpbMLmmlDbiauyg7?embed&show_copy_link=true"
476+
title=""
477+
style={{
478+
position: 'absolute',
479+
top: 0,
480+
left: 0,
481+
width: '100%',
482+
height: '100%',
483+
colorScheme: 'light'
484+
}}
485+
frameborder="0"
486+
loading="lazy"
487+
webkitAllowFullScreen
488+
mozAllowFullScreen
489+
allowFullScreen
490+
allow="clipboard-write">
491+
</iframe>
492+
</div>
493+
<p></p>
400494
</TabItem>
401495
</Tabs>

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

Lines changed: 0 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -14,8 +14,6 @@ The Line Chart connects the data points on a graph with a line. This is typicall
1414

1515
For example, you could use this widget to show progress over some time. This will plot the progress value on a chart that becomes easily digestible for the users instead of just showing numbers in a tabular format.
1616

17-
![line-chart-fi.avif](../imgs/line-chart-fi.avif)
18-
1917
## Adding line chart
2018

2119
Adding a chart comprises of following steps:

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

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -13,7 +13,6 @@ The Pie Chart divides the circle (aka Donut) into slices/sections representing d
1313

1414
For example, you could use the Pie Chart to show which animal dominates the pet world.
1515

16-
![pie-chart-fi.avif](../imgs/pie-chart-fi.avif)
1716

1817
## Adding pie chart
1918

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

Lines changed: 75 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -72,7 +72,31 @@ You might want to allow users to select multiple choices to filter the result.
7272

7373
To allow multiselect, select the **ChoiceChips** widget, move to the properties panel, find the **Allow Multiselect** property and enable it.
7474

75-
![Allow mulitselect](imgs/choice-chips-multiselect.gif)
75+
<div style={{
76+
position: 'relative',
77+
paddingBottom: 'calc(56.67989417989418% + 41px)', // Keeps the aspect ratio and additional padding
78+
height: 0,
79+
width: '100%'}}>
80+
<iframe
81+
src="https://demo.arcade.software/VqGnacSdCkjlgUEKxxpy?embed&show_copy_link=true"
82+
title=""
83+
style={{
84+
position: 'absolute',
85+
top: 0,
86+
left: 0,
87+
width: '100%',
88+
height: '100%',
89+
colorScheme: 'light'
90+
}}
91+
frameborder="0"
92+
loading="lazy"
93+
webkitAllowFullScreen
94+
mozAllowFullScreen
95+
allowFullScreen
96+
allow="clipboard-write">
97+
</iframe>
98+
</div>
99+
<p></p>
76100

77101
### Disable ChoiceChips
78102

@@ -113,13 +137,61 @@ To add a space between the chips, you can use the **Chip Spacing** ad **Row Spac
113137
- **Chip Spacing**: This adds horizontal gaps between individual chips.
114138
- **Row Spacing**: This adds vertical gaps between the chips in a row.
115139

116-
![Adding Space between Chips](imgs/chip-spacing.gif)
140+
<div style={{
141+
position: 'relative',
142+
paddingBottom: 'calc(56.67989417989418% + 41px)', // Keeps the aspect ratio and additional padding
143+
height: 0,
144+
width: '100%'}}>
145+
<iframe
146+
src="https://demo.arcade.software/AfcL6FJqajdK1lTNm1me?embed&show_copy_link=true"
147+
title=""
148+
style={{
149+
position: 'absolute',
150+
top: 0,
151+
left: 0,
152+
width: '100%',
153+
height: '100%',
154+
colorScheme: 'light'
155+
}}
156+
frameborder="0"
157+
loading="lazy"
158+
webkitAllowFullScreen
159+
mozAllowFullScreen
160+
allowFullScreen
161+
allow="clipboard-write">
162+
</iframe>
163+
</div>
164+
<p></p>
117165

118166
### Align chips
119167

120168
When you have chips in multiple rows, you can align them using the **Alignment** property. This is similar to setting main axis alignment for the Row widget.
121169

122-
![Align chips](imgs/align-chips.gif)
170+
<div style={{
171+
position: 'relative',
172+
paddingBottom: 'calc(56.67989417989418% + 41px)', // Keeps the aspect ratio and additional padding
173+
height: 0,
174+
width: '100%'}}>
175+
<iframe
176+
src="https://demo.arcade.software/DgiJyfeuWqactFYVKd1v?embed&show_copy_link=true"
177+
title=""
178+
style={{
179+
position: 'absolute',
180+
top: 0,
181+
left: 0,
182+
width: '100%',
183+
height: '100%',
184+
colorScheme: 'light'
185+
}}
186+
frameborder="0"
187+
loading="lazy"
188+
webkitAllowFullScreen
189+
mozAllowFullScreen
190+
allowFullScreen
191+
allow="clipboard-write">
192+
</iframe>
193+
</div>
194+
<p></p>
123195

124196
### Customizing selected and unselected chip style
125197

0 commit comments

Comments
 (0)