ContributorsLast modified on: Feb 8, 2017
siddharthlatestmetagroverweb-flow

ToggleButton

Image to be displayed

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

Annotated image

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)