mirror of
https://github.com/ionic-team/ionic-framework.git
synced 2025-08-20 04:14:21 +08:00
docs(): update usage and examples
This commit is contained in:
mhartington
@ -23,8 +23,7 @@ export class Checkbox implements CheckboxInput {
|
||||
@State() keyFocus = false;
|
||||
|
||||
/**
|
||||
* The color to use.
|
||||
* Default options are: `"primary"`, `"secondary"`, `"tertiary"`, `"success"`, `"warning"`, `"danger"`, `"light"`, `"medium"`, and `"dark"`.
|
||||
* The color to use for the checkbox.
|
||||
*/
|
||||
@Prop() color?: Color;
|
||||
|
||||
@ -50,7 +49,7 @@ export class Checkbox implements CheckboxInput {
|
||||
@Prop() disabled = false;
|
||||
|
||||
/**
|
||||
* the value of the checkbox.
|
||||
* The value of the checkbox.
|
||||
*/
|
||||
@Prop() value = 'on';
|
||||
|
||||
|
||||
@ -3,41 +3,6 @@
|
||||
Checkboxes allow the selection of multiple options from a set of options. They appear as checked (ticked) when activated. Clicking on a checkbox will toggle the `checked` property. They can also be checked programmatically by setting the `checked` property.
|
||||
|
||||
|
||||
```html
|
||||
<!-- Default Checkbox -->
|
||||
<ion-checkbox></ion-checkbox>
|
||||
|
||||
<!-- Disabled Checkbox -->
|
||||
<ion-checkbox disabled></ion-checkbox>
|
||||
|
||||
<!-- Checked Checkbox -->
|
||||
<ion-checkbox checked></ion-checkbox>
|
||||
|
||||
<!-- Checkbox Colors -->
|
||||
<ion-checkbox color="primary"></ion-checkbox>
|
||||
<ion-checkbox color="secondary"></ion-checkbox>
|
||||
<ion-checkbox color="danger"></ion-checkbox>
|
||||
<ion-checkbox color="light"></ion-checkbox>
|
||||
<ion-checkbox color="dark"></ion-checkbox>
|
||||
|
||||
<!-- Checkboxes in a List -->
|
||||
<ion-list>
|
||||
<ion-item>
|
||||
<ion-label>Pepperoni</ion-label>
|
||||
<ion-checkbox slot="end" value="pepperoni" checked></ion-checkbox>
|
||||
</ion-item>
|
||||
|
||||
<ion-item>
|
||||
<ion-label>Sausage</ion-label>
|
||||
<ion-checkbox slot="end" value="sausage" disabled></ion-checkbox>
|
||||
</ion-item>
|
||||
|
||||
<ion-item>
|
||||
<ion-label>Mushrooms</ion-label>
|
||||
<ion-checkbox slot="end" value="mushrooms"></ion-checkbox>
|
||||
</ion-item>
|
||||
</ion-list>
|
||||
```
|
||||
|
||||
|
||||
<!-- Auto Generated Below -->
|
||||
@ -56,8 +21,7 @@ If true, the checkbox is selected. Defaults to `false`.
|
||||
|
||||
string
|
||||
|
||||
The color to use.
|
||||
Default options are: `"primary"`, `"secondary"`, `"tertiary"`, `"success"`, `"warning"`, `"danger"`, `"light"`, `"medium"`, and `"dark"`.
|
||||
The color to use for the checkbox.
|
||||
|
||||
|
||||
#### disabled
|
||||
@ -86,7 +50,7 @@ The name of the control, which is submitted with the form data.
|
||||
|
||||
string
|
||||
|
||||
the value of the checkbox.
|
||||
The value of the checkbox.
|
||||
|
||||
|
||||
## Attributes
|
||||
@ -102,8 +66,7 @@ If true, the checkbox is selected. Defaults to `false`.
|
||||
|
||||
string
|
||||
|
||||
The color to use.
|
||||
Default options are: `"primary"`, `"secondary"`, `"tertiary"`, `"success"`, `"warning"`, `"danger"`, `"light"`, `"medium"`, and `"dark"`.
|
||||
The color to use for the checkbox.
|
||||
|
||||
|
||||
#### disabled
|
||||
@ -132,7 +95,7 @@ The name of the control, which is submitted with the form data.
|
||||
|
||||
string
|
||||
|
||||
the value of the checkbox.
|
||||
The value of the checkbox.
|
||||
|
||||
|
||||
## Events
|
||||
|
||||
42
core/src/components/checkbox/usage/angular.md
Normal file
42
core/src/components/checkbox/usage/angular.md
Normal file
@ -0,0 +1,42 @@
|
||||
```html
|
||||
<!-- Default Checkbox -->
|
||||
<ion-checkbox></ion-checkbox>
|
||||
|
||||
<!-- Disabled Checkbox -->
|
||||
<ion-checkbox disabled="true"></ion-checkbox>
|
||||
|
||||
<!-- Checked Checkbox -->
|
||||
<ion-checkbox checked="true"></ion-checkbox>
|
||||
|
||||
<!-- Checkbox Colors -->
|
||||
<ion-checkbox color="primary"></ion-checkbox>
|
||||
<ion-checkbox color="secondary"></ion-checkbox>
|
||||
<ion-checkbox color="danger"></ion-checkbox>
|
||||
<ion-checkbox color="light"></ion-checkbox>
|
||||
<ion-checkbox color="dark"></ion-checkbox>
|
||||
|
||||
<!-- Checkboxes in a List -->
|
||||
<ion-list>
|
||||
<ion-item *ngFor="let entry of form">
|
||||
<ion-label>{{entry.val}}</ion-label>
|
||||
<ion-checkbox slot="end" [(ngModel)]="entry.isChecked"></ion-checkbox>
|
||||
</ion-item>
|
||||
</ion-list>
|
||||
```
|
||||
|
||||
```typescript
|
||||
import { Component } from '@angular/core';
|
||||
|
||||
@Component({
|
||||
selector: 'app-page-home',
|
||||
templateUrl: 'home.page.html',
|
||||
styleUrls: ['home.page.scss']
|
||||
})
|
||||
export class HomePage {
|
||||
public form = [
|
||||
{ val: 'Pepperoni', isChecked: true },
|
||||
{ val: 'Sausage', isChecked: false },
|
||||
{ val: 'Mushroom', isChecked: false }
|
||||
];
|
||||
}
|
||||
```
|
||||
35
core/src/components/checkbox/usage/javascript.md
Normal file
35
core/src/components/checkbox/usage/javascript.md
Normal file
@ -0,0 +1,35 @@
|
||||
```html
|
||||
<!-- Default Checkbox -->
|
||||
<ion-checkbox></ion-checkbox>
|
||||
|
||||
<!-- Disabled Checkbox -->
|
||||
<ion-checkbox disabled></ion-checkbox>
|
||||
|
||||
<!-- Checked Checkbox -->
|
||||
<ion-checkbox checked></ion-checkbox>
|
||||
|
||||
<!-- Checkbox Colors -->
|
||||
<ion-checkbox color="primary"></ion-checkbox>
|
||||
<ion-checkbox color="secondary"></ion-checkbox>
|
||||
<ion-checkbox color="danger"></ion-checkbox>
|
||||
<ion-checkbox color="light"></ion-checkbox>
|
||||
<ion-checkbox color="dark"></ion-checkbox>
|
||||
|
||||
<!-- Checkboxes in a List -->
|
||||
<ion-list>
|
||||
<ion-item>
|
||||
<ion-label>Pepperoni</ion-label>
|
||||
<ion-checkbox slot="end" value="pepperoni" checked></ion-checkbox>
|
||||
</ion-item>
|
||||
|
||||
<ion-item>
|
||||
<ion-label>Sausage</ion-label>
|
||||
<ion-checkbox slot="end" value="sausage" disabled></ion-checkbox>
|
||||
</ion-item>
|
||||
|
||||
<ion-item>
|
||||
<ion-label>Mushrooms</ion-label>
|
||||
<ion-checkbox slot="end" value="mushrooms"></ion-checkbox>
|
||||
</ion-item>
|
||||
</ion-list>
|
||||
```
|
||||
Reference in New Issue
Block a user