javascript/ionic-framework
1
0
Fork 0
mirror of https://github.com/ionic-team/ionic-framework.git synced 2025-08-18 03:00:58 +08:00
Code Issues Packages Projects Releases Wiki Activity

feat(checkbox): add --checkmark-width variable (#19933)

Browse Source 
resolves #16803

Co-authored-by: Liam DeBeasi <liamdebeasi@users.noreply.github.com>
This commit is contained in:
Alex Arvanitidis
2020-01-03 18:20:04 +01:00
committed by Liam DeBeasi
parent 9318d2418e
commit c32a7bcd20
5 changed files with 11 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
core/api.txt
View File

@ -225,6 +225,7 @@ ion-checkbox,css-prop,--border-radius
ion-checkbox,css-prop,--border-style ion-checkbox,css-prop,--border-style
ion-checkbox,css-prop,--border-width ion-checkbox,css-prop,--border-width
ion-checkbox,css-prop,--checkmark-color ion-checkbox,css-prop,--checkmark-color
ion-checkbox,css-prop,--checkmark-width
ion-checkbox,css-prop,--size ion-checkbox,css-prop,--size
ion-checkbox,css-prop,--transition ion-checkbox,css-prop,--transition

2
core/src/components/checkbox/checkbox.md.scss
View File

@ -10,6 +10,7 @@
--border-width: #{$checkbox-md-icon-border-width}; --border-width: #{$checkbox-md-icon-border-width};
--border-style: #{$checkbox-md-icon-border-style}; --border-style: #{$checkbox-md-icon-border-style};
--border-color: #{$checkbox-md-icon-border-color-off}; --border-color: #{$checkbox-md-icon-border-color-off};
--checkmark-width: 3;
// Background // Background
--background: #{$checkbox-md-icon-background-color-off}; --background: #{$checkbox-md-icon-background-color-off};
@ -27,7 +28,6 @@
.checkbox-icon path { .checkbox-icon path {
stroke-dasharray: 30; stroke-dasharray: 30;
stroke-dashoffset: 30; stroke-dashoffset: 30;
stroke-width: 3;
} }
// Material Design Checkbox: Checked / Indeterminate // Material Design Checkbox: Checked / Indeterminate

4
core/src/components/checkbox/checkbox.scss
View File

@ -19,10 +19,12 @@
* @prop --transition: Transition of the checkbox icon * @prop --transition: Transition of the checkbox icon
* *
* @prop --checkmark-color: Color of the checkbox checkmark when checked * @prop --checkmark-color: Color of the checkbox checkmark when checked
* @prop --checkmark-width: Stroke width of the checkbox checkmark
*/ */
--background-checked: #{ion-color(primary, base)}; --background-checked: #{ion-color(primary, base)};
--border-color-checked: #{ion-color(primary, base)}; --border-color-checked: #{ion-color(primary, base)};
--checkmark-color: #{ion-color(primary, contrast)}; --checkmark-color: #{ion-color(primary, contrast)};
--checkmark-width: 1;
--transition: none; --transition: none;
display: inline-block; display: inline-block;
@ -65,7 +67,7 @@ button {
.checkbox-icon path { .checkbox-icon path {
fill: none; fill: none;
stroke: var(--checkmark-color); stroke: var(--checkmark-color);
stroke-width: 1; stroke-width: var(--checkmark-width);
opacity: 0; opacity: 0;
} }

1
core/src/components/checkbox/readme.md
View File

@ -218,6 +218,7 @@ export const CheckboxExample: React.FC = () => (
| `--border-style` | Border style of the checkbox icon | | `--border-style` | Border style of the checkbox icon |
| `--border-width` | Border width of the checkbox icon | | `--border-width` | Border width of the checkbox icon |
| `--checkmark-color` | Color of the checkbox checkmark when checked | | `--checkmark-color` | Color of the checkbox checkmark when checked |
| `--checkmark-width` | Stroke width of the checkbox checkmark |
| `--size` | Size of the checkbox icon | | `--size` | Size of the checkbox icon |
| `--transition` | Transition of the checkbox icon | | `--transition` | Transition of the checkbox icon |

5
core/src/components/checkbox/test/basic/index.html
View File

@ -76,6 +76,11 @@
<ion-checkbox checked color="dark" slot="start" style="--size: 100px;"></ion-checkbox> <ion-checkbox checked color="dark" slot="start" style="--size: 100px;"></ion-checkbox>
</ion-item> </ion-item>
<ion-item>
<ion-label>Checkmark width</ion-label>
<ion-checkbox checked color="dark" slot="start" style="--checkmark-width: 7;"></ion-checkbox>
</ion-item>
<ion-item> <ion-item>
<ion-label>Unchecked by Default</ion-label> <ion-label>Unchecked by Default</ion-label>
<ion-checkbox></ion-checkbox> <ion-checkbox></ion-checkbox>