A collection of Foundation components for react
- Button
- Column
- Divider
- Expand
- Icon
- Menu
- MenuItem
- MenuText
- NumberField
- Row
- TextArea
- TextField
- Title
| 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 |
- Left
- Right
- Center
- None
- Small
- Medium
- Large
- XLarge
- XXLarge
number of columns to span
Acceptable Values: 1..12
| prop | type |
|---|---|
| className | string |
| innerClassName | string |
| prop | type |
|---|---|
| show | bool |
| prop | type |
|---|---|
| float | ALIGNMENT |
| prop | type | default |
|---|---|---|
| disabled | bool | false |
| prop | type |
|---|---|
| onClick | function |
| prop | type |
|---|---|
| onChange | function |
| prop | type | default |
|---|---|---|
| value | string or number | |
| label | string | null |
| isInline | bool |
| prop | type |
|---|---|
| alignment | ALIGNMENT |
| prop | type |
|---|---|
| isActive | bool |
| prop | type |
|---|---|
| isVertical | bool |
| isHorizontal | bool |
| verticalOn | SIZE or [SIZE, ...] |
| horizontalOn | SIZE or [SIZE, ...] |
| prop | type |
|---|---|
| isExpanded | bool |
| prop | type |
|---|---|
| isSimple | bool |
| isNested | bool |
| iconTop | bool |
| prop | type |
|---|---|
| icon | string |
xlargeUp and xxlargeUp only work if specified in foundation settings
see foundation docs
$breakpoint-classes: (small medium large xlarge);
| prop | type |
|---|---|
| smallUp | COLUMN |
| mediumUp | COLUMN |
| largeUp | COLUMN |
| xlargeUp | COLUMN |
| xxlargeUp | COLUMN |
| isColumn | bool |
| prop | type |
|---|---|
| isCollapsed | bool |
| collapseOn | SIZE or [SIZE, ...] |
| uncollapseOn | SIZE or [SIZE, ...] |
xlargeUp and xxlargeUp only work if specified in foundation settings
see foundation docs
$breakpoint-classes: (small medium large xlarge);
| 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 |
requires the use of react-router
| props | type |
|---|---|
| link | string |
| context | type |
|---|---|
| router | react-router object |
Inspired by react-foundation and react-slingshot