mathcodes

Split Screen Components

The following tutorial walks you through creating a split screen component using layout components.

Dependencies:

  "dependencies": {
    "@testing-library/jest-dom": "5.14.1",
    "@testing-library/react": "11.2.7",
    "@testing-library/user-event": "12.8.3",
 "react": "^17.0.2",

mathcodes

<canvas id="c"></canvas>
    <div id="ui">
      <div class="tiles">
        <input type="radio" name="voxel" id="voxel1" value="1"><label for="voxel1" style="background-position:   -0% -0%"></label>
        <input type="radio" name="voxel" id="voxel2" value="2"><label for="voxel2" style="background-position: -100% -0%"></label>
        <input type="radio" name="voxel" id="voxel3" value="3"><label for="voxel3" style="background-position: -200% -0%"></label>
        <input type="radio" name="voxel" id="voxel4" value="4"><label for="voxel4" style="background-position: -300% -0%"></label>
        <input type="radio" name="voxel" id="voxel5" value="5"><label for="voxel5" style="background-position: -400% -0%"></label>
        <input type="radio" name="voxel" id="voxel6" value="6"><label for="voxel6" style="background-position: -500% -0%"></label>
        <input type="radio" name="voxel" id="voxel7" value="7"><label for="voxel7" style="background-position: -600% -0%"></label>

mathcodes

<canvas id="c"></canvas>
  

mathcodes

<canvas id="c"></canvas>
  

mathcodes

<div id="container">
      <canvas id="c"></canvas>
      <div id="labels"></div>
    </div>
  

mathcodes

<canvas id="c"></canvas>
  

mathcodes

<canvas id="c"></canvas>
    <div id="ui">
      <div class="tiles">
        <input type="radio" name="voxel" id="voxel1" value="1"><label for="voxel1" style="background-position:   -0% -0%"></label>
        <input type="radio" name="voxel" id="voxel2" value="2"><label for="voxel2" style="background-position: -100% -0%"></label>
        <input type="radio" name="voxel" id="voxel3" value="3"><label for="voxel3" style="background-position: -200% -0%"></label>
        <input type="radio" name="voxel" id="voxel4" value="4"><label for="voxel4" style="background-position: -300% -0%"></label>
        <input type="radio" name="voxel" id="voxel5" value="5"><label for="voxel5" style="background-position: -400% -0%"></label>
        <input type="radio" name="voxel" id="voxel6" value="6"><label for="voxel6" style="background-position: -500% -0%"></label>
        <input type="radio" name="voxel" id="voxel7" value="7"><label for="voxel7" style="background-position: -600% -0%"></label>

mathcodes

gist for Jon? Whatcha want on here?

Here are some things:

Contact

Jon Christie