28:null 29:["$","title",null,{"children":"Toggle Button | B | Observable"}] 2e:[] 2c:{"id":"f602cf63af71b80a","slug":"toggle-button","title":"Toggle Button","thumbnail":"da157f33224c1588dd0909ea88aba16d3eabf75ab44dbd8985458f249f5743c5","access_level":"public","create_time":"$D2020-12-26T22:52:21.987Z","update_time":"$D2021-01-21T05:09:26.247Z","view_time":null,"first_public_time":"$D2020-12-26T22:59:41.633Z","has_unpublished_edits":null,"fork":false,"stars":1,"starred":false,"owner":{"type":"team","id":"7a7f7153be8c10cd","login":"biomotivate","name":"B","avatar_url":"https://avatars-next.observableusercontent.com/7c575031634f0245ee7b2a94e296d59a9f428689841ebe0d0f139a6338dd53b4","tier":"starter_2024"},"version":168,"publish_version":168,"role":null,"authored":false,"authors":[{"type":"individual","id":"27c834b9af825fc5","login":"biomotivate","name":"B","avatar_url":"https://avatars-next.observableusercontent.com/7c575031634f0245ee7b2a94e296d59a9f428689841ebe0d0f139a6338dd53b4","tier":null}],"members":[{"type":"individual","id":"27c834b9af825fc5","login":"biomotivate","name":"B","avatar_url":"https://avatars-next.observableusercontent.com/7c575031634f0245ee7b2a94e296d59a9f428689841ebe0d0f139a6338dd53b4","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":1,"collection":null,"type":"notebook","body":{"title":"Toggle Button","cells":[{"id":29,"value":"md`# Toggle Button`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":34,"value":"md`*By Leon Cheng (http://leoncheng.dev/) *`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":25,"value":"md`Inspired from https://observablehq.com/@flimsyhat/pattern-for-a-toggle-button` ","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":153,"value":"md`## Directions for Importing`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":118,"value":"html`\n

If you would like to have more than one toggle button in your notebook, then make sure to have a separate import for each and have a separate mutable variable for each

\n\nExample:\n

\n import {toggleIsOn as toggleIsOn1} with {mutable var1 as isOn} from \"@biomotivate/toggle-button\"; \n
\n mutable var1 = true;\n
\n import {toggleIsOn as toggleIsOn2} with {mutable var2 as isOn} from \"@biomotivate/toggle-button\"; \n
\n mutable var2 = true;\n

\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":149,"value":"md`## Example Usage`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":52,"value":"html`

\nResult: ${example} \n

`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":18,"value":"viewof example = toggleIsOn({\n onLabel: \"Currently on, Click to turn off\", \n offLabel: \"Currently off, Click to turn on\",\n onStyle: \"background-color: lime; font-size: 32px;\",\n offStyle: \"color: red; font-size: 32px;\",\n});","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":0,"value":"toggleIsOn = (params) => {\n const button = isOn ? \n html``\n :\n html``;\n \n button.onclick = () => mutable isOn = !mutable isOn;\n\n Object.defineProperty(button, \"value\", {get() { return isOn; }});\n\n return button;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2,"value":"mutable isOn = true","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W2e","stdlib":"1","titling":"auto"}} 2d:"$2c:body"