UnevenRoundedRectangle
UnevenRoundedRectangle extends the rounded rectangle shape by letting each corner radius vary independently.
UnevenRoundedRectangle extends the rounded rectangle shape by letting each corner radius vary independently.
Examples
Basic Usage
Preview unavailable for this example in the static docs build.
Show code
<UnevenRoundedRectangle fill="#0a84ff" cornerRadii={{
topLeading: 24,
topTrailing: 8,
bottomLeading: 12,
bottomTrailing: 32,
}} style={{ width: '180px', height: '120px' }}></UnevenRoundedRectangle>Stroke Variant
Preview unavailable for this example in the static docs build.
Show code
<UnevenRoundedRectangle fill="#5e5ce6" stroke="#312e81" strokeWidth={3} cornerRadii={{
topLeading: 32,
topTrailing: 32,
bottomLeading: 8,
bottomTrailing: 8,
}} style={{ width: '180px', height: '120px' }}></UnevenRoundedRectangle>API
| Prop | Type | Required | Description |
|---|---|---|---|
cornerRadii | IUnevenRoundedRectangleCornerRadii | No | No description yet. |
fill | string | No | No description yet. |
stroke | string | No | No description yet. |
strokeWidth | number | No | No description yet. |
Inherits additional props from IBaseComponent.
Overview
UnevenRoundedRectangle extends the rounded rectangle shape by letting each corner radius vary independently.
Status: adapted
SwiftUI Correspondence: Adapted from SwiftUI's UnevenRoundedRectangle.
RoundedRectangle
RoundedRectangle is a rectangular shape with rounded corners. RoundedRectangle is commonly used for cards, buttons, and modern UI elements.
ShareLink
ShareLink presents a platform share action. On the web it uses the Web Share API when available and falls back to opening shareable URLs.