ToggleButtonGroup

Toggle Buttons indicate active and inactive states

import { ToggleButtonGroup } from 'material-bread';

ToggleButtonGroup wraps all ToggleButton s, and only allows one to be selected at a time, it handles all of this behind the scenes. A unique value prop is required for each child since that will be passed to to the onPress callback.







Live Editing

class Demo extends React.Component {
  constructor(props) {
    super(props)
  }
  render() {
    const styles = {
      active: {
        backgroundColor: 'rgba(0,0,0,.12)',
        borderWidth: 1,
        borderColor: 'rgba(0,0,0,.12)',
        padding: 8,
      },
      inactive: {
        backgroundColor: 'white',
        borderWidth: 1,
        borderColor: 'rgba(0,0,0,.12)',
        padding: 8,
      }
    }
    return (
      <ToggleButtonGroup onPress={value => console.log(value)}>
        <View style={{ flexDirection: 'row' }}>
          <ToggleButton
            value={'italic'}
            activeNode={
              <View style={styles.active}>
                <Icon name="format-align-center" size={20} />
              </View>
            }
            inActiveNode={
              <View style={styles.inactive}>
                <Icon name="format-align-center" size={20} />
              </View>
            }
            rippleContainerBorderRadius={0}
          />
          <ToggleButton
            value={'bold'}
            activeNode={
              <View style={[styles.active, {
                borderRightWidth: 0,
                borderLeftWidth: 0,                      
                }]}>
                <Icon name="format-align-left" size={20} />
              </View>
            }
            inActiveNode={
              <View style={[styles.inactive, {
                borderRightWidth: 0,
                borderLeftWidth: 0,                      
                }]}>
                <Icon name="format-align-left" size={20} />
              </View>
            }
            rippleContainerBorderRadius={0}
          />
          <ToggleButton
            value={'underlined'}
            activeNode={
              <View style={styles.active}>
                <Icon name="format-align-right" size={20} />
              </View>
            }
            inActiveNode={
              <View style={styles.inactive}>
                <Icon name="format-align-right" size={20} />
              </View>
            }
            rippleContainerBorderRadius={0}
          />
        </View>
      </ToggleButtonGroup>
    );
  }
}

import React, { Component } from 'react';
import { View } from 'react-native';
import { ToggleButton, ToggleButtonGroup, Icon } from 'material-bread';

class Demo extends React.Component {
  constructor(props) {
    super(props)
  }
  render() {
    return (
      <ToggleButtonGroup>
        <ToggleButton
          activeNode={<Icon name="alarm" size={32} />}
          inActiveNode={
            <Icon name="alarm" size={32} style={{ opacity: 0.5 }} />
          }
          size={32}
          value={'alarm'}
          />
        <ToggleButton
          activeNode={<Icon name="face" size={32} />}
          inActiveNode={
            <Icon name="face" size={32} style={{ opacity: 0.5 }} />
          }
          size={32}
          value={'face'}
        />
      </ToggleButtonGroup>
    );
  }
}

Name

Description

Type

Default

onPress

Callback for when a toggleButton is clicked

func

ToggleButtonGroup

Component #

Usage #

Props #