Phase Shift Gate

Manipulates the relative phase of a qubit.

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-phi="value" φ = value
data-disabled Disabled
data-wire-top Connedted with lower bit gate
data-wire-bottom Connected with upper bit gate
data-wire-top-disabled Connected with lower bit gate (disabled)
data-wire-bottom-disabled Connected with upper bit gate (disabled)

Sizes

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

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

Angle

Control the angle φ of a Phase gate using the data-phi attribute. 

<phase-gate data-phi="π/2"></phase-gate>

Disabled Gate

To display the disabled Phase gate, set the data-disabled attribute. 

<phase-gate data-disabled></phase-gate>

Connecting with Other Gates

To connect the Phase gate to the quantum gate of the lower bit, set the data-wire-top attribute. Similarly, set data-wire-bottom for the upper bits. 

<phase-gate data-wire-top></phase-gate>
<phase-gate data-wire-bottom></phase-gate>
<phase-gate data-wire-top data-wire-bottom></phase-gate>
<phase-gate data-wire-top-disabled></phase-gate>
<phase-gate data-wire-bottom-disabled></phase-gate>
<phase-gate data-wire-top-disabled data-wire-bottom-disabled></phase-gate>

To show disabled connections, use the data-wire-top-disabled and data-wire-bottom-disabled attributes. 

<phase-gate data-wire-top-disabled></phase-gate>
<phase-gate data-wire-bottom-disabled></phase-gate>
<phase-gate data-wire-top-disabled data-wire-bottom-disabled></phase-gate>
<phase-gate data-wire-top-disabled data-disabled></phase-gate>
<phase-gate data-wire-bottom-disabled data-disabled></phase-gate>
<phase-gate data-wire-top-disabled data-wire-bottom-disabled data-disabled></phase-gate>

IF directive

To apply a Phase gate conditionally, specify a data-if attribute; the condition (variable name) specified in the if directive can be set in the Measurement gate. 

<phase-gate data-if="p"></phase-gate>

The data-if attribute can be specified together with the data-phi attribute. 

<phase-gate data-phi="π/2" data-if="p"></phase-gate>

If the gate is connected to another gates, the position of the if label will be adjusted automatically.

User Help Popup

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

Phase Gate

Applies a phase of eiφ to the |1⟩ state.

Default φ = π/2 

<phase-gate>
  <header>
    <h1>Phase Gate</h1>
    <p>
      Applies a phase of e<sup>iφ</sup> to the |<span class="font-mono">1</span>⟩ state.
    </p>
    <p>
      Default φ = π/2
    </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>
      <phase-gate data-phi="π/2" data-size="sm"></phase-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>
      <phase-gate data-phi="π/2" data-size="sm"></phase-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 data-magnitudes="0,1" data-phases="0,90"></circle-notation>
  </div>

  <div class="mt-4 mb-2 flex flex-row items-center space-x-1">
    <circle-notation data-magnitudes="0.9,0.4" data-phases="340,70"></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>
      <phase-gate data-phi="π/2" data-size="sm"></phase-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 data-magnitudes="0.9,0.4" data-phases="340,160"></circle-notation>
  </div>
</phase-gate>

Drag and Drop

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

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