-
Notifications
You must be signed in to change notification settings - Fork 4
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
[35317] Checkbox: Remove Sketch and Adobe XD references (en)
- Loading branch information
Showing
1 changed file
with
4 additions
and
4 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,7 +1,7 @@ | ||
| --- | ||
| title: Checkbox - Design System Component | ||
| _description: The Checkbox Component Symbol is used to allow the user to mark a selection. | ||
| _keywords: Design Systems, Design Systems UX, UI kit, Sketch, Ignite UI for Angular, Sketch to Angular, Sketch to Angular, Angular, Angular Design System, Export code from Sketch, Design Kits for Angular, Sketch HTML, Sketch to HTML, Sketch UI kits, Figma, Figma to Angular, Export code from Figma, Figma HTML, Figma to HTML, Figma UI kits | ||
| _keywords: Design Systems, Design Systems UX, UI kit, Figma, Ignite UI for Angular, Figma to Angular, Angular, Angular Design System, Export code from Figma, Design Kits for Angular, Figma HTML, Figma to HTML, Figma UI kits | ||
| --- | ||
|
|
||
| # Checkbox | ||
|
|
@@ -14,20 +14,20 @@ Use the Checkbox Component to allow the user make a selection, which most often | |
|
|
||
| ## Interaction State | ||
|
|
||
| The checkbox can be inserted in an Enabled or Disabled state. In Sketch and Adobe XD you should select the state prior to inserting the component. In Figma, you can additionally apply a single or a combination of the following properties: Hover, Focused and Invalid, which can be switched in the properties panel. | ||
| The checkbox can be inserted in an Enabled or Disabled state. In Figma, you can additionally apply a single or a combination of the following properties: Hover, Focused and Invalid, which can be switched in the properties panel. | ||
|
|
||
| <img class="responsive-img" src="../images/checkbox_interaction_state.png" srcset="../images/[email protected] 2x" /> | ||
|
|
||
| ## Layout Template | ||
|
|
||
| In Sketch, the Checkbox supports label position variants where the Checkbox label is placed after or before the Checkbox element. In Figma, you can change the label's position by using the "Label Position" property. In Adobe XD, we are using Stacks to allow you to change the label and checkbox positions at design time simply by dragging it to the left or right of the checkbox visual. | ||
| In Figma, you can change the label's position by using the "Label Position" property. | ||
|
|
||
| <img class="responsive-img" src="../images/checkbox_label_after.png" srcset="../images/[email protected] 2x" /> | ||
| <img class="responsive-img" src="../images/checkbox_label_before.png" srcset="../images/[email protected] 2x" /> | ||
|
|
||
| ## State | ||
|
|
||
| The Checkbox provides **On**, Off, and Indeterminate selection states. In Figma, you can switch the selection state using the "State" property from the properties panel. In Sketch this is achieved with `Symbol Overrides`, while in Adobe XD we are using the `Component States` paradigm to let you easily switch between states. | ||
| The Checkbox provides **On**, Off, and Indeterminate selection states. In Figma, you can switch the selection state using the "State" property from the properties panel. | ||
|
|
||
| <img class="responsive-img" src="../images/checkbox_selection.png" srcset="../images/[email protected] 2x" /> | ||
|
|
||
|
|
||