Shape

Overflow child with hidden child.

version

4.2.0

install

yarn add @welcome-ui/shape

usage

import { Shape } from '@welcome-ui/shape'

View package View source

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"

Packages #

Dependencies #

@welcome-ui/system [^4.2.0]

@welcome-ui/utils [^4.2.0]

Peer dependencies #

@xstyled/styled-components [^3.6.0]

react [^16.10.2 || ^17.0.1 || ^18.0.0]

styled-components [^5.3.3]

Loader

Stack