New Case Study:See how Anthropic automated 95% of dependency reviews with Socket.Learn More

@hixme-ui/container

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

@hixme-ui/container

hixme-ui Container component

  • 1.7.0
  • npm
  • Socket score

Version published
Maintainers
3
Created

hixme-ui container

npm i --save @hixme-ui/container

Usage

import Container from '@hixme-ui/container'

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

Default Props

NameTypeDefault
paddingstring20px
backgroundstringnone

Text Align

NameTypeDescription
textLeftbooltext-align: left
textCenterbooltext-align: center
textRightbooltext-align: right

Background Color

NameTypeDescription
backgroundstringApply CSS background properties
defaultboolDefault will apply a white background
primarybool
successbool
warningbool
errorbool
mutedbool
whitebool
blackbool
redbool
bluebool
purplebool
yellowbool
greenbool
lightbool
lighterbool
lightestbool

Borders

NameTypeDescription
borderstringApply CSS border properties
borderColorstringApply CSS border-color properties
dashedboolApply 2px, grey dashed border
roundedboolApply 6px, border radius to container

Margin

NameTypeDescription
marginstringApply CSS margin properties
marginLeftstringApply CSS margin-left properties
marginRightstringApply CSS margin-right properties
marginTopstringApply CSS margin-top properties
marginBottomstringApply CSS margin-bottom properties
marginSidesstringApply CSS margin-left and right properties

Padding

NameTypeDescription
paddingstringApply CSS padding properties
paddingLeftstringApply CSS padding-left properties
paddingRightstringApply CSS padding-right properties
paddingTopstringApply CSS padding-top properties
paddingBottomstringApply CSS padding-bottom properties
paddingSidesstringApply CSS padding-left and right properties
noPaddingboolRemove default padding from container

Width

NameTypeDescription
widthstringApply CSS width properties
minWidthstringApply CSS min-width properties
maxWidthstringApply CSS max-width properties

Height

NameTypeDescription
heightstringApply CSS height properties
minHeightstringApply CSS min-height properties
maxHeightstringApply CSS max-height properties

Flex Properties

NameTypeDescription
flexboolApply display: flex
inlineFlexboolApply display: inline-flex
flexWrapboolApply flex-wrap: wrap
flexRowboolApply flex-direction: row
flexColumnboolApply flex-direction: column
justifyStartboolApply justify-content: flex-start
justifyEndboolApply justify-content: flex-end
justifyCenterboolApply justify-content: center
justifySpaceBetweenboolApply justify-content: space-between
justifySpaceAroundboolApply justify-content: space-around
alignStartboolApply align-items: flex-start
alignEndboolApply align-items: flex-end
alignCenterboolApply align-items: center
alignSpaceBetweenboolApply align-items: space-between
alignSpaceAroundboolApply align-items: space-around
directionstringApply CSS flex-direction properties
alignItemsstringApply CSS align-items properties
alignContentstringApply CSS align-content properties
justifyContentstringApply CSS justify-content properties
alignSelfstringApply CSS align-self properties
flexBasisstringApply CSS flex-basis properties
flexGrowstringApply CSS flex-grow properties
flexShrinkstringApply CSS flex-shrink properties

Other

NameTypeDescription
withOutlineboolAdd 1px solid red outline
shadowboolAdd box shadow to container
heavyShadowboolAdd heavy box shadow to container
animateboolAdd animation property to container

FAQs

Package last updated on 30 Dec 2017

Did you know?

Socket

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

Related posts