From fe498a3abcabc12242138e420cc1660bc062062f Mon Sep 17 00:00:00 2001 From: Apostolos Giatsidis Date: Thu, 7 Apr 2022 11:07:22 +0300 Subject: [PATCH 01/11] docs(window): Overview Revamp and new features --- components/window/events.md | 45 +++++++++++++++++++++++++++++++++- components/window/overview.md | 46 ++++++++++++++++++++++++----------- components/window/size.md | 33 +++++++++++++++++++++++++ 3 files changed, 109 insertions(+), 15 deletions(-) diff --git a/components/window/events.md b/components/window/events.md index 4ec8a56d19..aa641f9a10 100644 --- a/components/window/events.md +++ b/components/window/events.md @@ -15,9 +15,9 @@ This article explains the events available in the Telerik Window for Blazor: * [VisibleChanged](#visiblechanged) * [StateChanged](#statechanged) +* [WidthChanged and HeightChanged](#widthchanged-and-heightchanged) * [Action Click](#action-click) * [LeftChanged and TopChanged](#leftchanged-and-topchanged) - @[template](/_contentTemplates/common/general-info.md#event-callback-can-be-async) @@ -158,6 +158,49 @@ You can use the `StateChanged` event to get notifications when the user tries to } ```` +## WidthChanged and HeightChanged + +You can use the `WidthChanged` and `HeightChanged` events to get notifications when the user tries to resize the window. The events requires the `Resizable` parameter of the Window to be `true`. + +>caption React to the user actions to resizing the window + +````CSHTML + + + Lorem ipsum + + + + + + + + Resize Me! + + + +
+ +@EventLog + +@code { + public string EventLog { get; set; } + + public void WidthChangedHandler() + { + EventLog = "WidthChanged event fired at: " + DateTime.Now.ToString(); + } + + public void HeightChangedHandler() + { + EventLog = "HeightChanged event fired at: " + DateTime.Now.ToString(); + } +} +```` + ## Action Click Actions expose the `OnClick` event. You can use it to implement custom buttons that invoke application logic from the Window's titlebar. See the [Window Actions]({%slug components/window/actions%}) article for examples. diff --git a/components/window/overview.md b/components/window/overview.md index f222b72acb..e91ac641f8 100644 --- a/components/window/overview.md +++ b/components/window/overview.md @@ -10,7 +10,9 @@ position: 0 # Blazor Window Overview -This article provides basic information about the Blazor Window component. +This article provides basic information about the Blazor Window component and its core features. + +The Window component displays a popup window which shows users custom content. The component provides both custom and predefined actions, custom style, position and work as a modal window. #### In this article: @@ -19,20 +21,20 @@ This article provides basic information about the + The Title @@ -53,11 +55,27 @@ To create a Telerik Window: } ```` ->caption The result from the code snippet above +## Window Responsiveness + +The Window component can be fully responsive when the browser window size changes. Here is an [example that shows how to use the `Width` and `Height` parameters of the Window or through a separate CSS file.]({%slug window-kb-responsive%}) + +## Window Parameters + + -![](images/window-overview.png) +| Parameter | Type and Default Value | Description | +| --- | --- | --- | +| `Class` | `string` | Renders a custom CSS class to the `
` element. Use it to [override theme styles]({%slug themes-override%}). | +| `PersistContent` | `bool`
(`"false"`) | Defines whether Window content should be persisted when the window is minimized. | +| `Resizable` | `bool`
(`"true"`) | Defines whether the Window should be resizable by the user. | +| `Visible` | `bool`
(`"false"`) | Defines if the Window is rendered on the page. | ->caption Component namespace and reference +## Window Namespace and Reference ````CSHTML @using Telerik.Blazor.Components @@ -88,7 +106,7 @@ The `Visible` property lets you control whether the window component is shown (a - + The Title diff --git a/components/window/size.md b/components/window/size.md index 03048416a5..e6009aac00 100644 --- a/components/window/size.md +++ b/components/window/size.md @@ -14,6 +14,7 @@ The Window offers different ways for you to control its size: * [Set Width and Height](#set-width-and-height) * [Maximize and Minimize](#maximize-and-minimize) +* [Resizable Window](#resizable-window) ## Set Width and Height @@ -81,6 +82,38 @@ The developer can invoke those actions through binding the `State` parameter. It } ```` +## Resizable Window + +By default the Window is resizable. It is possible to resize thw window's width and height. You can disable resize by setting its `Resizable` parameter to `false`. + +>caption Make the Window Resizable + +````CSHTML +@* Toggle the resizable parameter through a button *@ + +Toggle Resizable + + + + Lorem ipsum + + + + + + + + This is my window popup content. + + + +@code { + public bool WindowResizable { get; set; } = true; + public bool WindowVisible { get; set; } = true; +} +```` + >tip With a maximized window you may want to ensure all other content stays "behind" it. To do that, see the [Block all content with a Window]({%slug window-kb-block-all-content%}) article on ensuring that the CSS rules in the project can enable that. ## See Also From bf69bd1688bd00cffa191c417f8c8a2f27605df5 Mon Sep 17 00:00:00 2001 From: Dimo Dimov Date: Fri, 8 Apr 2022 17:59:15 +0300 Subject: [PATCH 02/11] Window overview polish --- components/window/overview.md | 65 +++++++++++++---------------------- 1 file changed, 23 insertions(+), 42 deletions(-) diff --git a/components/window/overview.md b/components/window/overview.md index e91ac641f8..9c00b52519 100644 --- a/components/window/overview.md +++ b/components/window/overview.md @@ -16,7 +16,9 @@ The Window component displays a popup window which shows users custom content. T #### In this article: -* [Create a Window](#create-a-window) +* [How to Create a Window](#create-a-window) +* [Responsiveness](#responsiveness) +* [Parameters](#window-parameters) * [Show and Close](#show-and-close) * [Styling](#styling) * [Important Notes](#important-notes) @@ -24,27 +26,23 @@ The Window component displays a popup window which shows users custom content. T ## Creating Blazor Window 1. Use the `TelerikWindow` tag. -1. Set the `Visible` parameter to a `bool` property. (in the example below we will use a button to toggle it). -1. Add content to its `WindowContent` child tag. -1. (optional) Add a title text in its `WindowTitle` tag. -1. (optional) Add the predefined [actions]({%slug components/window/actions%}) to its titlebar. -1. (optional) Set its `PersistContent` parameter to `true` and persist the content on minimize. +1. Set the `Visible` parameter to a `bool` property. +1. Add content to the `WindowContent` child tag. +1. (optional) Add some title inside a `WindowTitle` tag. HTML markup and child components are supported too. +1. (optional) Add the predefined [actions]({%slug components/window/actions%}) inside a `` tag. ->caption Basic example of showing content in a Window popup and allowing built-in actions +>caption Basic Blazor Window ````CSHTML - + - The Title + Window Title - This is my window popup content. + Window Content ... - - - + @@ -55,10 +53,11 @@ The Window component displays a popup window which shows users custom content. T } ```` -## Window Responsiveness +## Responsiveness The Window component can be fully responsive when the browser window size changes. Here is an [example that shows how to use the `Width` and `Height` parameters of the Window or through a separate CSS file.]({%slug window-kb-responsive%}) + ## Window Parameters -```` - ->caption The result from the code snippet above - -![](images/window-custom-styling.png) - - ## Important Notes -The Telerik Window component renders as a child of the `TelerikRootComponent` at the root of the Blazor app. This is required so it can show over the other page content, and have correct position. +The Telerik Window component renders as a child of the `TelerikRootComponent` at the root of the Blazor app. This is required, so it can show over the other page content, and have correct position. In Blazor, however, the render tree structure may be important. In some cases, the special Window placement may put you in one of the following situations: diff --git a/components/window/position.md b/components/window/position.md index a2929d4e3b..f64210b80e 100644 --- a/components/window/position.md +++ b/components/window/position.md @@ -12,7 +12,7 @@ position: 2 The Window offers two ways for you to control its position: -* the `Top` and `Left` properties (read more in the [Dimensions]({%slug common-features/dimensions%}) article) +* the `Top` and `Left` properties (read more about the possible values in the [Dimensions]({%slug common-features/dimensions%}) article) * the `Centered` boolean property >caption Set Top and Left offset to the Window @@ -30,7 +30,7 @@ The Window offers two ways for you to control its position: The `Centered` property adds a CSS class that sets the window position to `top: 50%; left: 50%; transform: translate(-50%, -50%);`. This keep is it centered if the viewport size changes. -If the `Top` and/or `Left` properties are set, they will take precedence, because they render as rules in an inline `style` attribute. +If the `Top` or `Left` properties are set, they will take precedence, because they render as rules in an inline `style` attribute. >tip The `Centered` parameter is `true` by default. diff --git a/components/window/size.md b/components/window/size.md index 7388353e69..2e65fea433 100644 --- a/components/window/size.md +++ b/components/window/size.md @@ -10,44 +10,74 @@ position: 1 # Window Size -The Window offers different ways for you to control its size: +The Window offers different features to control its size: -* [Set Width and Height](#set-width-and-height) +* [Width and Height](#width-and-height), together with min/max parameters * [Maximize and Minimize](#maximize-and-minimize) -* [Resizing](#resizing) +* [User resizing](#resizing) -## Set Width and Height +## Width and Height -If you know the size you need, just set it to the `Width` and/or `Height` parameters. They can take valid CSS values (see the [Dimensions]({%slug common-features/dimensions%}) article). +If you know the size you need, just set the `Width` or `Height` parameters. They can take valid CSS values (see the [Dimensions]({%slug common-features/dimensions%}) article). ->note If you do not set dimensions, no `width` and `height` CSS rules will be set, and the browser will render the Window element with dimensions according to its contents, like any other `
` element. This may adversely affect [positioning](position). -> -> When you set dimensions, content larger than those dimensions will produce scrollbars in the window. +The Window also provides parameters that control its dimensions in a more flexible way: ->caption Set Width and Height to a Window +* `MinHeight` +* `MaxHeight` +* `MinWidth` +* `MaxWidth` + +Min/max dimensions take precedence over [user resizing](#resizing) and `Width` / `Height` settings. + +If no dimensions are set, the Window will expand, according to its contents, like any other `
` element. This may affect the [Window's positioning]({%slug components/window/position%}). + +If you set dimensions and the Window content does not fit, scrollbars will show. + +>caption Configure Window Width and Height, and min/max dimensions ````CSHTML - - - The Title - - - I am 600px wide and 400px tall because my developer told me so. - + + + Window Title + + +

The default width is 600px. The user can resize from 400px to 800px.

+

The default height is 300px. The user can resize from 200px to 400px.

+ + +@code { + bool WindowIsVisible { get; set; } = true; +} ```` ## Maximize and Minimize The user can maximize and minimize the Window through [action buttons in its titlebar]({%slug components/window/actions%}). -The developer can invoke those actions through binding the `State` parameter. It takes a member of the `Telerik.Blazor.WindowState` enum: -* `Default` - the size and position as defined by the `Top`, `Left`, `Centered`, `Width`, `Height`, `Size` parameters. -* `Minimized` - the window is just a narrow titlebar and does not render its content. -* `Maximized` - the window takes up the entire viewport. +You can invoke those actions by setting the `State` parameter. It takes a member of the `Telerik.Blazor.WindowState` enum: ->caption Maximize, Minimze and Restore the Window programmatically + + +| `WindowState` Value | Description | +| --- | --- | +| `Default` | The size and position will depend on the `Top`, `Left`, `Centered`, `Width`, `Height`, `Size` parameters. | +| `Minimized` | The Window will show its titlebar only. The component will dispose its content and remove it from the page DOM. If you prefer to just hide the Window content with CSS, [set `PersistContent` to `true`]({%slug window-overview%}#window-parameters). | +| `Maximized` | The Window will take up the entire viewport. | + +>caption Maximize, Minimize and Restore the Window programmatically ````CSHTML @* The user actions also change the state when two-way binding is used *@ @@ -87,7 +117,9 @@ The developer can invoke those actions through binding the `State` parameter. It ## Resizing -By default, the Window is resizable. To disable resizing, set the `Resizable` parameter to `false`. +By default, the Window is resizable. Window resizing can be controlled with [min/max Window dimensions](#width-and-height). + +To disable resizing, set the `Resizable` parameter to `false`. >caption Window Resizing diff --git a/getting-started/vs-code-integration/snippets.md b/getting-started/vs-code-integration/snippets.md index c3cbe708b4..eeccd10a62 100644 --- a/getting-started/vs-code-integration/snippets.md +++ b/getting-started/vs-code-integration/snippets.md @@ -102,5 +102,5 @@ To use the **Telerik UI for Blazor Code Snippets**, install the Telerik UI for B | tb-treelistcolumn-locked | [TreeList with Frozen Column]({%slug treelist-columns-frozen%}) | | tb-treeview | [TreeView]({%slug treeview-overview%}) | | tb-upload | [Upload]({%slug upload-overview%}) | -| tb-window | [Window]({%slug components/window/overview%}) | +| tb-window | [Window]({%slug window-overview%}) | | tb-wizard | [Wizard]({%slug wizard-overview%}) | diff --git a/knowledge-base/confirm-button-click-message-box.md b/knowledge-base/confirm-button-click-message-box.md index 72b4bb64c0..70d70bfc98 100644 --- a/knowledge-base/confirm-button-click-message-box.md +++ b/knowledge-base/confirm-button-click-message-box.md @@ -19,7 +19,7 @@ Sometimes user actions can be sensitive or result in data deletion. For such cas UI for Blazor includes [Alert, Confirm and Prompt popup dialogs]({%slug dialog-predefined%}), which can be used to interact with the user. -Another option is to use the [Window component]({%slug components/window/overview%}), if the predefined Dialogs do not provide enough flexibility for a specific scenario. Here are two examples: +Another option is to use the [Window component]({%slug window-overview%}), if the predefined Dialogs do not provide enough flexibility for a specific scenario. Here are two examples: * [https://github.com/telerik/blazor-ui/tree/master/common/confirm-button](https://github.com/telerik/blazor-ui/tree/master/common/confirm-button) * [https://github.com/telerik/blazor-ui/tree/master/common/message-box](https://github.com/telerik/blazor-ui/tree/master/common/message-box) diff --git a/knowledge-base/grid-edit-on-row-double-click.md b/knowledge-base/grid-edit-on-row-double-click.md index 192bbf3701..1812752900 100644 --- a/knowledge-base/grid-edit-on-row-double-click.md +++ b/knowledge-base/grid-edit-on-row-double-click.md @@ -27,7 +27,7 @@ I would like to edit a row in the Grid when the user clicks or double-clicks on ## Solution -The Grid exposes two events that allows you to respond to the user clicking on its rows - [OnRowClick]({%slug grid-events%}#onrowclick) and [OnRowDoubleClick]({%slug grid-events%}#onrowdoubleclick). You can use either one of them together with the [Window]({%slug components/window/overview%}) to create a custom popup form on a click of a row. +The Grid exposes two events that allows you to respond to the user clicking on its rows - [OnRowClick]({%slug grid-events%}#onrowclick) and [OnRowDoubleClick]({%slug grid-events%}#onrowdoubleclick). You can use either one of them together with the [Window]({%slug window-overview%}) to create a custom popup form on a click of a row. >caption Use the OnRowDoubleClick event to put the Grid in Edit mode diff --git a/knowledge-base/grid-rows-text-ellipsis.md b/knowledge-base/grid-rows-text-ellipsis.md index 91d407e8a8..c93f33ca29 100644 --- a/knowledge-base/grid-rows-text-ellipsis.md +++ b/knowledge-base/grid-rows-text-ellipsis.md @@ -31,7 +31,7 @@ In order to prevent the Grid from wrapping the text in multiple lines you can us >note You can achieve the same behavior if you use the [Template]({%slug grid-templates-column%}) instead of the OnCellRender event. If you choose to go for the `Template` approach you should wrap the `(context as ).FieldName` into a HTML element and add the CSS class to the `class` attribute of that element. -You might still want to allow the user to see the whole content, so you can enable the `Resizable` parameter of the Grid. If, however, the content is too long, the user should resize a lot in order to see the cell content. To cover such scenario, you can display the full content in a separate container. One option would be to use a [Window component]({%slug components/window/overview%}) and handle some of the Grid events to display it ([`OnRowClick`]({%slug grid-events%}#onrowclick), [`OnRowDoubleClick`]({%slug grid-events%}#onrowdoubleclick)). Another approach is to show a Tooltip on hover of the cell (similar example is available in [Tooltip in Grid]({%slug tooltip-kb-in-grid%}) knowledge base article). The solution below showcases a sample implementation of the first mentioned approach - using a Window component and handling the `OnRowDoubleClick` event. +You might still want to allow the user to see the whole content, so you can enable the `Resizable` parameter of the Grid. If, however, the content is too long, the user should resize a lot in order to see the cell content. To cover such scenario, you can display the full content in a separate container. One option would be to use a [Window component]({%slug window-overview%}) and handle some of the Grid events to display it ([`OnRowClick`]({%slug grid-events%}#onrowclick), [`OnRowDoubleClick`]({%slug grid-events%}#onrowdoubleclick)). Another approach is to show a Tooltip on hover of the cell (similar example is available in [Tooltip in Grid]({%slug tooltip-kb-in-grid%}) knowledge base article). The solution below showcases a sample implementation of the first mentioned approach - using a Window component and handling the `OnRowDoubleClick` event. ````CSHTML diff --git a/knowledge-base/window-custom-css-styling.md b/knowledge-base/window-custom-css-styling.md new file mode 100644 index 0000000000..8115621e91 --- /dev/null +++ b/knowledge-base/window-custom-css-styling.md @@ -0,0 +1,69 @@ +--- +title: Custom Window CSS Styling +description: How to apply custom CSS styles to the Telerik Blazor Window component. +type: how-to +page_title: How to Apply Custom Window CSS Styling +slug: window-kb-custom-css-styling +position: +tags: telerik, blazor, window, styling +ticketid: +res_type: kb +--- + +## Environment + + + + + + + +
ProductWindow for Blazor
+ + +## Description + +How to set custom CSS styles to the Window? + +## Solution + +The Window `Class` parameter lets you define a CSS class that will be rendered on the popup element. You can cascade through it in order to change the appearane of both the content, and the built-in elements of the Window. + +Use CSS selectors with higher specifity to customize the looks of the Window. See [how to override the Telerik Blazor theme]({%slug themes-override%}) for more tips. + +>caption Use a Class to change the appearance and style of the Window + +````CSHTML + + + Window Title + + + Window content + + + + +```` From 6ee3f0144edea4acdd2babb826e0e5e45b32100e Mon Sep 17 00:00:00 2001 From: Dimo Dimov Date: Mon, 11 Apr 2022 12:18:18 +0300 Subject: [PATCH 07/11] Remove Window images --- components/window/actions.md | 10 ---------- components/window/images/built-in-actions.png | Bin 4634 -> 0 bytes components/window/images/custom-action.png | Bin 2033 -> 0 bytes components/window/images/mixed-actions.png | Bin 2604 -> 0 bytes .../window/images/window-custom-styling.png | Bin 1473 -> 0 bytes components/window/images/window-overview.png | Bin 1434 -> 0 bytes components/window/overview.md | 2 +- 7 files changed, 1 insertion(+), 11 deletions(-) delete mode 100644 components/window/images/built-in-actions.png delete mode 100644 components/window/images/custom-action.png delete mode 100644 components/window/images/mixed-actions.png delete mode 100644 components/window/images/window-custom-styling.png delete mode 100644 components/window/images/window-overview.png diff --git a/components/window/actions.md b/components/window/actions.md index 4975c9a242..a988e9bc89 100644 --- a/components/window/actions.md +++ b/components/window/actions.md @@ -59,9 +59,6 @@ Action buttons expose the following properties: } ```` ->caption The result from the code snippet above - -![](images/built-in-actions.png) ## Custom Actions @@ -94,9 +91,6 @@ Custom actions can call C# directly } ```` ->caption The result from the code snippet above - -![](images/custom-action.png) ## Using Both Action Types @@ -137,10 +131,6 @@ You can mix custom actions with built-in actions, and you do not have to define } ```` ->caption The result from the code snippet above - -![](images/mixed-actions.png) - ## See Also diff --git a/components/window/images/built-in-actions.png b/components/window/images/built-in-actions.png deleted file mode 100644 index 76c09eea93ffb300d3e39dfcb9acbdefe0420926..0000000000000000000000000000000000000000 GIT binary patch literal 0 HcmV?d00001 literal 4634 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 diff --git a/components/window/images/mixed-actions.png b/components/window/images/mixed-actions.png deleted file mode 100644 index c0ff9e51072d8be8b90d6af7297a137dbb35fa56..0000000000000000000000000000000000000000 GIT binary patch literal 0 HcmV?d00001 literal 2604 zcmaJ@dpy+J79UN_c&13g&{3K0>C{!;hK@o*Ia7o<;(GmLj3SRQVaBsOdU>3h@tC~w zNMpuhexf`^D$g16HX?EjVGto)erL|TpL_qfpL6f}V|~}>yZ2gq?Y-7#@11lRhn1C5 zk%GZsves4>b}$$mBeI!DxJYYNP6mo#<+6>vB_t9rr=6Xht*x!~_4RMxzAY~=&sDLY z+>E8AB>(^*hzroT0yc%pgQx%iPD2106o^7xKtXlt1YP&YR>K{f^Q3WXw_64`G78u*Gug}#XVmZ5jk&>9~C z`A~lyR8&V{gIpdJYKw!s;-Io%Dvbc8ISC*xIL)PyL4ZaD$rMnO#^5T{vnYTB6dD(r zZh&q#2&O@ zde7Zt7PfHE+RkBorY5Y>RuuTp#Yplh$HuByfq9jKc0jg;To7_>9Ev_mPT?@xSA^}} z7=nlZ2jqMa4TY%Ic%m6bKJWkGcNT8zvf_x>%S>N{l5b9R%b-I9KVY%=DnEw3c8jE3 z+?+@x@wcsoOoGbT!%V zjPCznz1ylkr9b#?HgM5&u1Dsd4^U%G{)WTLNxyr+X?;v7coV;Mf)SEbokc-6b%m zI_Oi7+Df(0^UMty8uXNNTCeM*d)BWCh!$cxyB}r<{O!IOV{+^4lDq zVG2@uFGLJ(qUP|MQ&HC`<%E-_cFkt;0u#gLXmosw<_|x_?^c_LCS5obLxP~cnb(eJ z;D?WhrNR;U+^vIt_7$s z_1;~_o(Ga9Bf~U{*Sa4*jIzT}S$*GB=fyM^Z!?vo9(d~ z$G%3cIM@1dY)W4#8pc+w^RW39$JfdRGeSbpe zv=gjh%p@j^vLQ(E5#GPMw>$jwC|o)y&c=ZKbh*Di+9u7O?Avs&OKh)d`-AJjT8<5) za+;-E9_)Y3_dJ|hY zn(1Ri;5uS-d@R8)rRmyQen_#*^}4VHr8eU;k2Yjv_;`Z;eTJmMRo0gn_Z@{?-k2Gk zG4n2UX`k&L45DKtHtg0emPwY8wxq9V1}XQDLF?P{0e{kjcdVM>9jY;+D#5bg23KjG zbS}|)CKj+Sr8%U8)W71t%5L;pXIfUdLUa6S%)!iS!qb7*jF4k#M6{25)cEQ|KB0px^86$q=tP+hRQ(fX= z+|;wuU+O>#Kl7(uY2OT5N-JmF3LW z4|C~ClonYb?E9de>M*B%fCEqBe`t63^u$kJZ;%b=@5*RMc18!k_8}M^?JGr?{3BG< zLT}u}Z|lf zcsFkP?SPc&2wSDuEhb>dQfN;*k4X_1bqi`uN{wN|S>S)@UOD-xw;W5?eR@W3vyxaT zV@WEnxWh~EKB1G|(NM<68O*qyaqg`qwAit5R6X>f9PM~gK}|Y5 zZl0|WHa9#0!nlQFoJexsTh3ms4Aa?Kbz|R);wG!{IJUxv@Y7#&ch{cPx;tyMXp0cC zvrm7?_?fWNdFMsIz6p*2F%WQ_{PF$SH|lzt2Aea(g^zQeepe4&J?w`r*I>h)-9Mii zdJ^Vg92K+#MFmmH0}yD~8#8&!V5K_CU=Y?(4rSh#Mb@5Zjxdef)m&6sn}eeY diff --git a/components/window/images/window-custom-styling.png b/components/window/images/window-custom-styling.png deleted file mode 100644 index d79c17947c135e113674dbb82d82876ad2579ddc..0000000000000000000000000000000000000000 GIT binary patch literal 0 HcmV?d00001 literal 1473 zcmZ`%c{r2_82_YJjf7fPJTpj2Ia^0GC`~Zdgbx995Tw*9)J?-~!yF>S83F2IK?qWSrcL@G00c20NPtF| z0Fg-rpb{4d3zr%Rr+@^&g*`n2P)h-9MmW^U7K_DD=`aNZ=^$Y`;|lEe+tXbg?eL_rg+HDUJB+_g^2Z+9y&`Md zz^D&)O~dOXyWRP^B|kJT);{AF_R=r=J~J-0?U`(`#-V_vPTMIhd9wXfe2$D0QkCrY z7m4&_jTz&(!Z%YnbJ3mmtup<8{h?UV(*ao)#3y+q7vd5go(G9YJ+=BA+G_zbkM zsI5o(z~7`&fyHLmZ;)&5RNZ^xdx=&(xFz?Zi5{$GUGT6W3q5JF5-30aQ8-K6+{=3Z zmCf5I@FWIT(s!xlGYw}ikAC`?lfd1mAm*FWUKO;^ss$R7p>@fX7V(MF+x)c9s=)fG zFhQgLhnSeYE<%D1Di1BZ+zwh^zxB|%Q^tfZtdVVOTI>jK(IHQaCcJn#dBmU}w~0Gy z!M##eJ2i?Em*o|AxAsN^7)P0===ltecH~rxdI+>USLFKM);0Z)GrceNQCju6!X9Fd zrO%iO^lk#Re@csM_OCJjF?cVMyVN{JoEWV%7iFiQwM3gW4k_E=!|hJ|+CY(B?n(uQ z99F!n@$&x(lI09Z*xL||?H#|NfW)i0LQFt&)b&xfs$4=jt2SjV?tvuE&yn!vaQXg< z@?+^YFWxBR%>%BN?ro|*8?sWXj4X?6Symsx*BI#{)mn4LhhvYh_9l~T>{<+1A7~tx zbAzPk7A_^d%GZYNon`VA4b;jfH>^}6t~3TZMO8_RpfYl=z>#3 zctg7^vwbeJ)UINXp=xA4X+-sYWIZ{+_K(Rh&yt?9Cn{=D$7qI{tsam%xg#d~ zqRW6WU}M#OyybH}6%oZ5Jc!x@QYomu0uFO|V!*l3zCBN_OqVJ@t~;VEl|=q-UjVJ} z8m@7MubsSG=TwQA$uC=xcc0c+#W7JS<2g=av$CkH={~G1*Yhs8l-8}3Fy{Uso|lZz zJW9%qf1-v}uWm~*RI}jC=o2Ch;$_OTHV)TuUUw!I^{OXf-nhz$1a#%bMn@}`GJb3;9lI_+|`o}NeTmA%3Th5i##_RI?#93j{AI=JYQlN-~E_1 z9oNlM4O?kU?N&i!1-86!Wft|kKe`C}NDqmY2`pP9qB!eP^-&fod+td0eclQUj}CvG zy1Lna@a81%gGR$3f`ym5)o6q4-66jcX1c_~{+?w?Ha)LeVpEiMmc~yw)Kq|}=vKET zrk|eVoy2|dNsE0f6a@HM&vbb}>sdh_KQF)+8c{iMX0EG>K)p$jNRoIGM<_^4@u{G)h$A$|IGj}ljj3#~4`L)fZ*;}@8p=-&)QQ)Tc9`9%Fp zfl4+yO62$dx{lVRp+)H4#Dk(vhO>~rb3zX#sI}=+3F)qh(T<*-7+e=M+tf$YKfn6Z j(~32|5!V+^HWj&TTcW?mQ*~1|{P}<@#>277-Y?-#P1)|B diff --git a/components/window/images/window-overview.png b/components/window/images/window-overview.png deleted file mode 100644 index 0cf1b801b24f05a1b4b9e65c19280e66ff04c87f..0000000000000000000000000000000000000000 GIT binary patch literal 0 HcmV?d00001 literal 1434 zcmZuxdoE6dEIs?{O90Pqk#5V2vd zLx=3V@a%FHuZrS(2BP};Y!M4;uitBT5Ei4;Al7iBt2o0kDrGQA*qZ6EE^o>7^h+&S zJY(oo=NPX7e~p@?aVv_;f8O#pzo6Asny91MJAYn@idy%9^6nF%vcxh!)n=>K$Hz2O z@8n6|GIEc1s_%0#CqHPxXIEE!`5RPQk(r7 z%*GSXKVLHHM7uC|)9lrATSMRbuBcjExtyn9o%0=1({Wi{E&oz^ES7UL6X!lw_^@mj zRTuMLu)bw}^Hhpn6*X!{vUpEw%xxt`_yvBEaCmffU&me#(%qj4XD;o#uigls9=Th6 zIIY!)F6h(Baehs)3#jAH9@}5qXaXPfa2c(hHXIGrT^0<#%hD&QCQfndg5L#P39MyV zOD4Owr~96rH@~=kq1`wmn2>cSWc%+Ng}4dVxuTolDe-j1hh1M4+!WGewK%hg%&tvL z74t#L@$nvyiRSC6C3c$K4Rnf5hIeA<-czi^P|fzZ(W9REn4NlYii&EnNy=^8Y%%jY z?)lc6?cKMUU_ePVm+trEuB7mlM$K|5=i&?=W%cah`Flz~6SNp03@~pUM^K zCX+@M?=RNDSx>s{s=VH8v9L*s}s-oDi?Y=3bHHQw?W#PE9jjqSwDdi&gs1VIv%& z7{LU7u5lyAyP_&vC-Aeq5BnLn%>D4zvj!60Y*=MjfvWeDKOd+ryckPrF-3iR86&U> zzZyX{w!>7;I2W*`C$-;v{v%TO*}$*i;DmLdMesvUt3b6n16e?}g2jMx`yf0_Ykoa+ zdHQ&L=_S|FCdaZxpLQ#V;#-QnwP+;-AS(|v?YsrMq7_G(*WgR1Jtgub&u51c~EeF&xm zDsIw2!{>wp*%D`~Y*hB!WX_9+0Yu}>;` element. Use it to [override theme styles]({%slug themes-override%}). Here is a [custom Window styling example]({%slug window-kb-custom-css-styling%}). | | `Size` | `string` | Sets a predefined Window **width**. Use the string members of the static class `ThemeConstants.Window.Size` - `Small`, `Medium`, and `Large`. They translate to widths of `300px`, `800px` and `1200px`, respectively. If set, the `Width` parameter will take precedence over `Size`. | -| `Visible` | `bool` | Defines if the Window is rendered on the page. | +| `Visible` | `bool` | Defines if the Window is rendered and visible on the page. | ## Important Notes From 674e891a6f866806d09ef7be6af60f1bace5961e Mon Sep 17 00:00:00 2001 From: Dimo Dimov <961014+dimodi@users.noreply.github.com> Date: Tue, 12 Apr 2022 17:17:12 +0300 Subject: [PATCH 08/11] Update components/window/overview.md Co-authored-by: Nadezhda Tacheva <73842592+ntacheva@users.noreply.github.com> --- components/window/overview.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/components/window/overview.md b/components/window/overview.md index db57e2ee22..c34ae7e319 100644 --- a/components/window/overview.md +++ b/components/window/overview.md @@ -24,7 +24,7 @@ The Window component displays a popup window, which shows users custom content. ## Creating Blazor Window 1. Use the `TelerikWindow` tag. -1. Bind the `Visible` parameter to a `bool` property. It support one-way and two-way binding. +1. Bind the `Visible` parameter to a `bool` property. It supports one-way and two-way binding. 1. Add content to the `WindowContent` child tag. 1. (optional) Add some title inside a `WindowTitle` tag. HTML markup and child components are supported too. 1. (optional) Add a [`Close` action]({%slug components/window/actions%}) inside a `` tag. From b946b91d4a238223edd36a9473ff825d81db82a4 Mon Sep 17 00:00:00 2001 From: Dimo Dimov <961014+dimodi@users.noreply.github.com> Date: Tue, 12 Apr 2022 17:17:26 +0300 Subject: [PATCH 09/11] Update components/window/overview.md Co-authored-by: Nadezhda Tacheva <73842592+ntacheva@users.noreply.github.com> --- components/window/overview.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/components/window/overview.md b/components/window/overview.md index c34ae7e319..e67d13aeb1 100644 --- a/components/window/overview.md +++ b/components/window/overview.md @@ -26,7 +26,7 @@ The Window component displays a popup window, which shows users custom content. 1. Use the `TelerikWindow` tag. 1. Bind the `Visible` parameter to a `bool` property. It supports one-way and two-way binding. 1. Add content to the `WindowContent` child tag. -1. (optional) Add some title inside a `WindowTitle` tag. HTML markup and child components are supported too. +1. (optional) Add some title inside a `WindowTitle` tag. HTML markup and child components are supported, too. 1. (optional) Add a [`Close` action]({%slug components/window/actions%}) inside a `` tag. >caption Basic Blazor Window From 4b08a07d892e788e589f90fa12b147f9c2e01992 Mon Sep 17 00:00:00 2001 From: Dimo Dimov <961014+dimodi@users.noreply.github.com> Date: Tue, 12 Apr 2022 17:17:41 +0300 Subject: [PATCH 10/11] Update components/window/overview.md Co-authored-by: Nadezhda Tacheva <73842592+ntacheva@users.noreply.github.com> --- components/window/overview.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/components/window/overview.md b/components/window/overview.md index e67d13aeb1..cfefe17ee8 100644 --- a/components/window/overview.md +++ b/components/window/overview.md @@ -16,7 +16,7 @@ The Window component displays a popup window, which shows users custom content. #### In this article: -* [How to create a Window](#create-a-window) +* [Creating a Window](#creating-blazor-window) * [Responsive example](#responsiveness) * [Parameters](#window-parameters) * [Important notes](#important-notes) From 66495f9d6bfc992c5e1c279369520ac84ab92cf1 Mon Sep 17 00:00:00 2001 From: Dimo Dimov Date: Tue, 12 Apr 2022 17:24:21 +0300 Subject: [PATCH 11/11] Actions polishing --- components/window/actions.md | 23 +++++++++++++++++------ components/window/overview.md | 2 +- 2 files changed, 18 insertions(+), 7 deletions(-) diff --git a/components/window/actions.md b/components/window/actions.md index a988e9bc89..462b0397bd 100644 --- a/components/window/actions.md +++ b/components/window/actions.md @@ -20,15 +20,26 @@ The Window offers action buttons in its titlebar: To define action buttons, populate the `WindowActions` tag of the Window with `WindowAction` instances. + ## Action Parameters Action buttons expose the following properties: -* `Name` - the name of the action. Can be one of the built-in actions (see above), or a custom action name. -* `Hidden` - a boolean property indicating whether the action button is rendered. Do not use for `Minimize` and `Maximize` actions - the Window manages their visibility internally, based on the component state. Check the example below for a possible alternative. -* `OnClick` - event handler to respond to custom action clicks. -* `Icon` - the CSS class name of the icon that will be rendered. Use with the [Telerik font icons]({%slug general-information/font-icons%}) directly, or set your own font icon class. -* `Title` - the `title` HTML attribute of the action button. + + +| Parameter | Type and Default Value | Description | +| --- | --- | --- | +| `Name` | `string` | The name of the action. Can be one of the built-in actions (see above), or a custom action name. | +| `Hidden` | `bool` | Sets if the action button is rendered. Do not use for `Minimize` and `Maximize` actions - the Window manages their visibility internally, based on the component state. Check the example below for a possible alternative. | +| `OnClick` | `EventCallback` | An event handler to respond to custom action clicks. | +| `Icon` | `string` | The CSS class of the icon to be rendered. Use with the [Telerik font icons]({%slug general-information/font-icons%}), or set your own font icon class. | +| `Title` | `string` | The `title` HTML attribute of the action button. | + ## Built-in Actions @@ -134,4 +145,4 @@ You can mix custom actions with built-in actions, and you do not have to define ## See Also - * [Live Demo: Window Actions](https://demos.telerik.com/blazor-ui/window/actions) +* [Live Demo: Window Actions](https://demos.telerik.com/blazor-ui/window/actions) diff --git a/components/window/overview.md b/components/window/overview.md index cfefe17ee8..dfda7e277c 100644 --- a/components/window/overview.md +++ b/components/window/overview.md @@ -16,7 +16,7 @@ The Window component displays a popup window, which shows users custom content. #### In this article: -* [Creating a Window](#creating-blazor-window) +* [How to create a Window](#creating-blazor-window) * [Responsive example](#responsiveness) * [Parameters](#window-parameters) * [Important notes](#important-notes)