Swap Gate
Swaps the value of two qubits.
|
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-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 Swap gate using the data-size attribute.
<swap-gate data-size="xs"></swap-gate>
<swap-gate data-size="sm"></swap-gate>
<swap-gate data-size="base"></swap-gate>
<swap-gate data-size="lg"></swap-gate>
<swap-gate data-size="xl"></swap-gate>Disabled Gate
To display the disabled Swap gate, set the data-disabled attribute.
<swap-gate data-disabled></swap-gate>Connecting with Other Gates
To connect the Swap gate to the quantum gate of the lower bit, set the data-wire-top attribute.
Similarly, set data-wire-bottom for the upper bits.
<swap-gate data-wire-top></swap-gate>
<swap-gate data-wire-bottom></swap-gate>
<swap-gate data-wire-top data-wire-bottom></swap-gate>
<swap-gate data-wire-top-disabled></swap-gate>
<swap-gate data-wire-bottom-disabled></swap-gate>
<swap-gate data-wire-top-disabled data-wire-bottom-disabled></swap-gate>
To show disabled connections, use the data-wire-top-disabled and data-wire-bottom-disabled attributes.
<swap-gate data-wire-top-disabled></swap-gate>
<swap-gate data-wire-bottom-disabled></swap-gate>
<swap-gate data-wire-top-disabled data-wire-bottom-disabled></swap-gate>
<swap-gate data-wire-top-disabled data-disabled></swap-gate>
<swap-gate data-wire-bottom-disabled data-disabled></swap-gate>
<swap-gate data-wire-top-disabled data-wire-bottom-disabled data-disabled></swap-gate>User Help Popup
As a user help, you can display the description and usage of the Swap gate as a popup.
The popup will show on the mouse hover event.
The content to be displayed can be specified in the <swap-gate> tag as follows:
Swap Gate
Swap the values of two qubits.
(Place two in the same column.)
<swap-gate>
<header>
<h1>Swap Gate</h1>
<p>Swap the values of two qubits.</p>
<p>(Place two in the same column.)</p>
</header>
</swap-gate>Drag and Drop
To make the Swap gate drag-and-droppable, specify the data-drag-and-drop attribute.
<swap-gate data-drag-and-drop><swap-gate>