Write Gate

(Re)sets a qubit to state |0⟩ or |1⟩.

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-value="0"	`\|0⟩`
data-value="1"	`\|1⟩`

Sizes

Control the size of a measure gate using the data-size attribute.

<write-gate data-size="xs"></write-gate>
<write-gate data-size="sm"></write-gate>
<write-gate data-size="base"></write-gate>
<write-gate data-size="lg"></write-gate>
<write-gate data-size="xl"></write-gate>

Values

Specify the value to be set to the quantum bit by the data-value attribute.

<write-gate data-value="0"></write-gate>
<write-gate data-value="1"></write-gate>

User Help Popup

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

`|0⟩` Operation

(Re)sets a qubit to state |0⟩.

<write-gate data-value="0">
  <header>
    <h1><code>|0⟩</code> Operation</h1>
    <p>(Re)sets a qubit to state <code>|0⟩</code>.</p>
  </header>

  <div class="mt-4 flex flex-row items-center space-x-1">
    <circle-notation></circle-notation>
    <div class="flex flex-row items-center">
      <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" viewBox="0 0 20 20" fill="#E5E5E5">
        <path fill-rule="evenodd" d="M3 10a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1z" clip-rule="evenodd" />
      </svg>
      <write-gate data-value="0" data-size="sm"></write-gate>
      <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" viewBox="0 0 20 20" fill="#E5E5E5">
        <path fill-rule="evenodd" d="M12.293 5.293a1 1 0 011.414 0l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414-1.414L14.586 11H3a1 1 0 110-2h11.586l-2.293-2.293a1 1 0 010-1.414z" clip-rule="evenodd" />
      </svg>
    </div>
    <circle-notation></circle-notation>
  </div>

  <div class="mt-4 mb-2 flex flex-row items-center space-x-1">
    <circle-notation data-magnitudes="0,1"></circle-notation>
    <div class="flex flex-row items-center">
      <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" viewBox="0 0 20 20" fill="#E5E5E5">
        <path fill-rule="evenodd" d="M3 10a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1z" clip-rule="evenodd" />
      </svg>
      <write-gate data-value="0" data-size="sm"></write-gate>
      <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" viewBox="0 0 20 20" fill="#E5E5E5">
        <path fill-rule="evenodd" d="M12.293 5.293a1 1 0 011.414 0l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414-1.414L14.586 11H3a1 1 0 110-2h11.586l-2.293-2.293a1 1 0 010-1.414z" clip-rule="evenodd" />
      </svg>
    </div>
    <circle-notation></circle-notation>
  </div>
</write-gate>

Drag and Drop

To make the Write gate drag-and-droppable, specify the data-drag-and-drop attribute.

<write-gate data-drag-and-drop><write-gate>