ControlButtonToggle

Contents

• ControlButtonToggle

  • Example

  • Parameters

  • CSS classes

  • CSS Example

React component. Unit toggle control button (see action.toggle)

Example

import { ControlButtonToggle } from "@eva-ics/webengine-react";
import { ActionResult, EvaError } from "@eva-ics/webengine";

const on_success = (result: ActionResult) => {
  console.log(`action success: {result.uuid}`);
};

const on_fail = (err: EvaError) => {
  console.log(`action failed: {error.message}`);
};

const MyBlock = () => {
  return (
    <>
      <ControlButtonToggle
        oid="unit:tests/gate1"
        label="Gate1"
        on_success={on_success}
        on_fail={on_fail}
      />
    </>
  );
};

Parameters

name	type	required	description
oid	string	yes	Unit OID
label	string	no	Button label
css_class	string	no	custom button css class
on_success	(result: ActionResult) => void	no	called on action success
on_fail	(err: EvaError) => void	no	called on action fail
engine	Eva	no	WebEngine object (if no default set)

CSS classes

name	description
div.eva.button.container.toggle.CSS_CLASS	primary button container
label.eva.button.switch	button label container
span.eva.button.slider.CSS_CLASS	button slider
div.eva.button.label.slider.CSS_CLASS	button label

CSS Example

div.eva.button.container.toggle {
  margin: 0;
  padding: 0;
  white-space: nowrap;
}
div.eva.button.label.slider {
  text-align: left;
  display: inline-block;
  margin-left: 65px;
  margin-top: 4px;
  width: 100%;
}
label.eva.button.switch {
    position: relative; display: inline-block; width: 60px;
    height: 24px; }
label.eva.button.switch input { opacity: 0; width: 0; height: 0; }
span.eva.button.slider {
    position: absolute; cursor: pointer; top: 0; left: 0; right: 0;
    bottom: 0; background-color: #ccc; -webkit-transition: .4s;
    transition: .4s; }
span.eva.button.slider:before {
    position: absolute; content: ""; height: 16px; width: 26px;
    left: 4px; bottom: 4px; background-color: white; -webkit-transition: .4s;
    transition: .4s; }
input:checked + span.eva.button.slider { background-color: #2196F3; }
input:focus + span.eva.button.slider { box-shadow: 0 0 1px #2196F3; }
input:checked + span.eva.button.slider:before {
  -webkit-transform: translateX(26px); -ms-transform: translateX(26px);
  transform: translateX(26px); }