Shape
Overflow child with hidden child.
version
4.1.2
install
yarn add @welcome-ui/shape
usage
import { Shape } from '@welcome-ui/shape'
Default #
Add w
and h
to set size of shape.
<Shape w="150px" h="150px"><img src="https://images.unsplash.com/photo-1517849845537-4d257902454a?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=500&q=80" /></Shape>
Border radius #
Add borderRadius
from theme or what you want.
<Shape w="150px" h="150px" borderRadius="lg"><img src="https://images.unsplash.com/photo-1517849845537-4d257902454a?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=500&q=80" /></Shape>
Shape #
Set shape
prop to square
…
<Shape w="150px" h="150px" shape="square"><img src="https://images.unsplash.com/photo-1517849845537-4d257902454a?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=500&q=80" /></Shape>
… or set it to circle
.
<Shape w="150px" h="150px" shape="circle"><img src="https://images.unsplash.com/photo-1517849845537-4d257902454a?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=500&q=80" /></Shape>
also, using shape
with unequal sizes will match the biggest value between width / height.
<Shape w="1px" h="50px" shape="circle"><img src="https://images.unsplash.com/photo-1517849845537-4d257902454a?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=500&q=80" /></Shape>
Properties #
Name | Type(s) | Default | Required |
---|---|---|---|
shape | "circle" "square" |