0.0.6 • Published 7 years ago
react-foundation-components
A collection of Foundation components for react
Components
List
- Button
- Column
- Divider
- Expand
- Icon
- Menu
- MenuItem
- MenuText
- NumberField
- Row
- TextArea
- TextField
- Title
Features
| Component | Core | Style | Input & Events | Other |
|---|
| Button | ClassNames, Visibility | | MouseEvents, Link, Disabled | Float |
| Column | ClassNames, Visibility | ColumnStyle | | |
| Divider | ClassNames, Visibility | | | |
| Expand | ClassNames, Visibility | | | |
| Icon | ClassNames, Visibility | IconStyle | | |
| Menu | ClassNames, Visibility | MenuStyle | | ContentExpand, Alignment, Orientation |
| MenuItem | ClassNames, Visibility | | MouseEvents, Link | Active |
| MenuText | ClassNames, Visibility | | | |
| NumberField | ClassNames, Visibility | | DataEvents, Disabled, InputField=number | |
| Row | ClassNames, Visibility | RowStyle | | ContentExpand, Gutters |
| TextArea | ClassNames, Visibility | | DataEvents, Disabled, InputField=string | |
| TextField | ClassNames, Visibility | | DataEvents, Disabled, InputField=string | |
| Title | ClassNames, Visibility | | | |
Types & Enums
Alignment Enum
Size Enum
- Small
- Medium
- Large
- XLarge
- XXLarge
Column Integer Type
number of columns to span
Acceptable Values: 1..12
Feature Description and Props
ClassNames
props
| prop | type |
|---|
| className | string |
| innerClassName | string |
Visibility
props
Float
props
Disabled
props
| prop | type | default |
|---|
| disabled | bool | false |
MouseEvents
props
DataEvents
props
InputField
props
| prop | type | default |
|---|
| value | string or number | |
| label | string | null |
| isInline | bool | |
Alignment
props
Active
props
Orientation
props
| prop | type |
|---|
| isVertical | bool |
| isHorizontal | bool |
| verticalOn | SIZE or [SIZE, ...] |
| horizontalOn | SIZE or [SIZE, ...] |
ContentExpand
props
MenuStyle
props
| prop | type |
|---|
| isSimple | bool |
| isNested | bool |
| iconTop | bool |
IconStyle
props
RowStyle
notes
xlargeUp and xxlargeUp only work if specified in foundation settings
see foundation docs
$breakpoint-classes: (small medium large xlarge);
props
Gutters
props
| prop | type |
|---|
| isCollapsed | bool |
| collapseOn | SIZE or [SIZE, ...] |
| uncollapseOn | SIZE or [SIZE, ...] |
ColumnStyle
notes
xlargeUp and xxlargeUp only work if specified in foundation settings
see foundation docs
$breakpoint-classes: (small medium large xlarge);
props
| prop | type |
|---|
| small | COLUMN |
| medium | COLUMN |
| large | COLUMN |
| xlarge | COLUMN |
| xxlarge | COLUMN |
| centerOn | SIZE or [SIZE, ...] |
| uncenterOn | SIZE or [SIZE, ...] |
| offsetOn | [SIZE, COLUMN] or [[SIZE, COLUMN], ...] |
| pushOn | [SIZE, COLUMN] or [[SIZE, COLUMN], ...] |
| pullOn | [SIZE, COLUMN] or [[SIZE, COLUMN], ...] |
| isEnd | bool |
Link
notes
requires the use of react-router
props
context
| context | type |
|---|
| router | react-router object |
Attributions
Inspired by react-foundation and react-slingshot