Skip to content

Commit 09d76e4

Browse files
BackiarajBackiaraj
committed
Update preview sample output of Blazor components UG documentation
1 parent 32cc0a1 commit 09d76e4

20 files changed

+47
-141
lines changed

‎blazor/ribbon/getting-started-webapp.md‎

Lines changed: 1 addition & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -311,8 +311,6 @@ Within a group, items are organized into collections. Use the [RibbonCollection]
311311
{% endhighlight %}
312312
{% endtabs %}
313313

314-
{% previewsample "https://blazorplayground.syncfusion.com/embed/LZrJCLsRVGKvCOVj?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
314+
{% previewsample "https://blazorplayground.syncfusion.com/embed/LZrJCLsRVGKvCOVj?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Ribbon Component](./images/getting-started.png)" %}
315315

316316
* Press <kbd>Ctrl</kbd>+<kbd>F5</kbd> (Windows) or <kbd>⌘</kbd>+<kbd>F5</kbd> (macOS) to launch the application. This will render the Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Ribbon component in your default web browser.
317-
318-
![Blazor Ribbon Component](./images/getting-started.png)

‎blazor/ribbon/getting-started.md‎

Lines changed: 1 addition & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -230,8 +230,6 @@ You can use the [RibbonCollection](https://help.syncfusion.com/cr/blazor/Syncfus
230230
{% endhighlight %}
231231
{% endtabs %}
232232

233-
{% previewsample "https://blazorplayground.syncfusion.com/embed/LZrJCLsRVGKvCOVj?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
233+
{% previewsample "https://blazorplayground.syncfusion.com/embed/LZrJCLsRVGKvCOVj?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Ribbon Component](./images/getting-started.png)" %}
234234

235235
Press <kbd>Ctrl</kbd>+<kbd>F5</kbd> (Windows) or <kbd>⌘</kbd>+<kbd>F5</kbd> (macOS) to run the application. The Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Ribbon component will be rendered in your default web browser.
236-
237-
![Blazor Ribbon Component](./images/getting-started.png)

‎blazor/timeline/align.md‎

Lines changed: 4 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -50,9 +50,7 @@ In [`Before`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Layouts.Ti
5050
5151
```
5252

53-
{% previewsample "https://blazorplayground.syncfusion.com/embed/hNrSMXMNhTCgiUvW?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
54-
55-
![Blazor Timeline Component with Before Alignment](./images/Blazor-align-before.png)
53+
{% previewsample "https://blazorplayground.syncfusion.com/embed/hNrSMXMNhTCgiUvW?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Timeline Component with Before Alignment](./images/Blazor-align-before.png)" %}
5654

5755
## After
5856

@@ -93,9 +91,7 @@ In [`After`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Layouts.Tim
9391
9492
```
9593

96-
{% previewsample "https://blazorplayground.syncfusion.com/embed/LDBysNCtBpLrvjno?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
97-
98-
![Blazor Timeline Component with After Alignment](./images/Blazor-align-after.png)
94+
{% previewsample "https://blazorplayground.syncfusion.com/embed/LDBysNCtBpLrvjno?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Timeline Component with After Alignment](./images/Blazor-align-after.png)" %}
9995

10096
## Alternate
10197

@@ -136,9 +132,7 @@ In [`Alternate`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Layouts
136132
137133
```
138134

139-
{% previewsample "https://blazorplayground.syncfusion.com/embed/VZVIiDiDLprmoLpT?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
140-
141-
![Blazor Timeline Component with Alternate Alignment](./images/Blazor-align-alternate.png)
135+
{% previewsample "https://blazorplayground.syncfusion.com/embed/VZVIiDiDLprmoLpT?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Timeline Component with Alternate Alignment](./images/Blazor-align-alternate.png)" %}
142136

143137
## Alternate Reverse
144138

@@ -179,6 +173,4 @@ In [`AlternateReverse`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.
179173
180174
```
181175

182-
{% previewsample "https://blazorplayground.syncfusion.com/embed/rNreWNWXhzAhJPqo?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
183-
184-
![Blazor Timeline Component with Alternate Reverse Alignment](./images/Blazor-align-alternatereverse.png)
176+
{% previewsample "https://blazorplayground.syncfusion.com/embed/rNreWNWXhzAhJPqo?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Timeline Component with Alternate Reverse Alignment](./images/Blazor-align-alternatereverse.png)" %}

‎blazor/timeline/customization.md‎

Lines changed: 7 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -59,9 +59,7 @@ Define styles applicable to all Timeline item connectors. The CSS selector `.e-t
5959
6060
```
6161

62-
{% previewsample "https://blazorplayground.syncfusion.com/embed/VZrSsXCtVJSVQymc?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
63-
64-
![Blazor Timeline Component with Common Customized Connector](./images/Blazor-connector-common.png)
62+
{% previewsample "https://blazorplayground.syncfusion.com/embed/VZrSsXCtVJSVQymc?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Timeline Component with Common Customized Connector](./images/Blazor-connector-common.png)" %}
6563

6664
### Individual Styling
6765

@@ -113,9 +111,7 @@ Apply unique styles to individual connectors to differentiate specific items wit
113111
114112
```
115113

116-
{% previewsample "https://blazorplayground.syncfusion.com/embed/BjVIijCXVzSGcbwr?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
117-
118-
![Blazor Timeline Component with Individual Customized Connector](./images/Blazor-connector-individual.png)
114+
{% previewsample "https://blazorplayground.syncfusion.com/embed/BjVIijCXVzSGcbwr?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Timeline Component with Individual Customized Connector](./images/Blazor-connector-individual.png)" %}
119115

120116
## Dot Styling
121117

@@ -177,9 +173,7 @@ Modify the color of the dots to highlight specific Timeline items. The `.e-dot`
177173
178174
```
179175

180-
{% previewsample "https://blazorplayground.syncfusion.com/embed/BZBosDWNVzniYHpT?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
181-
182-
![Blazor Timeline Component with Customized Dot color](./images/Blazor-custom-dot-color.png)
176+
{% previewsample "https://blazorplayground.syncfusion.com/embed/BZBosDWNVzniYHpT?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Timeline Component with Customized Dot color](./images/Blazor-custom-dot-color.png)" %}
183177

184178
### Dot Size
185179

@@ -243,9 +237,7 @@ Adjust the dot size using the `--dot-size` CSS variable, making it larger or sma
243237
244238
```
245239

246-
{% previewsample "https://blazorplayground.syncfusion.com/embed/BNhoMDCZhJdwIyCf?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
247-
248-
![Blazor Timeline Component with Customized Dot size](./images/Blazor-custom-dot-size.png)
240+
{% previewsample "https://blazorplayground.syncfusion.com/embed/BNhoMDCZhJdwIyCf?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Timeline Component with Customized Dot size](./images/Blazor-custom-dot-size.png)" %}
249241

250242
### Dot Shadow
251243

@@ -300,9 +292,7 @@ Add shadow effects to Timeline dots for visual engagement using the `--dot-outer
300292
301293
```
302294

303-
{% previewsample "https://blazorplayground.syncfusion.com/embed/BDrIsDWZVzchTIyz?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
304-
305-
![Blazor Timeline Component with Customized Dot shadow](./images/Blazor-custom-dot-shadow.png)
295+
{% previewsample "https://blazorplayground.syncfusion.com/embed/BDrIsDWZVzchTIyz?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Timeline Component with Customized Dot shadow](./images/Blazor-custom-dot-shadow.png)" %}
306296

307297
### Dot Variant
308298

@@ -378,9 +368,7 @@ Achieve desired dot variants by customizing the border, outline, and background
378368
379369
```
380370

381-
{% previewsample "https://blazorplayground.syncfusion.com/embed/rDBIMjWjrJQutWVB?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
382-
383-
![Blazor Timeline Component with Customized Dot variant](./images/Blazor-custom-dot-variant.png)
371+
{% previewsample "https://blazorplayground.syncfusion.com/embed/rDBIMjWjrJQutWVB?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Timeline Component with Customized Dot variant](./images/Blazor-custom-dot-variant.png)" %}
384372

385373
### Dot Outline
386374

@@ -428,6 +416,4 @@ Adding the `e-outline` class to the Timeline's [`CssClass`](https://help.syncfus
428416
429417
```
430418

431-
{% previewsample "https://blazorplayground.syncfusion.com/embed/VjryCZitBflzyNaY?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
432-
433-
![Blazor Timeline Component with Customized Dot outline](./images/Blazor-custom-dot-outline.png)
419+
{% previewsample "https://blazorplayground.syncfusion.com/embed/VjryCZitBflzyNaY?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Timeline Component with Customized Dot outline](./images/Blazor-custom-dot-outline.png)" %}

‎blazor/timeline/items.md‎

Lines changed: 4 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -52,9 +52,7 @@ Define string content for the Timeline items.
5252
5353
```
5454

55-
{% previewsample "https://blazorplayground.syncfusion.com/embed/VDhoiXitLINuEmVQ?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
56-
57-
![Blazor Timeline Component with String Content](./images/Blazor-content-string.png)
55+
{% previewsample "https://blazorplayground.syncfusion.com/embed/VDhoiXitLINuEmVQ?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Timeline Component with String Content](./images/Blazor-content-string.png)" %}
5856

5957
### Template Content
6058

@@ -148,9 +146,7 @@ Specify template content for items within the [`Content`](https://help.syncfusio
148146
149147
```
150148

151-
{% previewsample "https://blazorplayground.syncfusion.com/embed/LDVoiZWNBIsugdwp?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
152-
153-
![Blazor Timeline Component with Template Content](./images/Blazor-content-template.png)
149+
{% previewsample "https://blazorplayground.syncfusion.com/embed/LDVoiZWNBIsugdwp?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Timeline Component with Template Content](./images/Blazor-content-template.png)" %}
154150

155151
## Adding Opposite Content
156152

@@ -193,9 +189,7 @@ Additional information can be added to each Timeline item using the [`OppositeCo
193189
}
194190
195191
```
196-
{% previewsample "https://blazorplayground.syncfusion.com/embed/hNhesNCtVIBdFQVq?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
197-
198-
![Blazor Timeline Component with Opposite Content](./images/Blazor-oppositecontent.png)
192+
{% previewsample "https://blazorplayground.syncfusion.com/embed/hNhesNCtVIBdFQVq?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Timeline Component with Opposite Content](./images/Blazor-oppositecontent.png)" %}
199193

200194
## Dot Item
201195

@@ -301,9 +295,7 @@ Use the [`Disabled`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Lay
301295
302296
```
303297

304-
{% previewsample "https://blazorplayground.syncfusion.com/embed/BXVSiXsNrenzQvuQ?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
305-
306-
![Blazor Timeline Component with Disabled Item](./images/Blazor-disabled.png)
298+
{% previewsample "https://blazorplayground.syncfusion.com/embed/BXVSiXsNrenzQvuQ?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Timeline Component with Disabled Item](./images/Blazor-disabled.png)" %}
307299

308300
## CSS Class
309301

‎blazor/timeline/orientations.md‎

Lines changed: 2 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -55,9 +55,7 @@ Display items vertically by setting the [`Orientation`](https://help.syncfusion.
5555
5656
```
5757

58-
{% previewsample "https://blazorplayground.syncfusion.com/embed/rjrICNiXVyQMOUAm?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
59-
60-
![Blazor Timeline Component with Vertical Orientation](./images/Blazor-orientation-vertical.png)
58+
{% previewsample "https://blazorplayground.syncfusion.com/embed/rjrICNiXVyQMOUAm?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Timeline Component with Vertical Orientation](./images/Blazor-orientation-vertical.png)" %}
6159

6260
## Horizontal
6361

@@ -101,6 +99,4 @@ In horizontal orientation, items are displayed side-by-side by setting the [`Ori
10199
102100
```
103101

104-
{% previewsample "https://blazorplayground.syncfusion.com/embed/LDVyMjsZheQuYAQE?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
105-
106-
![Blazor Timeline Component with Horizontal Orientation](./images/Blazor-orientation-horizontal.png)
102+
{% previewsample "https://blazorplayground.syncfusion.com/embed/LDVyMjsZheQuYAQE?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Timeline Component with Horizontal Orientation](./images/Blazor-orientation-horizontal.png)" %}

‎blazor/timeline/reverse.md‎

Lines changed: 1 addition & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -42,6 +42,4 @@ The `Reverse` property reverses the order of the Timeline items as defined in th
4242
4343
```
4444

45-
{% previewsample "https://blazorplayground.syncfusion.com/embed/LDVoMXMZryaiFxsB?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
46-
47-
![Blazor Timeline Component with Common Customized Connector](./images/Blazor-reverse.png)
45+
{% previewsample "https://blazorplayground.syncfusion.com/embed/LDVoMXMZryaiFxsB?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Timeline Component with Common Customized Connector](./images/Blazor-reverse.png)" %}

‎blazor/timeline/template.md‎

Lines changed: 1 addition & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -169,6 +169,4 @@ The `Template` context receives the following information:
169169
}
170170
171171
```
172-
{% previewsample "https://blazorplayground.syncfusion.com/embed/hDBIitWNVdDBCoBz?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
173-
174-
![Blazor Timeline Component with Template](./images/Blazor-template.png)
172+
{% previewsample "https://blazorplayground.syncfusion.com/embed/hDBIitWNVdDBCoBz?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Timeline Component with Template](./images/Blazor-template.png)" %}

‎blazor/toolbar/align-items-using-spacer.md‎

Lines changed: 3 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -34,9 +34,7 @@ Insert spacers at the end of the items on the left and in the center. This will
3434
</ToolbarItems>
3535
</SfToolbar>
3636
```
37-
{% previewsample "https://blazorplayground.syncfusion.com/embed/VNLSMZiXfjMHImXT?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
38-
39-
![Blazor Toolbar Spacer](./images/blazor-toolbar-spacer-left-right-center-item.png)
37+
{% previewsample "https://blazorplayground.syncfusion.com/embed/VNLSMZiXfjMHImXT?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Toolbar Spacer](./images/blazor-toolbar-spacer-left-right-center-item.png)" %}
4038

4139
## Left and Right alignment
4240

@@ -58,9 +56,7 @@ Insert a spacer between items intended for left and right alignment. This pushes
5856
</ToolbarItems>
5957
</SfToolbar>
6058
```
61-
{% previewsample "https://blazorplayground.syncfusion.com/embed/rDhyCjCNpZsakxAz?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
62-
63-
![Blazor Toolbar Spacer](./images/blazor-toolbar-spacer-left-right-item.png)
59+
{% previewsample "https://blazorplayground.syncfusion.com/embed/rDhyCjCNpZsakxAz?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Toolbar Spacer](./images/blazor-toolbar-spacer-left-right-item.png)" %}
6460

6561
## Right alignment
6662

@@ -82,9 +78,7 @@ Insert a spacer as the first item in the toolbar. This pushes all other items to
8278
</ToolbarItems>
8379
</SfToolbar>
8480
```
85-
{% previewsample "https://blazorplayground.syncfusion.com/embed/LDLesXsXJthASXEy?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
86-
87-
![Blazor Toolbar Spacer](./images/blazor-toolbar-spacer-right-item.png)
81+
{% previewsample "https://blazorplayground.syncfusion.com/embed/LDLesXsXJthASXEy?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Toolbar Spacer](./images/blazor-toolbar-spacer-right-item.png)" %}
8882

8983

9084
N> Avoid using the `Align` property in toolbar items when `Spacer` is utilized.

‎blazor/toolbar/how-to/add-remove-toolbar-items.md‎

Lines changed: 1 addition & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -91,6 +91,4 @@ In the following demo, the `ToolbarItems` collection initially contains five ite
9191
}
9292

9393
```
94-
{% previewsample "https://blazorplayground.syncfusion.com/embed/BDheWZitquTDHMDs?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
95-
96-
![Adding or Removing Blazor Toolbar Items](../images/blazor-toolbar-add-or-remove-item.gif)
94+
{% previewsample "https://blazorplayground.syncfusion.com/embed/BDheWZitquTDHMDs?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Adding or Removing Blazor Toolbar Items](../images/blazor-toolbar-add-or-remove-item.gif)" %}

0 commit comments

Comments
 (0)