From d44f8dd1c31e6d3bd2f733ac49a429b30e982d0f Mon Sep 17 00:00:00 2001 From: Svetoslav Dimitrov <61150560+svdimitr@users.noreply.github.com> Date: Tue, 14 Nov 2023 12:51:13 +0200 Subject: [PATCH 01/36] docs(appbar): overview and docs structure --- components/appbar/appearance.md | 51 ++++++++++ components/appbar/overview.md | 132 +++++++++++++++++++++++++ components/appbar/position.md | 51 ++++++++++ components/appbar/sections.md | 170 ++++++++++++++++++++++++++++++++ components/appbar/separators.md | 49 +++++++++ 5 files changed, 453 insertions(+) create mode 100644 components/appbar/appearance.md create mode 100644 components/appbar/overview.md create mode 100644 components/appbar/position.md create mode 100644 components/appbar/sections.md create mode 100644 components/appbar/separators.md diff --git a/components/appbar/appearance.md b/components/appbar/appearance.md new file mode 100644 index 0000000000..82fe1079d8 --- /dev/null +++ b/components/appbar/appearance.md @@ -0,0 +1,51 @@ +--- +title: Appearance +page_title: ToolBar Appearance +description: Appearance settings of the ToolBar for Blazor. +slug: toolbar-appearance +tags: telerik,blazor,toolbar,appearance +published: True +position: 35 +--- + +# Appearance Settings + +This article outlines the available ToolBar parameters, which control its appearance. + +## Size + +You can increase or decrease the size of the ToolBar by setting the `Size` parameter to a member of the `Telerik.Blazor.ThemeConstants.ToolBar.Size` class: + +| Class members | Manual declarations | +|---------------|--------| +| `Small` |`sm`| +| `Medium`
default value |`md`| +| `Large` |`lg`| + +>caption The built-in sizes + +````CSHTML +@{ + var fields = typeof(Telerik.Blazor.ThemeConstants.ToolBar.Size) + .GetFields(System.Reflection.BindingFlags.Public | System.Reflection.BindingFlags.Static + | System.Reflection.BindingFlags.FlattenHierarchy) + .Where(field => field.IsLiteral && !field.IsInitOnly).ToList(); + + foreach (var field in fields) + { + string size = field.GetValue(null).ToString(); + +
+ + Cut + Copy + Paste + +
+ } +} +```` + +## See Also + + * [Live Demo: ToolBar Appearance](https://demos.telerik.com/blazor-ui/toolbar/appearance) \ No newline at end of file diff --git a/components/appbar/overview.md b/components/appbar/overview.md new file mode 100644 index 0000000000..ef4c1c880d --- /dev/null +++ b/components/appbar/overview.md @@ -0,0 +1,132 @@ +--- +title: Overview +page_title: AppBar Overview +description: Overview of the AppBar component for Blazor. +slug: appbar-overview +tags: telerik,blazor,appbar,navbar +published: True +position: 0 +--- + +# Blazor AppBar Overview + +The Blazor AppBar component helps you build navigation bars for your application seemingly. This article explains the available features. + +## Creating Blazor AppBar + +1. Add the `` tag to a Razor file. +1. Use the `` child tag to add content to the AppBar component. +(optional) Use [content dividers](#content-dividers) to add visual distinction between the sections in the AppBar. +1. (optional) Set the [position](#positioning) of the AppBar. + +>caption Basic configuration of the Telerik AppBar + +````CSHTML + + + Our Logo + + + + + + Our Products + + + + + + Our Mission + + + + + + Contact Us + + + + + + + + + + + + + + +```` + +## AppBar Sections + +Use the AppBar Sections to render arbitrary HTML content to match the UI and UX needs of your application. [Read more about the Blazor AppBar sections]({%slug appbar-section%}). + +## Content Dividers + +The AppBar features separators and spacers that can visually divide the component items. [Read more about the Blazor AppBar separators and spacers.]({%slug appbar-separators%}). + +## Positioning + +You can control the position of the AppBar and how the component behaves according to the flow of the page. [Read more about the Blazor AppBar positioning.]({%slug appbar-position%}). + +## AppBar Parameters + +The Blazor AppBar provides parameters to configure the component: + +@[template](/_contentTemplates/common/parameters-table-styles.md#table-layout) + +| Parameter | Type | Description | +| ----------- | ----------- | ----------- | +| `Class` | `string` | The CSS class to be rendered on the main wrapping element of the AppBar component, which is `
`. Use for [styling customizations]({%slug themes-override%}). | +| `Height` | `string` | The height of the AppBar. | +| `Position` | `AppBarPosition`
(`None`) | The position of the AppBar on the page. [Read more about AppBar positioning.]({%slug appbar-position%}) | +| `PositionMode` | `AppBarPosition`
(`Static`) | Sets how the AppBar is positioned according to the flow of the document. [Read more about AppBar positioning.]({%slug appbar-position%}) | +| `Width` | `string` | The width of the AppBar | + +### Styling and Appearance + +The following parameters enable you to customize the appearance of the Blazor AppBar: + +| Parameter | Type | Description | +| --- | --- | --- | +| `ThemeColor` | `Telerik.Blazor.ThemeConstants.AppBar.ThemeColor` | Adjust the color of the AppBar | + +You can find more information for customizing the AppBar appearance in the [Appearance article]({%slug appbar-appearance%}). + +## AppBar Reference and Methods + +To execute AppBar methods, obtain reference to the component instance via `@ref`. + +| Method | Description | +|---------|-------------| +| `Refresh` | Use the method to programmatically re-render the AppBar. | + +
+ +````CSHTML +Refresh AppBar + + + +@code { + private TelerikAppBar AppBarRef { get; set; } + + private void RefreshAppBar() + { + AppBarRef.Refresh(); + } +} +```` + +## Next Steps + +* [Explore the AppBar Sections]({%slug appbar-sections%}) +* [Use the AppBar Content]({%slug appbar-separators%}) +* [Customize the AppBar positioning options]({%slug appbar-position%}) + +## See Also + +* [Live AppBar Demos](https://demos.telerik.com/blazor-ui/appbar/overview) +* [AppBar API Reference](/blazor-ui/api/Telerik.Blazor.Components.TelerikAppBar) diff --git a/components/appbar/position.md b/components/appbar/position.md new file mode 100644 index 0000000000..82fe1079d8 --- /dev/null +++ b/components/appbar/position.md @@ -0,0 +1,51 @@ +--- +title: Appearance +page_title: ToolBar Appearance +description: Appearance settings of the ToolBar for Blazor. +slug: toolbar-appearance +tags: telerik,blazor,toolbar,appearance +published: True +position: 35 +--- + +# Appearance Settings + +This article outlines the available ToolBar parameters, which control its appearance. + +## Size + +You can increase or decrease the size of the ToolBar by setting the `Size` parameter to a member of the `Telerik.Blazor.ThemeConstants.ToolBar.Size` class: + +| Class members | Manual declarations | +|---------------|--------| +| `Small` |`sm`| +| `Medium`
default value |`md`| +| `Large` |`lg`| + +>caption The built-in sizes + +````CSHTML +@{ + var fields = typeof(Telerik.Blazor.ThemeConstants.ToolBar.Size) + .GetFields(System.Reflection.BindingFlags.Public | System.Reflection.BindingFlags.Static + | System.Reflection.BindingFlags.FlattenHierarchy) + .Where(field => field.IsLiteral && !field.IsInitOnly).ToList(); + + foreach (var field in fields) + { + string size = field.GetValue(null).ToString(); + +
+ + Cut + Copy + Paste + +
+ } +} +```` + +## See Also + + * [Live Demo: ToolBar Appearance](https://demos.telerik.com/blazor-ui/toolbar/appearance) \ No newline at end of file diff --git a/components/appbar/sections.md b/components/appbar/sections.md new file mode 100644 index 0000000000..0ca03fe998 --- /dev/null +++ b/components/appbar/sections.md @@ -0,0 +1,170 @@ +--- +title: Built-in Tools +page_title: ToolBar - Built-in Tools +description: Built-in Tools in the Telerik ToolBar for Blazor +slug: toolbar-built-in-tools +tags: telerik,blazor,toolbar,builtin,tools,button,buttons +published: True +position: 1 +--- + +# Built-in Tools + +The Telerik ToolBar for Blazor allows you to use built-in buttons and button groups or to add a [custom tool]({%slug toolbar-templated-item%}). The available built-in tools are: + +* [ToolBarButton](#toolbarbutton) +* [ToolBarToggleButton](#toolbartogglebutton) +* [ToolbarButtonGroup](#toolbarbuttongroup) + +## ToolBarButton + +A toolbar button is a plain button that you can click and it raises an event so the application can respond to that. + +You can add multiple buttons to the Telerik Toolbar. To do that you should add the `` to the ``. + +### ToolBarButton parameters + +The nested `ToolBarButton` tag exposes parameters that allow you to customize the buttons: + +@[template](/_contentTemplates/common/parameters-table-styles.md#table-layout) + +| Parameter | Type and Default Value | Description | +| ----------- | ----------- | ----------- | +| `Class` | `string` | The CSS class that will be rendered on the main wrapping element of the ToolbarButton. You could use that class to cascade styles. | +| `Enabled` | `bool`
`true` | Specifies if the button is clickable. | +| `Icon` | `object` | Adds a font icon to the button. You can find more information on adding a font icon to a Telerik Component in [Telerik Font and Svg Icons article]({%slug general-information/font-icons%}#icon-in-telerik-component). | +| `Overflow` | `ToolBarItemOverflow` enum
(`Auto`) | Specifies whether the item will be hidden when the ToolBar is resized. | +| `OverflowText` | `string` | Defines the button text that will be shown only in the overflow popup. If not specified, it will get the default text of the item. | +| `Title` | `string` | Maps to the `title` HTML attribute for the `