We The Curious Developers

We The Curious Developers

  • Guidelines
  • CuriOs SDK
  • Software
  • Films
  • Art
  • Audio
  • Photography

›Components

Getting Started

  • Getting Started Overview
  • ClI
  • Working With Us

Technical

  • Hardware

Frames

  • Frames Overview
  • Info Panel
  • Media Browser
  • Touch to Start

Components

  • Components Overview
  • Box
  • Button
  • Card
  • Checkbox
  • Header
  • Heading
  • Hero
  • Icon
  • Text Input
  • Markdown Viewer
  • Modal
  • WTCProvider
  • Table
  • Text
  • Video Player
  • Calendar
  • Dropdown
  • InputAutoComplete
  • Radio
  • Sidebar
  • Slider
  • Notification
  • IconNavButton
  • IconSideBar
  • List
  • Tab
  • Title
  • Toggle
  • Value

Box component

A layout component using Hedron flexbox layout library.

Install

npm i @wethecurious/wtc-ui-library

Usage

Import it into your project

import { BoxBounds, BoxProvider, BoxBox } from '@wethecurious/wtc-ui-library'

Prop

<BoxBounds direction="vertical">
  <Box>Header</Box>
  <Box>Content</Box>
  <Box>Footer</Box>
</BoxBounds>

BoxBounds

PropDescriptionDefault
debugOutlines the grid system so you can visualize the layoutfalse
flexControls the CSS flex property
directionSets the primary axis the children should be in line withhorizontal
wrapSets whether the children should wrap when there's no more room on the primary axisfalse
valignAlignment of children along the vertical axis
halignAlignment of children along the vertical axis
justifySet the justify-content value
alignItemsSet the align-items value
alignContentSet the align-content value
basisSet the flex-basis as a string value
wrapSets the flex-wrap property using FlexWrap.Wrap or FlexWrap.NoWrap

Box

PropDescriptionDefault
debugOutlines the grid system so you can visualize the layoutfalse
flexControls the CSS flex property
fillSets whether the Box should fill up all available space
fluidConvenience property for disabling padding
shiftRightShifts the box to the right of the parent BoxBounds
shiftLeftShifts the box to the left of the parent BoxBounds
shiftUpShifts the box to the top of the parent BoxBounds
shiftDownShifts the box to the bottom of the parent BoxBounds
Last updated on 5/9/2019
← ButtonButton →
  • Install
  • Usage
  • Prop
    • BoxBounds
    • Box
Docs
Getting Started (or other categories)Guides (or other categories)API Reference (or other categories)
Community
User ShowcaseStack OverflowProject ChatTwitter
More
BlogGitHubStar
Copyright © 2020 We The Curious