Edit Event Handler

Name

Also known as (comma separated)

Brief definition Code responding to an event.

Notes

Tier Core Useful Reference Deleted

Controls schema (JSON array) [ { "id": "eventType", "type": "select", "label": "Event", "default": "click", "options": [ "click", "hover", "submit" ] }, { "id": "handlerName", "type": "text", "label": "Handler function", "default": "handleClick" }, { "id": "effectText", "type": "text", "label": "Effect", "default": "opens the modal" }, { "id": "accent", "type": "color", "label": "Accent colour", "default": "#A8E6C1", "presets": [ "#A8E6C1", "#F5C2E0", "#BFD9F2", "#D9C8F0", "#E8A020", "#241430" ] } ]

Templates (JSON object keyed by format) { "html": "<div class=\"evth evth--{{eventType}}\">\n <div class=\"evth__el\" style=\"border-color:{{accent}};\">Element<span class=\"evth__badge\">on{{eventType}}</span></div>\n <span class=\"evth__arrow\" aria-hidden=\"true\">&rarr;</span>\n <code class=\"evth__fn\">{{handlerName}}()</code>\n <span class=\"evth__arrow\" aria-hidden=\"true\">&rarr;</span>\n <div class=\"evth__effect\" style=\"background:{{accent}};\">{{effectText}}</div>\n</div>\n<style>\n.evth { font: 12px/1.5 system-ui, sans-serif; color: #241430; background: #FAF7F2; padding: 18px; border-radius: 12px; width: 300px; box-sizing: border-box; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; justify-content: center; }\n.evth__el { position: relative; border: 2px solid; border-radius: 8px; padding: 10px 14px; font-weight: 700; }\n.evth__badge { display: block; font: 10px ui-monospace, monospace; font-weight: 400; color: #24143099; margin-top: 3px; }\n.evth__arrow { font-size: 14px; color: #24143060; }\n.evth__fn { font: 11px ui-monospace, monospace; background: #24143012; padding: 6px 8px; border-radius: 6px; }\n.evth__effect { padding: 10px 14px; border-radius: 8px; font-weight: 600; text-align: center; }\n</style>", "tailwind": "<div class=\"evthtw evthtw--{{eventType}} font-sans text-[#241430] bg-[#FAF7F2] p-4.5 rounded-xl w-[300px] box-border flex items-center gap-1.5 flex-wrap justify-center\">\n <div class=\"relative border-2 rounded-lg py-2.5 px-3.5 font-bold\" style=\"border-color:{{accent}};\">Element<span class=\"block font-mono text-[10px] font-normal text-[#24143099] mt-1\">on{{eventType}}</span></div>\n <span class=\"text-sm text-[#24143060]\" aria-hidden=\"true\">&rarr;</span>\n <code class=\"font-mono text-[11px] bg-[#24143012] py-1.5 px-2 rounded-md\">{{handlerName}}()</code>\n <span class=\"text-sm text-[#24143060]\" aria-hidden=\"true\">&rarr;</span>\n <div class=\"py-2.5 px-3.5 rounded-lg font-semibold text-center\" style=\"background:{{accent}};\">{{effectText}}</div>\n</div>", "react": "export function EventHandler({\n eventType = \"{{eventType}}\",\n handlerName = \"{{handlerName}}\",\n effectText = \"{{effectText}}\",\n accent = \"{{accent}}\",\n}) {\n return (\n <div style={{ font: \"12px/1.5 system-ui, sans-serif\", color: \"#241430\", background: \"#FAF7F2\", padding: 18, borderRadius: 12, width: 300, boxSizing: \"border-box\", display: \"flex\", alignItems: \"center\", gap: 6, flexWrap: \"wrap\", justifyContent: \"center\" }}>\n <div style={{ border: `2px solid ${accent}`, borderRadius: 8, padding: \"10px 14px\", fontWeight: 700 }}>\n Element\n <span style={{ display: \"block\", fontFamily: \"ui-monospace, monospace\", fontSize: 10, fontWeight: 400, color: \"#24143099\", marginTop: 3 }}>on{eventType}</span>\n </div>\n <span aria-hidden=\"true\" style={{ fontSize: 14, color: \"#24143060\" }}>&rarr;</span>\n <code style={{ fontFamily: \"ui-monospace, monospace\", fontSize: 11, background: \"#24143012\", padding: \"6px 8px\", borderRadius: 6 }}>{handlerName}()</code>\n <span aria-hidden=\"true\" style={{ fontSize: 14, color: \"#24143060\" }}>&rarr;</span>\n <div style={{ padding: \"10px 14px\", borderRadius: 8, fontWeight: 600, textAlign: \"center\", background: accent }}>{effectText}</div>\n </div>\n );\n}" }