Skip to content

Seo 187125 image alt blazor #4759

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 3 commits into from
Sep 5, 2024
Merged

Seo 187125 image alt blazor #4759

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
37f5760
SEO-187125 Image Alt Blazor
Yvone-Atieno Aug 12, 2024
2e8afdc
made changes
Yvone-Atieno Aug 12, 2024
fb51b10
Merge branch 'hotfix/hotfix-v26.2.4' into SEO-187125-Image-Alt-Blazor
Yvone-Atieno Sep 3, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
12 changes: 6 additions & 6 deletions blazor/appbar/design.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -30,7 +30,7 @@ The following example depicts the code to provide spacing between the home and p
</div>
```

![Blazor AppBar with Spacer.](./images/blazor-appbar-spacer.png)
![Blazor AppBar with spacer.](./images/blazor-appbar-spacer.png)
{% previewsample "https://blazorplayground.syncfusion.com/embed/htLKWVizhrJGeHZk?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}

## Separator
Expand Down Expand Up @@ -68,7 +68,7 @@ The following example depicts the code to provide a vertical line between a grou
```
{% previewsample "https://blazorplayground.syncfusion.com/embed/BZrUWhizrrSDjGWv?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}

![Blazor AppBar with Separator.](./images/blazor-appbar-separator.png)
![Blazor AppBar with separator.](./images/blazor-appbar-separator.png)

## Media Query

Expand Down Expand Up @@ -114,7 +114,7 @@ Media Query is used to adjusting the AppBar for different screen sizes. Resize t
</style>
```

![Blazor AppBar with Media Query.](./images/blazor-appbar-media-quary.png)
![Blazor AppBar with media query.](./images/blazor-appbar-media-quary.png)
{% previewsample "https://blazorplayground.syncfusion.com/embed/hDVUWBsJrBofaJVB?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
## Designing AppBar with Menu

Expand Down Expand Up @@ -173,7 +173,7 @@ Media Query is used to adjusting the AppBar for different screen sizes. Resize t
</style>
```

![Blazor AppBar with Menu.](./images/blazor-appbar-menu.png)
![Blazor AppBar with menu.](./images/blazor-appbar-menu.png)
{% previewsample "https://blazorplayground.syncfusion.com/embed/BXrgCrsfhVRDMsdT?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}

## Designing AppBar with Buttons
Expand Down Expand Up @@ -209,7 +209,7 @@ Media Query is used to adjusting the AppBar for different screen sizes. Resize t
</style>
```

![Blazor AppBar with Buttons.](./images/blazor-appbar-buttons.png)
![Blazor AppBar with buttons.](./images/blazor-appbar-buttons.png)
{% previewsample "https://blazorplayground.syncfusion.com/embed/VDVgMBMTLrdehyCb?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}

## Designing AppBar with SideBar
Expand Down Expand Up @@ -370,6 +370,6 @@ AppBar toggle button used to control the expand and collapse state of **SfSideba
}
</style>
```
![Blazor AppBar with SideBar.](./images/blazor-appbar-sidebar.png)
![Designed AppBar with sidebar in Blazor.](./images/blazor-appbar-designed-sidebar.png)

{% previewsample "https://blazorplayground.syncfusion.com/embed/hDVKirMTrrRbKrNE?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
0 ...r/appbar/images/blazor-appbar-sidebar.png → ...images/blazor-appbar-designed-sidebar.png
View file
Open in desktop
File renamed without changes
2 changes: 1 addition & 1 deletion blazor/button/how-to/customize-button-appearance.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -34,4 +34,4 @@ You can customize the appearance of the Button by using the Cascading Style Shee

{% previewsample "https://blazorplayground.syncfusion.com/embed/hZLKMBBBsmGcZMPJ?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}

![Customizing Blazor Button Appearance](./../images/blazor-button-customization.png)
![Customizing Blazor Button appearance.](./../images/blazor-button-customization.png)
2 changes: 1 addition & 1 deletion blazor/button/how-to/set-the-disabled-state.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -32,4 +32,4 @@ The following example demonstrates Button in `Disabled` state.

{% previewsample "https://blazorplayground.syncfusion.com/embed/LNBqiBVhMGkwXmsI?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}

![Disable State in Blazor Button](./../images/blazor-button-disable-state.png)
![Disable state in Blazor Button.](./../images/blazor-button-disable-state.png)
2 changes: 1 addition & 1 deletion blazor/button/style-and-appearance.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -46,4 +46,4 @@ Use the following CSS to customize the background color of button while clicking

{% previewsample "https://blazorplayground.syncfusion.com/embed/hNLKMVhVimxEUqsl?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}

![Blazor Button with Style and Appearance](./images/blazor-button-style-and-appearance.gif)
![Blazor Button with style and appearance.](./images/blazor-button-style-and-appearance.gif)
12 changes: 6 additions & 6 deletions blazor/button/types-and-styles.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -39,7 +39,7 @@ The Blazor Button has the following predefined styles that can be defined using

{% previewsample "https://blazorplayground.syncfusion.com/embed/VNVgChrhiGfocEOi?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}

![Blazor Button Component with different Styles](./images/blazor-button-with-different-style.png)
![Blazor Button Component with different styles.](./images/blazor-button-with-different-style.png)

N> Predefined Button styles provide only the visual indication. So, Button content should define the Button style for the users of assistive technologies such as screen readers.

Expand Down Expand Up @@ -81,7 +81,7 @@ A Round Button is circular in shape. Usually, it contains an icon representing i

{% previewsample "https://blazorplayground.syncfusion.com/embed/LXrUsBLBsQJYnPIv?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}

![Blazor Button with different Types](./images/blazor-button-types.png)
![Blazor Button with different types.](./images/blazor-button-types.png)

### Primary Button

Expand All @@ -95,7 +95,7 @@ The primary button is styled with background color and it is used to represent a

{% previewsample "https://blazorplayground.syncfusion.com/embed/rjhgCVrLWmyJUodV?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}

![Blazor Primary Button](./images/blazor-primary-button.png)
![Blazor Primary Button.](./images/blazor-primary-button.png)

### Toggle Button

Expand Down Expand Up @@ -142,7 +142,7 @@ A toggle Button allows you to change between the two states. The Button is activ

{% previewsample "https://blazorplayground.syncfusion.com/embed/rZBAiVVrMGexGnCy?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}

![Blazor Toggle Button](./images/blazor-toggle-button.png)
![Blazor Toggle Button.](./images/blazor-toggle-button.png)

## Icons

Expand Down Expand Up @@ -170,7 +170,7 @@ The Button can have an icon to provide the visual representation of the action.
{% previewsample "https://blazorplayground.syncfusion.com/embed/BDBUCVrVscdsTwUD?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}


![Blazor Button with Icon](./images/blazor-button-icon.png)
![Blazor Button with icon.](./images/blazor-button-icon.png)

## Button size

Expand All @@ -187,4 +187,4 @@ The two types of Button sizes are default and small. To change the size of the d
{% previewsample "https://blazorplayground.syncfusion.com/embed/rXLAWLVrWcxyVIJP?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}


![Blazor Button with different Size](./images/blazor-button-with-different-size.png)
![Blazor Button with different size.](./images/blazor-button-with-different-size.png)
6 changes: 3 additions & 3 deletions blazor/chart/chart-types/line.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -53,7 +53,7 @@ documentation: ug
```
{% previewsample "https://blazorplayground.syncfusion.com/embed/BXrKiVhdhoVJjpOZ?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}

![Blazor Line Chart](../images/chart-types-images/blazor-line-chart.png)
![Blazor Line Chart.](../images/chart-types-images/blazor-line-chart.png)

N> Refer to our [Blazor Line Chart](https://www.syncfusion.com/blazor-components/blazor-charts/chart-types/line-chart) feature tour page to know about its other groundbreaking feature representations. Explore our [Blazor Line Chart Example](https://blazor.syncfusion.com/demos/chart/line?theme=bootstrap4) to know how to represent time-dependent data, showing trends at equal intervals.

Expand Down Expand Up @@ -96,7 +96,7 @@ To render a multicolored line series, specify the [Type](https://help.syncfusion
```
{% previewsample "https://blazorplayground.syncfusion.com/embed/rZhqiBrHryhdGmHf?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}

![Blazor Multicolored Line Chart](../images/chart-types-images/blazor-multicolor-line-chart.png)
![Blazor Multicolored Line Chart.](../images/chart-types-images/blazor-multicolor-line-chart.png)

## Series customization

Expand Down Expand Up @@ -148,7 +148,7 @@ The following properties can be used to customize the [Line](https://help.syncfu
```
{% previewsample "https://blazorplayground.syncfusion.com/embed/BNrgsBVRheBaFjKV?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}

![Blazor Line Chart with Custom Series](../images/chart-types-images/blazor-line-chart-custom-series.png)
![Blazor Line Chart with custom series.](../images/chart-types-images/blazor-line-chart-custom-series.png)

N> Refer to our [Blazor Charts](https://www.syncfusion.com/blazor-components/blazor-charts) feature tour page for its groundbreaking feature representations and also explore our [Blazor Chart Example](https://blazor.syncfusion.com/demos/chart/line?theme=bootstrap5) to know various chart types and how to represent time-dependent data, showing trends at equal intervals.

Expand Down