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