Merge pull request #6873 from syncfusion-content/984382-timeline

Updated the UG document for the Timeline Component

Author: VengateshManiraj

blazor/timeline/accessibility.md

@@ -9,7 +9,7 @@ documentation: ug
 
 # Accessibility in Blazor Timeline component
 
-The Blazor Timeline component followed the accessibility guidelines and standards, including [ADA](https://www.ada.gov/), [Section 508](https://www.section508.gov/), [WCAG 2.2](https://www.w3.org/TR/WCAG22/) standards, and [WCAG roles](https://www.w3.org/TR/wai-aria/#roles) that are commonly used to evaluate accessibility.
+The Blazor Timeline component adheres to accessibility guidelines and standards, including [ADA](https://www.ada.gov/), [Section 508](https://www.section508.gov/), [WCAG 2.2](https://www.w3.org/TR/WCAG22/) standards. It incorporates [WCAG roles](https://www.w3.org/TR/wai-aria/#roles) commonly used for accessibility evaluation.
 
 The accessibility compliance for the Blazor Timeline component is outlined below.
 
@@ -37,7 +37,7 @@ The accessibility compliance for the Blazor Timeline component is outlined below
 
 <div><img src="https://cdn.syncfusion.com/content/images/documentation/not-supported.png" alt="No"> - The component does not meet the requirement.</div>
 
-## WAI-ARIA attributes
+## WAI-ARIA Attributes
 
 The following ARIA attributes are used in the Timeline component:
 
@@ -46,12 +46,12 @@ The following ARIA attributes are used in the Timeline component:
 | `role=navigation` | Specified its purpose as a navigational element. |
 | `aria-label` | Provides an accessibile name for an element when a visible label is not present |
 
-## Ensuring accessibility
+## Ensuring Accessibility
 
-The Blazor Timeline component's accessibility levels are ensured through an [axe-core](https://www.nuget.org/packages/Deque.AxeCore.Playwright) with playwright tests.
+The accessibility levels of the Blazor Timeline component are verified through [axe-core](https://www.nuget.org/packages/Deque.AxeCore.Playwright) with Playwright tests.
 
 The accessibility compliance of the Blazor Timeline component is shown in the following sample. Open the [sample](https://blazor.syncfusion.com/accessibility/timeline) in a new window to evaluate the accessibility of the Blazor Timeline component with accessibility tools.
 
-## See also
+## See Also
 
 * [Accessibility in Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor components](https://blazor.syncfusion.com/documentation/common/accessibility)

blazor/timeline/align.md

@@ -9,11 +9,11 @@ documentation: ug
 
 # Alignment in Blazor Timeline component
 
-You can display the Timeline content [`Before`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Layouts.TimelineAlignment.html#Syncfusion_Blazor_Layouts_TimelineAlignment_Before), [`After`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Layouts.TimelineAlignment.html#Syncfusion_Blazor_Layouts_TimelineAlignment_After), [`Alternate`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Layouts.TimelineAlignment.html#Syncfusion_Blazor_Layouts_TimelineAlignment_Alternate) and [`AlternateReverse`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Layouts.TimelineAlignment.html#Syncfusion_Blazor_Layouts_TimelineAlignment_AlternateReverse) by using the [`Alignment`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Layouts.SfTimeline.html#Syncfusion_Blazor_Layouts_SfTimeline_Alignment) property. The [`oppositeContent`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Layouts.TimelineItem.html#Syncfusion_Blazor_Layouts_TimelineItem_OppositeContent) will be displayed parallel to the content when configured in the [`TimelineItem`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Layouts.TimelineItem.html) directive.
+Control the display of timeline content using the [`Alignment`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Layouts.SfTimeline.html#Syncfusion_Blazor_Layouts_SfTimeline_Alignment) property, with options such as [`Before`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Layouts.TimelineAlignment.html#Syncfusion_Blazor_Layouts_TimelineAlignment_Before), [`After`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Layouts.TimelineAlignment.html#Syncfusion_Blazor_Layouts_TimelineAlignment_After), [`Alternate`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Layouts.TimelineAlignment.html#Syncfusion_Blazor_Layouts_TimelineAlignment_Alternate), and [`AlternateReverse`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Layouts.TimelineAlignment.html#Syncfusion_Blazor_Layouts_TimelineAlignment_AlternateReverse). The  [`oppositeContent`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Layouts.TimelineItem.html#Syncfusion_Blazor_Layouts_TimelineItem_OppositeContent) is displayed parallel to the main content when configured within the [`TimelineItem`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Layouts.TimelineItem.html) directive.
 
 ## Before
 
-In [`Before`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Layouts.TimelineAlignment.html#Syncfusion_Blazor_Layouts_TimelineAlignment_Before) alignment, for [`horizontal`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Layouts.TimelineOrientation.html#Syncfusion_Blazor_Layouts_TimelineOrientation_Horizontal) orientation the item content is placed at the top and [`oppositeContent`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Layouts.TimelineItem.html#Syncfusion_Blazor_Layouts_TimelineItem_OppositeContent) at the bottom whereas in [`vertical`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Layouts.TimelineOrientation.html#Syncfusion_Blazor_Layouts_TimelineOrientation_Vertical), the content to the left and [`oppositeContent`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Layouts.TimelineItem.html#Syncfusion_Blazor_Layouts_TimelineItem_OppositeContent) to the right.
+In [`Before`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Layouts.TimelineAlignment.html#Syncfusion_Blazor_Layouts_TimelineAlignment_Before) alignment, for [`horizontal`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Layouts.TimelineOrientation.html#Syncfusion_Blazor_Layouts_TimelineOrientation_Horizontal) orientation the item content is placed at the top and [`oppositeContent`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Layouts.TimelineItem.html#Syncfusion_Blazor_Layouts_TimelineItem_OppositeContent) at the bottom. In [`vertical`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Layouts.TimelineOrientation.html#Syncfusion_Blazor_Layouts_TimelineOrientation_Vertical) orientation, content is placed to the left and [`oppositeContent`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Layouts.TimelineItem.html#Syncfusion_Blazor_Layouts_TimelineItem_OppositeContent) to the right.
 
 ```cshtml
 
@@ -50,11 +50,13 @@ In [`Before`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Layouts.Ti
 
 ```
 
+{% previewsample "https://blazorplayground.syncfusion.com/embed/hNrSMXMNhTCgiUvW?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
+
 ![Blazor Timeline Component with Before Alignment](./images/Blazor-align-before.png)
 
 ## After
 
-In [`After`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Layouts.TimelineAlignment.html#Syncfusion_Blazor_Layouts_TimelineAlignment_After) alignment, for [`horizontal`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Layouts.TimelineOrientation.html#Syncfusion_Blazor_Layouts_TimelineOrientation_Horizontal) orientation the item content is placed at the bottom and [`oppositeContent`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Layouts.TimelineItem.html#Syncfusion_Blazor_Layouts_TimelineItem_OppositeContent) at the top whereas in `vertical`, the content to the right and [`oppositeContent`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Layouts.TimelineItem.html#Syncfusion_Blazor_Layouts_TimelineItem_OppositeContent) to the left.
+In [`After`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Layouts.TimelineAlignment.html#Syncfusion_Blazor_Layouts_TimelineAlignment_After) alignment, for [`horizontal`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Layouts.TimelineOrientation.html#Syncfusion_Blazor_Layouts_TimelineOrientation_Horizontal) orientation, item content is placed at the bottom and [`oppositeContent`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Layouts.TimelineItem.html#Syncfusion_Blazor_Layouts_TimelineItem_OppositeContent) at the top. In `vertical` orientation, content is placed to the right and [`oppositeContent`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Layouts.TimelineItem.html#Syncfusion_Blazor_Layouts_TimelineItem_OppositeContent) to the left.
 
 ```cshtml
 
@@ -91,11 +93,13 @@ In [`After`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Layouts.Tim
 
 ```
 
+{% previewsample "https://blazorplayground.syncfusion.com/embed/LDBysNCtBpLrvjno?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
+
 ![Blazor Timeline Component with After Alignment](./images/Blazor-align-after.png)
 
 ## Alternate
 
-In [`Alternate`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Layouts.TimelineAlignment.html#Syncfusion_Blazor_Layouts_TimelineAlignment_Alternate) alignment, the item content are arranged alternatively regardless of the Timeline orientation.
+In [`Alternate`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Layouts.TimelineAlignment.html#Syncfusion_Blazor_Layouts_TimelineAlignment_Alternate) alignment, item content is arranged alternatively, regardless of the Timeline orientation.
 
 ```cshtml
 
@@ -132,9 +136,11 @@ In [`Alternate`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Layouts
 
 ```
 
+{% previewsample "https://blazorplayground.syncfusion.com/embed/VZVIiDiDLprmoLpT?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
+
 ![Blazor Timeline Component with Alternate Alignment](./images/Blazor-align-alternate.png)
 
-## Alternate reverse
+## Alternate Reverse
 
 In [`AlternateReverse`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Layouts.TimelineAlignment.html#Syncfusion_Blazor_Layouts_TimelineAlignment_AlternateReverse) alignment, the item content are arranged in reverse alternate regardless of the Timeline orientation.
 
@@ -173,4 +179,6 @@ In [`AlternateReverse`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.
 
 ```
 
+{% previewsample "https://blazorplayground.syncfusion.com/embed/rNreWNWXhzAhJPqo?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
+
 ![Blazor Timeline Component with Alternate Reverse Alignment](./images/Blazor-align-alternatereverse.png)

blazor/timeline/customization.md

@@ -7,15 +7,15 @@ control: Timeline
 documentation: ug
 ---
 
-# Customization in Blazor Timeline component
+# Customization in Blazor Timeline Component
 
-You can customize the Timeline items dot size, connectors, dot borders, dot outer space and more to personalize its appearance. This section explains the different ways for styling the items.
+Customize the Timeline item's dot size, connectors, dot borders, and dot outer space to personalize its appearance. This section details various methods for styling the items.
 
-## Connector styling
+## Connector Styling
 
-### Common styling
+### Common Styling
 
-You can define the styles applicable to the all the Timeline item connectors.
+Define styles applicable to all Timeline item connectors. The CSS selector `.e-timeline-item.e-connector::after` targets the pseudo-element representing the connector line for each item.
 
 ```cshtml
 
@@ -59,11 +59,13 @@ You can define the styles applicable to the all the Timeline item connectors.
 
 ```
 
+{% previewsample "https://blazorplayground.syncfusion.com/embed/VZrSsXCtVJSVQymc?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
+
 ![Blazor Timeline Component with Common Customized Connector](./images/Blazor-connector-common.png)
 
-### Individual styling
+### Individual Styling
 
-You can also apply unique styles to individual connectors, to differentiate specific items within the Timeline.
+Apply unique styles to individual connectors to differentiate specific items within the Timeline. 
 
 ```cshtml
 
@@ -111,13 +113,15 @@ You can also apply unique styles to individual connectors, to differentiate spec
 
 ```
 
+{% previewsample "https://blazorplayground.syncfusion.com/embed/BjVIijCXVzSGcbwr?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
+
 ![Blazor Timeline Component with Individual Customized Connector](./images/Blazor-connector-individual.png)
 
-## Dot styling
+## Dot Styling
 
-### Dot color
+### Dot Color
 
-You can modify the color of the dots to highlight the specific Timeline items.
+Modify the color of the dots to highlight specific Timeline items. The `.e-dot` class targets the circular indicator for each item.
 
 ```cshtml
 
@@ -173,11 +177,13 @@ You can modify the color of the dots to highlight the specific Timeline items.
 
 ```
 
+{% previewsample "https://blazorplayground.syncfusion.com/embed/BZBosDWNVzniYHpT?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
+
 ![Blazor Timeline Component with Customized Dot color](./images/Blazor-custom-dot-color.png)
 
-### Dot size
+### Dot Size
 
-You can adjust the size of the dot to make it larger or smaller by using the `--dot-size` variable.
+Adjust the dot size using the `--dot-size` CSS variable, making it larger or smaller. This variable primarily controls the dimensions of the `e-dot` element.
 
 ```cshtml
 
@@ -237,11 +243,13 @@ You can adjust the size of the dot to make it larger or smaller by using the `--
 
 ```
 
+{% previewsample "https://blazorplayground.syncfusion.com/embed/BNhoMDCZhJdwIyCf?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
+
 ![Blazor Timeline Component with Customized Dot size](./images/Blazor-custom-dot-size.png)
 
-### Dot shadow
+### Dot Shadow
 
-You can add shadow effects to the Timeline dots to make it feel visually engaging by using the `--dot-outer-space` & `--dot-border` variables.
+Add shadow effects to Timeline dots for visual engagement using the `--dot-outer-space` and `--dot-border` CSS variables. These variables define the spacing and border around the dot, contributing to the shadow effect.
 
 ```cshtml
 
@@ -292,11 +300,13 @@ You can add shadow effects to the Timeline dots to make it feel visually engagin
 
 ```
 
+{% previewsample "https://blazorplayground.syncfusion.com/embed/BDrIsDWZVzchTIyz?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
+
 ![Blazor Timeline Component with Customized Dot shadow](./images/Blazor-custom-dot-shadow.png)
 
-### Dot variant
+### Dot Variant
 
-You can achieve the desired dot variant by customizing the border, outline and background colors of the Timeline dots.
+Achieve desired dot variants by customizing the border, outline, and background colors of Timeline dots. This example demonstrates using pseudo-elements with `content` for visual differentiation, combined with styling of `--dot-size`, `--dot-radius`, and background/outline colors.
 
 ```cshtml
 
@@ -368,11 +378,13 @@ You can achieve the desired dot variant by customizing the border, outline and b
 
 ```
 
+{% previewsample "https://blazorplayground.syncfusion.com/embed/rDBIMjWjrJQutWVB?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
+
 ![Blazor Timeline Component with Customized Dot variant](./images/Blazor-custom-dot-variant.png)
 
-### Dot outline
+### Dot Outline
 
-By adding the `e-outline` class to the Timeline [`CssClass`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Layouts.SfTimeline.html#Syncfusion_Blazor_Layouts_SfTimeline_CssClass) property it enables the dots to have an outline state.
+Adding the `e-outline` class to the Timeline's [`CssClass`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Layouts.SfTimeline.html#Syncfusion_Blazor_Layouts_SfTimeline_CssClass) property enables dots to have a distinct outline style, visually emphasizing each item.
 
 ```cshtml
 
@@ -416,4 +428,6 @@ By adding the `e-outline` class to the Timeline [`CssClass`](https://help.syncfu
 
 ```
 
+{% previewsample "https://blazorplayground.syncfusion.com/embed/VjryCZitBflzyNaY?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
+
 ![Blazor Timeline Component with Customized Dot outline](./images/Blazor-custom-dot-outline.png)

blazor/timeline/events.md

@@ -9,11 +9,11 @@ documentation: ug
 
 # Events in Blazor Timeline component
 
-This section describes the Timeline events that will be triggered when an appropriate actions are performed. The following events are available in the TImeline component.
+This section describes the Blazor Timeline events, which are triggered when appropriate actions are performed. The following events are available in the Timeline component.
 
 ## Created
 
-The Timeline component triggers the [Created](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Layouts.SfTimeline.html#Syncfusion_Blazor_Layouts_SfTimeline_Created) event when the component rendering is completed.
+The Timeline component triggers the [Created](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Layouts.SfTimeline.html#Syncfusion_Blazor_Layouts_SfTimeline_Created) event when its rendering is completed.
 
 ```cshtml
 
@@ -54,7 +54,7 @@ The Timeline component triggers the [Created](https://help.syncfusion.com/cr/bla
 
 ## ItemRendered
 
-The Timeline component triggers the [ItemRendered](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Layouts.SfTimeline.html#Syncfusion_Blazor_Layouts_SfTimeline_ItemRendered) event after rendering each item.
+The Timeline component triggers the [ItemRendered](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Layouts.SfTimeline.html#Syncfusion_Blazor_Layouts_SfTimeline_ItemRendered) event after each item is rendered.
 
 ```cshtml