feat(module:drawer): add property HeaderStyle to Drawer component #2809
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
|
|
|
|
|
Thanks for contribute this @danielbotn , but please change the target branch to |
ElderJames
force-pushed
the
feat/add-headerstyle-to-drawer
branch
from
ebae152
to
5b412c6
Compare
ElderJames
reviewed
Oct 17, 2022
| @@ -63,7 +63,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` | `{}` | | |||
There was a problem hiding this comment.
You may also add the parameter for DrawerOptions class.
There was a problem hiding this comment.
@ElderJames
This was added to the DrawerOptions class. Are you referring to ### Drawer? Should the property also be added there,
for example, like this:
## API
### Drawer
| Property | Description | Type | Default Value |
| ------------- | ---------------------------------------------------------------------------------------------- | -------------- | ------------- |
| 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 |
| MaskStyle | Style for Drawer's mask element. | object | - |
| Mask | Whether to show mask or not. | boolean | true |
| Placement | The placement of the Drawer, option could be left , top,`right`,`bottom` | string | right |
| WrapClassName | The class name of the container of the Drawer dialog. | string | - |
| Width | Width of the Drawer dialog, only when placement is 'left' or 'right'. | | int |
| Height | placement is top or bottom, height of the Drawer dialog. | int | 256 |
| ZIndex | The z-index of the Drawer. | int | - |
| OffsetX | The the X coordinate offset(px), only when placement is 'left' or 'right'. | int | 0 |
| OffsetY | The the Y coordinate offset(px), only when placement is 'top' or 'bottom'. | int | 0 |
| Visible | Whether the Drawer dialog is visible or not. | boolean | - |
| Keyboard | Whether support press esc to close | boolean | true |
| OnClose | Specify a callback that will be called when a user clicks mask, close button or Cancel button. | EventCallback | - |
| OnOpen | Specify a callback that will be called after drawer rendered | Func<Task> | - |
There was a problem hiding this comment.
Yes, Drawer.razor.cs and DrawerOptions is two party.
There was a problem hiding this comment.
Currently you add this parameter to Drawer.razor.cs but not DrawerOptions 😅
Codecov ReportBase: 40.24% // Head: 40.30% // Increases project coverage by
Additional details and impacted files@@ Coverage Diff @@
## feature #2809 +/- ##
===========================================
+ Coverage 40.24% 40.30% +0.06%
===========================================
Files 543 543
Lines 25807 25809 +2
Branches 260 260
===========================================
+ Hits 10385 10402 +17
+ Misses 15382 15367 -15
Partials 40 40
Help us with your feedback. Take ten seconds to tell us how you rate us. Have a feature suggestion? Share it here. ☔ View full report at Codecov. |
a property for modifying the style of the header in the drawer component
Add HeaderStyle to DrawerOptions and update docs
ElderJames
force-pushed
the
feat/add-headerstyle-to-drawer
branch
from
b4d5fb7
to
a9f80c7
Compare
ElderJames
approved these changes
Oct 20, 2022
zxyao145
pushed a commit
to zxyao145/ant-design-blazor
that referenced
this pull request
Oct 23, 2022
…nt-design-blazor#2809) * 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>
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
a property for modifying the style of the header in the drawer component
🤔 This is a ...
🔗 Related issue link
This pull request adds a HeaderStyle property to the Drawer component
Blazor Drawer
💡 Background and solution
When changing css for the Drawer header, there is no property available to do so. This PR add that property, for changing for example, the background-color of the header in the Drawer.
The new property in the Drawer component looks like this
This is an example of what the new property does:
📝 Changelog
A property is added to the Drawer component
☑️ Self Check before Merge