Update doc for Border.BoxShadow #817
Open
Conversation
This file contains hidden or 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
There was a problem hiding this comment.
Pull request overview
This PR updates the Border control documentation to reflect changes introduced in AvaloniaUI/Avalonia#20321, specifically expanding the description of the BoxShadow color parameter to include support for color functions.
Key Changes:
- Enhanced color parameter description to include support for color functions (rgb, hsl) beyond color names and hexadecimal values
- Fixed a typo in the Chinese documentation where an extra opening angle bracket was present
Reviewed changes
Copilot reviewed 2 out of 2 changed files in this pull request and generated 1 comment.
| File | Description |
|---|---|
| docs/reference/controls/border.md | Updated the color value description in the BoxShadow table to document support for color functions like rgb() and hsl() |
| i18n/zh-Hans/docusaurus-plugin-content-docs/current/reference/controls/border.md | Updated the Chinese translation to match the English documentation and fixed a typo with an extra < character in the code example |
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
| This table describes the box shadow values, in the order in which they appear: | ||
|
|
||
| <table><thead><tr><th width="203">Value</th><th>Description</th></tr></thead><tbody><tr><td><code>inset</code></td><td>If not specified (default), the shadow is assumed to be a drop shadow (as if the box were raised above the content). The presence of the inset keyword changes the shadow to inside the frame (as if the content was depressed inside the box). Inset shadows are drawn inside the border (even transparent ones), and above the background but below any content</td></tr><tr><td><code>offset-x</code> </td><td>Specifies the horizontal distance. Negative values place the shadow to the left of the element.</td></tr><tr><td><code>offset-y</code></td><td>Specifies the vertical distance. Negative values place the shadow above the element.</td></tr><tr><td><code>blur-radius</code></td><td>The larger this value, the bigger the blur effect, so the shadow becomes bigger and lighter. Negative values are not allowed. If not specified, the default (zero) is used and the shadow edge is sharp.</td></tr><tr><td><code>spread-radius</code></td><td>Positive values will cause the shadow to expand and grow bigger, negative values will cause the shadow to shrink. If not specified, it will be 0 (the shadow will be the same size as the element).</td></tr><tr><td><code>color</code></td><td>The color of the shadow using a color name (such as red), or a # prefix and a hexadecimal color value. For example: #dadada</td></tr></tbody></table> | ||
| <table><thead><tr><th width="203">Value</th><th>Description</th></tr></thead><tbody><tr><td><code>inset</code></td><td>If not specified (default), the shadow is assumed to be a drop shadow (as if the box were raised above the content). The presence of the inset keyword changes the shadow to inside the frame (as if the content was depressed inside the box). Inset shadows are drawn inside the border (even transparent ones), and above the background but below any content</td></tr><tr><td><code>offset-x</code> </td><td>Specifies the horizontal distance. Negative values place the shadow to the left of the element.</td></tr><tr><td><code>offset-y</code></td><td>Specifies the vertical distance. Negative values place the shadow above the element.</td></tr><tr><td><code>blur-radius</code></td><td>The larger this value, the bigger the blur effect, so the shadow becomes bigger and lighter. Negative values are not allowed. If not specified, the default (zero) is used and the shadow edge is sharp.</td></tr><tr><td><code>spread-radius</code></td><td>Positive values will cause the shadow to expand and grow bigger, negative values will cause the shadow to shrink. If not specified, it will be 0 (the shadow will be the same size as the element).</td></tr><tr><td><code>color</code></td><td>The color of the shadow using a color name (such as red), a # prefix with a hexadecimal color value (e.g., #dadada), or a color function (e.g., rgb(13, 110, 253), hsl(215, 98%, 52%)).</td></tr></tbody></table> |
There was a problem hiding this comment.
The word "red" should be capitalized to "Red" for consistency. In the description, color names are typically shown in PascalCase in Avalonia documentation.
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
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.
Related to AvaloniaUI/Avalonia#20321.
This documentation PR contains supplementary descriptions for the changes introduced in AvaloniaUI/Avalonia#20321. Please consider merging this PR after the Avalonia version containing this feature is released.