test/ant-design-blazor
1
0
Fork 0
mirror of https://gitee.com/ant-design-blazor/ant-design-blazor.git synced 2024-11-29 18:48:50 +08:00
Code Issues Actions 6 Packages Projects Releases Wiki Activity

feat(module: drawer): add property HeaderStyle to Drawer component (#2809)

Browse Source 
* feat(module:drawer): add property HeaderStyle to Drawer component

a property for modifying the style of the header in the drawer component

* feat(docs): add property HeaderStyle to Drawer api

Add HeaderStyle to DrawerOptions and update docs

* fix missing HeaderStyle for drawer servcie

Co-authored-by: James Yeung <shunjiey@hotmail.com>
This commit is contained in:
Daniel Freyr Sigurdsson 2022-10-20 05:55:35 +00:00 committed by GitHub
parent 421b76e00d
commit 99ff161de7
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
6 changed files with 21 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
components/drawer/Drawer.razor
View File

@ -12,7 +12,7 @@
@if (_title.Value != null || Closable)
{
<div class="@TitleClassMapper.Class">
<div class="@TitleClassMapper.Class" style="@HeaderStyle">
@if (_title.Value != null)
{
<div class="ant-drawer-title">

11
components/drawer/Drawer.razor.cs
View File

@ -135,6 +135,17 @@ namespace AntDesign
[Parameter]
public string BodyStyle { get; set; }
/// <summary>
/// <para>
/// Drawer header 抽屉头
/// </para>
/// <para>
/// Header style for modal header element. Such as height, padding etc.
/// </para>
/// </summary>
[Parameter]
public string HeaderStyle { get; set; }
/// <summary>
/// <para>
/// Drawer对话框外层容器的类名

1
components/drawer/DrawerContainer.razor
View File

@ -15,6 +15,7 @@
Placement="@drawerConfig.Placement"
MaskStyle="@drawerConfig.MaskStyle"
BodyStyle="@drawerConfig.BodyStyle"
HeaderStyle="@drawerConfig.HeaderStyle"
WrapClassName="@drawerConfig.WrapClassName"
Width="@drawerConfig.Width"
Height="@drawerConfig.Height"

2
components/drawer/config/DrawerOptions.cs
View File

@ -33,6 +33,8 @@ namespace AntDesign
public string BodyStyle { get; set; }
public string HeaderStyle { get; set; }
public string WrapClassName { get; set; }
public int Width { get; set; } = 256;

4
site/AntDesign.Docs/Demos/Components/Drawer/doc/index.en-US.md
View File

@ -27,6 +27,7 @@ tasks can be achieved more efficiently within thesame context.
| ------------- | ---------------------------------------------------------------------------------------------- | -------------- | ------------- |
| Title | the title for drawer | string or slot | - |
| BodyStyle | Style of the drawer content part | object | - |
| HeaderStyle | Style of the header content part | object | - |
| Closable | Whether a close (x) button is visible on top right of the Drawer dialog or not. | boolean | true |
| ChildContent | Subcomponent | object | - |
| MaskClosable | Clicking on the mask (area outside the Drawer) to close the Drawer or not. | boolean | true |
@ -63,7 +64,8 @@ tasks can be achieved more efficiently within thesame context.
| CloseOnNavigation | Whether to close the drawer when the navigation history changes | `boolean` | `true` |
| Keyboard | Whether to support keyboard esc off | `boolean` | `true` |
| MaskStyle | Style for Drawer's mask element. | `string` | `{}` |
| BodyStyle | Body style for Drawer body element. Such as height, padding etc. | `string` | `{}` |
| BodyStyle | Body style for Drawer body element. Such as height, padding etc. | `string` | `{}` |
| HeaderStyle | Header style for Drawer header element. Such as height, padding etc. | `string` | `{}` |
| Title | The title for Drawer. | `OneOf<RenderFragment, string>` | - |
| Width | Width of the Drawer dialog. | `int` | `256` |
| Height | Height of the Drawer dialog, only when placement is `'top'` or `'bottom'`. | `int` | `256` |

4
site/AntDesign.Docs/Demos/Components/Drawer/doc/index.zh-CN.md
View File

@ -22,7 +22,8 @@ cover: https://gw.alipayobjects.com/zos/alicdn/7z8NJQhFb/Drawer.svg
| 参数 | 说明 | 类型 | 默认值 |
| ------------- | ------------------------------------------------------- | -------------- | ------- |
| Title | 标题 | string or slot | - |
| BodyStyle | 可用于设置 Drawer 内容部分的样式 | object | - |
| BodyStyle | 可用于设置 Drawer 内容部分的样式 | string | - |
| HeaderStyle | 可用于设置 Drawer 标题部分的样式 | string | - |
| Closable | 是否显示右上角的关闭按钮 | boolean | true |
| ChildContent | 抽屉元素之间的子组件 | object | - |
| MaskClosable | 点击蒙层是否允许关闭 | boolean | true |
@ -60,6 +61,7 @@ cover: https://gw.alipayobjects.com/zos/alicdn/7z8NJQhFb/Drawer.svg
| Keyboard | 是否支持键盘 esc 关闭 | `boolean` | `true` |
| MaskStyle | 遮罩样式 | `string` | `{}` |
| BodyStyle | Drawer body 样式 | `string` | `{}` |
| HeaderStyle | 可用于设置 Drawer 标题部分的样式 | `string` | - |
| Title | 标题 | `OneOf<RenderFragment, string>` | - |
| Width | 宽度 | `int` | `256` |
| Height | 高度, 只在方向为 `'top'`或`'bottom'` 时生效 | `int` | `256` |