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!
