Something went wrong. Try again.
[PRE-ALPHA] an open source web-based 2D/3D graphing calculator cartesium.org
Something went wrong. Try again.
Svelte
at mathquill
12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152<script lang="ts"> let { textMode, onselect }: { textMode: boolean; onselect: (textMode: boolean) => void; } = $props();</script>
<div class="view-switch" role="group" aria-label="Expression view"> <button type="button" aria-label="Expression UI view" aria-pressed={!textMode} class:selected={!textMode} onclick={() => onselect(false)} >UI</button> <button type="button" aria-label="Expression text view" aria-pressed={textMode} class:selected={textMode} onclick={() => onselect(true)} >TXT</button></div>
<style> .view-switch { display: inline-flex; flex: none; border: 1px solid #94a3b8; border-radius: 5px; overflow: hidden; background: #f1f5f9; }
button { min-width: 42px; padding: 5px 7px; border: 0; border-radius: 0; background: transparent; color: #475569; font: 700 11px/1.4 system-ui, sans-serif; letter-spacing: 0.025em; cursor: pointer; }
button + button { border-left: 1px solid #94a3b8; } button.selected { background: #fff; color: #1d4ed8; } button:hover { color: #1d4ed8; } button:focus-visible { outline: 2px solid #2563eb; outline-offset: -2px; }</style>