Skip to content
Merged
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
1 change: 0 additions & 1 deletion components/pager/overview.md
Original file line number Diff line number Diff line change
Expand Up @@ -80,7 +80,6 @@ The Blazor Pager provides various parameters that allow you to configure the com

| Parameter | Type and Default Value | Description |
| ----------- | ----------- | ----------- |
|`Adaptive` | `bool` <br /> (`true`) | Defines whether pager elements change based on the screen size. When enabled, the Pager will hide its `Pager Info` and `PageSize Dropdownlist` if they cannot fit in the available space. In the smallest resolution, the page buttons will be rendered as a select element. This parameter will be deprecated in the next major version in favor of the new `Responsive` parameter. |
| `AdaptiveMode` | `AdaptiveMode` enum <br /> (`None`) | Defines the adaptive mode of the Pager. When set to `Auto`, and the window width is below [`768px` or `RootComponentAdaptiveSettings.Medium`](slug:adaptive-rendering#rendering-specifics), components with popups will render them as an `ActionSheet`. In this case, the page sizes dropdown only. |
| `ButtonCount` | `int` | The maximum number of page buttons that will be visible. To take effect, `ButtonCount` must be smaller than the page count (`ButtonCount < Total / PageSize`). |
| `Class` | `string` | Renders a custom CSS class to the `<div class="k-pager-wrap">` element. |
Expand Down
36 changes: 17 additions & 19 deletions components/toolbar/overview.md
Original file line number Diff line number Diff line change
Expand Up @@ -82,9 +82,8 @@ The Blazor ToolBar provides parameters to configure the component:

| Parameter | Type | Description |
| ----------- | ----------- | ----------- |
| `Adaptive` <br /> (deprecated) | `bool` <br /> (`true`) | Toggles the overflow popup of the ToolBar. The component displays an additional anchor on its side, where it places all items which do not fit and overflow. [Template items](slug:toolbar-templated-item#notes) don't participate in this mechanism and they are always rendered in the ToolBar itself. This parameter is deprecated in favor of `OverflowMode`. |
| `Class` | `string` | The CSS class to be rendered on the main wrapping element of the ToolBar component, which is `<div class="k-toolbar">`. Use for [styling customizations](slug:themes-override). |
| `OverflowMode` | `ToolBarOverflowMode` <br /> (`Menu`) | The adaptive mode of the Toolbar. |
| `OverflowMode` | `ToolBarOverflowMode` <br /> (`Menu`) | Toggles the overflow popup of the ToolBar. The component displays an additional anchor on its side, where it places all items which do not fit and overflow.|
| `ScrollButtonsPosition` | `ToolBarScrollButtonsPosition` enum <br /> (`Split`) | Specifies the position of the buttons when the ToolBar scroll adaptive mode is enabled. |
| `ScrollButtonsVisibility` | `ToolBarScrollButtonsVisibility` enum <br /> (`Visible`)| Specifies the visibility of the buttons when the ToolBar scroll adaptive mode is enabled. |

Expand Down Expand Up @@ -112,8 +111,8 @@ The Blazor Toolbar has an option for adaptiveness. This option allows you to hid
<br />
<br />

<div class="toolbar-wrapper">
<TelerikToolBar Adaptive="@ToolBarAdaptive">
<div class="toolbar-wrapper">
<TelerikToolBar OverflowMode="@ToolBarOverflowMode.Menu">
<ToolBarButton Icon="@SvgIcon.Undo">Undo</ToolBarButton>
<ToolBarButton Icon="@SvgIcon.Redo">Redo</ToolBarButton>
<ToolBarButton Icon="@SvgIcon.Image" Overflow="ToolBarItemOverflow.Always">Image</ToolBarButton>
Expand All @@ -123,29 +122,28 @@ The Blazor Toolbar has an option for adaptiveness. This option allows you to hid
<ToolBarButton Icon="@SvgIcon.Copy" Overflow="ToolBarItemOverflow.Never">Copy</ToolBarButton>
<ToolBarButton Icon="@SvgIcon.Clipboard" Overflow="ToolBarItemOverflow.Never">Paste</ToolBarButton>
<ToolBarSeparator></ToolBarSeparator>
<ToolBarButtonGroup SelectionMode="@ButtonGroupSelectionMode.Single">
<ToolBarToggleButton Icon="@SvgIcon.AlignLeft" OverflowText="Left"></ToolBarToggleButton>
<ToolBarToggleButton Icon="@SvgIcon.AlignCenter" OverflowText="Center"></ToolBarToggleButton>
<ToolBarToggleButton Icon="@SvgIcon.AlignRight" OverflowText="Right"></ToolBarToggleButton>
</ToolBarButtonGroup>
<ToolBarButtonGroup SelectionMode="@ButtonGroupSelectionMode.Single">
<ToolBarToggleButton Icon="@SvgIcon.AlignLeft" OverflowText="Left"></ToolBarToggleButton>
<ToolBarToggleButton Icon="@SvgIcon.AlignCenter" OverflowText="Center"></ToolBarToggleButton>
<ToolBarToggleButton Icon="@SvgIcon.AlignRight" OverflowText="Right"></ToolBarToggleButton>
</ToolBarButtonGroup>
</TelerikToolBar>
</div>

<style>
.toolbar-wrapper {
width: @(Width.ToString() + "%");
}
</style>

@code {
void ChangeWidth()
private double Width { get; set; } = 100;

private void ChangeWidth()
{
Width = 40;
}

public double Width { get; set; } = 100;
public bool ToolBarAdaptive { get; set; } = true;
}

<style>
.toolbar-wrapper{
width: @(Width.ToString() + "%");
}
</style>
````

## Next Steps
Expand Down