Bloch Display

Shows a wire's local state as a point on the Bloch sphere.

Attribute	State
data-size="xs"	height: 1rem; width: 1rem;
data-size="sm"	height: 1.5rem; width: 1.5rem;
data-size="base"	height: 2rem; width: 2rem;
data-size="lg"	height: 2.5rem; width: 2.5rem;
data-size="xl"	height: 3rem; width: 3rem;
data-x="0.123"	X = 0.123
data-y="0.123"	Y = 0.123
data-z="0.123"	Z = 0.123

Sizes

Control the size of a bloch display using the data-size attribute.

<bloch-display data-size="xs"></bloch-display>
<bloch-display data-size="sm"></bloch-display>
<bloch-display data-size="base"></bloch-display>
<bloch-display data-size="lg"></bloch-display>
<bloch-display data-size="xl"></bloch-display>

Coordinates

Control the coordinates that the Bloch vector points to using the data-x, data-y, and data-z attributes.

<bloch-display></bloch-display>
<bloch-display data-x="0" data-y="0" data-z="1"></bloch-display>
<bloch-display data-x="0" data-y="0" data-z="-1"></bloch-display>
<bloch-display data-x="1" data-y="0" data-z="0"></bloch-display>
<bloch-display data-x="-1" data-y="0" data-z="0"></bloch-display>
<bloch-display data-x="0" data-y="1" data-z="0"></bloch-display>
<bloch-display data-x="0" data-y="-1" data-z="0"></bloch-display>
<bloch-display data-x="0" data-y="0" data-z="0"></bloch-display>

User Help Popup

As a user help, you can display the description and usage of the Bloch display as a popup. The popup will show on the mouse hover event. The content to be displayed can be specified in the <bloch-display> tag as follows:

Bloch Sphere Display

Shows a wire's local state as a point on the Bloch sphere.

<bloch-display>
  <header>
    <h1>Bloch Sphere Display</h1>
    <p>Shows a wire's local state as a point on the Bloch sphere.</p>
  </header>
</bloch-display>

Inspector Popup

Bloch displays placed inside quantum circuits (i.e. <bloch-display> tags enclosed in <circuit-dropzone> tags) can be inspected by mouse-hovering. In the inspector, you can see the values of the 3D coordinates x, y, and z on the Bloch sphere and the two angles Φ and θ that determine the coordinates.

<circuit-dropzone>
  <bloch-display data-x="1" data-y="0" data-z="0"></bloch-display>
</circuit-dropzone>

Drag and Drop

To make the Bloch display drag-and-droppable, specify the data-drag-and-drop attribute.

<bloch-display data-drag-and-drop><bloch-display>