@hixme-ui/container

2.1.0 • Public • Published

Container

npm i --save @hixme-ui/container

View it live

Usage

import Container from '@hixme-ui/container'

<Container padding='30px' shadow>
  <p>Content goes here</p>
</Container>

<Container flex textCenter opacity='.6'>
  <p>Flex content goes here</p>
</Container>

Default Props

Name Type Default
padding string 20px
background string none

Text Align

Name Type Description
textLeft bool text-align: left
textCenter bool text-align: center
textRight bool text-align: right

Background Color

Name Type Description
background string Apply CSS background properties
default bool Default will apply a white background
primary bool
success bool
warning bool
error bool
muted bool
white bool
black bool
red bool
blue bool
purple bool
yellow bool
green bool
light bool
lighter bool
lightest bool

Borders

Name Type Description
border string Apply CSS border properties
borderColor string Apply CSS border-color properties
borderTop string Apply CSS border-top properties
borderBottom string Apply CSS border-bottom properties
borderLeft string Apply CSS border-left properties
borderRight string Apply CSS border-right properties
dashed bool Apply 2px, grey dashed border
rounded bool Apply 6px, border radius to container

Margin

Name Type Description
margin string Apply CSS margin properties
marginLeft string Apply CSS margin-left properties
marginRight string Apply CSS margin-right properties
marginTop string Apply CSS margin-top properties
marginBottom string Apply CSS margin-bottom properties
marginSides string Apply CSS margin-left and right properties

Padding

Name Type Description
padding string Apply CSS padding properties
paddingLeft string Apply CSS padding-left properties
paddingRight string Apply CSS padding-right properties
paddingTop string Apply CSS padding-top properties
paddingBottom string Apply CSS padding-bottom properties
paddingSides string Apply CSS padding-left and right properties
noPadding bool Remove default padding from container

Width

Name Type Description
width string Apply CSS width properties
minWidth string Apply CSS min-width properties
maxWidth string Apply CSS max-width properties

Height

Name Type Description
height string Apply CSS height properties
minHeight string Apply CSS min-height properties
maxHeight string Apply CSS max-height properties

Flex Properties

Name Type Description
flex bool Apply display: flex
inlineFlex bool Apply display: inline-flex
flexWrap bool Apply flex-wrap: wrap
flexRow bool Apply flex-direction: row
flexColumn bool Apply flex-direction: column
justifyStart bool Apply justify-content: flex-start
justifyEnd bool Apply justify-content: flex-end
justifyCenter bool Apply justify-content: center
justifySpaceBetween bool Apply justify-content: space-between
justifySpaceAround bool Apply justify-content: space-around
alignStart bool Apply align-items: flex-start
alignEnd bool Apply align-items: flex-end
alignCenter bool Apply align-items: center
alignSpaceBetween bool Apply align-items: space-between
alignSpaceAround bool Apply align-items: space-around
direction string Apply CSS flex-direction properties
alignItems string Apply CSS align-items properties
alignContent string Apply CSS align-content properties
justifyContent string Apply CSS justify-content properties
alignSelf string Apply CSS align-self properties
flexBasis string Apply CSS flex-basis properties
flexGrow string Apply CSS flex-grow properties
flexShrink string Apply CSS flex-shrink properties

Other

Name Type Description
withOutline bool Add 1px solid red outline
shadow bool Add box shadow to container
heavyShadow bool Add heavy box shadow to container
animate bool Add animation property to container
opacity number Add opacity for container.

Dependents (16)

Package Sidebar

Install

npm i @hixme-ui/container

Weekly Downloads

49

Version

2.1.0

License

MIT

Unpacked Size

59.3 kB

Total Files

21

Last publish

Collaborators

  • sureco-devops
  • sureco-engineering
  • dreamingbinary
  • billyxs