ToggleButton.md

{"bigh3": true}

ToggleButton

ToggleButton sensor component creates a toggle button UI widget. It is used for filtering results based on a fixed set of toggleable options.

Example uses:

• filter movies by ratings between 1 and 5,
• display restaurants that accept delivery and are open now,
• show flight tickets by one way, round trip and multi-city options.

Usage

<ToggleButton
  componentId="MeetupTops"
  appbaseField="group_topics.topic_name.raw"
  title="ToggleButton component"
  data={
    [{"label": "Social",   "value": "Social"},
     {"label": "Travel",   "value": "Travel"},
     {"label": "Outdoors", "value": "Outdoors"}]
  }
  defaultSelected=["Social"]
/>

Props

• componentId String
  unique id of the sensor, can be referenced in an actuator's actuate prop.
• appbaseField String
  DB data field to be mapped with the component's UI view.The selected buttons create a database query on this field.
• title String [optional]
  title of the component to be shown in the UI.
• data Object Array
  an object array of {label:label, value:value} kv pairs, label is displayed in the UI and value is the corresponding actual field value in the database.
• defaultSelected Array [optional]
  an array of default selected label(s) to pre-select one or more buttons.
• multiSelect Boolean [optional]
  whether multiple buttons can be selected, defaults to true. When set to false, only one button can be selected.

CSS Styles API

All reactivebase components are rbc namespaced.

<div class="rbc rbc-togglebutton rbc-title-active rbc-multiselect-active col s12 col-xs-12 card thumbnail">
  <div class="row">
    <h4 class="rbc-title col s12 col-xs-12">Meetup Categories</h4>
    <div class="col s12 col-xs-12">
      <div class="rbc-buttongroup">
        <button class="rbc-btn rbc-btn-active" title="Social">Social</button>
        <button class="rbc-btn rbc-btn-inactive" title="Travel">Travel</button>
        <button class="rbc-btn rbc-btn-inactive" title="Outdoors">Outdoors</button>
      </div>
    </div>
  </div>
</div>

• ToggleButton component's class name is rbc-togglebutton. Additionally, depending on the presence / absence of the title prop, a rbc-title-active or rbc-title-inactive class is respectively applied.
• the title element has a class name of rbc-title.
• the buttons are encapsulated inside a rbc-buttongroup class.
• each individual button has a rbc-btn class. If the button is currently selected, it will also have the rbc-btn-active class. If the button is not selected, it will likewise have the rbc-btn-inactive class.

Examples

1. A single toggle button with all the default props

2. A multiple toggle button with default props

3. A multiple toggle button with specific default selected labels

4. Playground (with all knob actions)