Skip to content
Open
Show file tree
Hide file tree
Changes from all commits
Commits
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
3 changes: 2 additions & 1 deletion ej2-angular/appbar/style-and-appearance.md
Original file line number Diff line number Diff line change
Expand Up @@ -45,6 +45,7 @@ The CssClass property enables AppBar customization through custom CSS classes, a
{% previewsample "page.domainurl/samples/appbar/cssclass-cs1" %}

## HtmlAttributes

It can be used for additional inline attributes by specifying as inline attributes or by specifying [`htmlAttributes`](https://ej2.syncfusion.com/angular/documentation/api/appbar/#htmlattributes) directive. In the code example below, the aria-label of the AppBar is customized by specifying as attributes.

{% tabs %}
Expand All @@ -57,4 +58,4 @@ It can be used for additional inline attributes by specifying as inline attribut
{% endhighlight %}
{% endtabs %}

{% previewsample "page.domainurl/samples/appbar/htmlattributes-cs1" %}
{% previewsample "page.domainurl/samples/appbar/htmlattributes-cs1" %}
2 changes: 1 addition & 1 deletion ej2-angular/schedule/clipboard.md
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@ layout: post
title: Clipboard in Angular Schedule component | Syncfusion
description: Learn here all about Context menu in Syncfusion Angular Schedule component of Syncfusion Essential JS 2 and more.
platform: ej2-angular
control: Scheduler
control: Scheduler
documentation: ug
domainurl: ##DomainURL##
---
Expand Down
2 changes: 1 addition & 1 deletion ej2-angular/schedule/recurrence-editor.md
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@ layout: post
title: Recurrence editor in Angular Schedule component | Syncfusion
description: Learn here all about Recurrence editor in Syncfusion Angular Schedule component of Syncfusion Essential JS 2 and more.
platform: ej2-angular
control: Scheduler
control: Scheduler
documentation: ug
domainurl: ##DomainURL##
---
Expand Down
2 changes: 1 addition & 1 deletion ej2-angular/schedule/virtual-scrolling.md
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@ layout: post
title: Virtual scrolling in Angular Schedule component | Syncfusion
description: Learn here all about Virtual scrolling in Syncfusion Angular Schedule component of Syncfusion Essential JS 2 and more.
platform: ej2-angular
control: scheduler
control: Scheduler
documentation: ug
domainurl: ##DomainURL##
---
Expand Down
4 changes: 2 additions & 2 deletions ej2-angular/toolbar/how-to/set-item-wise-custom-template.md
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,7 @@ domainurl: ##DomainURL##

# Set item wise custom template in Angular Toolbar component

The Angular Toolbar component supports adding template commands using the `template` property, enabling integration of custom controls as toolbar items. The template property accepts HTML content as either a string literal or a query selector reference, providing flexibility for various implementation approaches.
The Angular Toolbar component supports adding template commands using the [`template`](https://ej2.syncfusion.com/angular/documentation/api/toolbar/item/#template) property, enabling integration of custom controls as toolbar items. The template property accepts HTML content as either a string literal or a query selector reference, providing flexibility for various implementation approaches.

Template configuration allows embedding interactive elements like checkboxes, dropdowns, input controls, or even other components within toolbar items. This capability extends the toolbar's functionality beyond standard buttons and separators, enabling rich user interface scenarios.

Expand Down Expand Up @@ -40,4 +40,4 @@ template: "#Template"
{% endhighlight %}
{% endtabs %}

{% previewsample "page.domainurl/samples/toolbar/toolbar-items-cs3" %}
{% previewsample "page.domainurl/samples/toolbar/toolbar-items-cs3" %}
16 changes: 8 additions & 8 deletions ej2-angular/toolbar/responsive-mode.md
Original file line number Diff line number Diff line change
Expand Up @@ -19,21 +19,21 @@ The Angular Toolbar component automatically handles content overflow with respon

The default overflow mode of the Toolbar is `Scrollable`. This responsive mode displays all commands in a single horizontal line with scrolling navigation when content overflows the available container width.

* Navigation arrows appear at the start and end of the Toolbar to access hidden commands
* Hidden commands become accessible through touch swipe gestures on mobile devices
* When the left navigation icon is disabled, hidden commands are accessible by moving right
* Clicking or holding navigation arrows continuously reveals hidden commands
* On devices without navigation icons, touch swipe gestures provide access to hidden toolbar commands
* Navigation arrows appear at the start and end of the Toolbar to access hidden commands.
* You can also see the hidden commands using touch swipe action.
* When the left navigation icon is disabled, hidden commands are accessible by moving right.
* Clicking or holding navigation arrows continuously reveals hidden commands.
* On devices without navigation icons, touch swipe gestures provide access to hidden toolbar commands.

![Scrollable](./images/scrolling.gif)

* When the Toolbar reaches the first or last command, the corresponding navigation icon becomes disabled, allowing movement in the opposite direction only
* When the Toolbar reaches the first or last command, the corresponding navigation icon becomes disabled, allowing movement in the opposite direction only.

![Touch scroll](./images/scrolling_touch.gif)

![Swipe scroll](./images/scrolling_swipe.gif)

* Continuous scrolling is possible by holding the navigation icon
* Continuous scrolling is possible by holding the navigation icon.

![Long press scroll](./images/scrolling_long_press.gif)

Expand Down Expand Up @@ -132,4 +132,4 @@ By default, the Toolbar renders with a minimum height to accommodate items prope
{% endhighlight %}
{% endtabs %}

{% previewsample "page.domainurl/samples/toolbar/minimum-height-cs1" %}
{% previewsample "page.domainurl/samples/toolbar/minimum-height-cs1" %}