Tabris.js Properties: cornerRadius
cornerRadius
is a property that allows us to give square widgets curved corners. This single number value applies to all four corners. It defaults to 0 : right-angled corners.
cornerRadius
clips content that goes outside of the rounded corners, so we might have to adjust the size of the container and content depending on how much curve we want.
By setting a widget’s width
and height
equal, and the cornerRadius
to at least this value, we can create a circle.
Below is an example from the Tabris playground, with cornerRadius adjusted so the Composite becomes a circle. Run the snippet on your phone using the Tabris developer App, which you can get for Android and IOS here.
1 2 3 4 5 6 7 8 |
import {Composite, contentView} from 'tabris'; contentView.append( <Composite center width={128} height={128} background='white' cornerRadius={128} elevation={8}/> ); |
Since this property is defined on the Widget base class, it can be set on any of the Widget subclasses! ( For the more complex Widgets, however, this might have unexpected results – the cornerRadius
value might be applied to a wrapper component or its effect may not be visible.)
Here is a Button
with exaggeratedly rounded corners (Button
corners are rounded by default, but we’ve made them more rounded here).
Here is a Stack
widget with rounded corners.
Feedback is welcome!
Want to join the discussion?Feel free to contribute!