Powered by GitBook

复选框

`ion-checkbox`

复选框是基于模式的简单组件。它可以放置在离子物品中或用作独立复选框。

有关表单和输入的更多信息，请参阅“Angular 2 文档”。

使用

<ion-list>

  <ion-item>
    <ion-label>Pepperoni</ion-label>
    <ion-checkbox [(ngModel)]="pepperoni"></ion-checkbox>
  </ion-item>

  <ion-item>
    <ion-label>Sausage</ion-label>
    <ion-checkbox [(ngModel)]="sausage" disabled="true"></ion-checkbox>
  </ion-item>

  <ion-item>
    <ion-label>Mushrooms</ion-label>
    <ion-checkbox [(ngModel)]="mushrooms"></ion-checkbox>
  </ion-item>

</ion-list>

效果：

输入属性

属性	类型	详情
checked	`boolean`	If true, the element is selected.
disabled	`boolean`	If true, the user cannot interact with this element.

输出事件

属性	详情
ionChange	Emitted when the checkbox value changes.

Sass 变量

iOS

属性	默认值	描述
`$checkbox-ios-background-color-off`	`$list-ios-background-color`	Background color of the checkbox when off
`$checkbox-ios-background-color-on`	`color($colors-ios, primary)`	Background color of the checkbox when on
`$checkbox-ios-icon-size`	`21px`	Size of the checkbox icon
`$checkbox-ios-icon-border-color-off`	`$list-ios-border-color`	Border color of the checkbox icon when off
`$checkbox-ios-icon-border-color-on`	`$checkbox-ios-background-color-on`	Border color of the checkbox icon when on
`$checkbox-ios-icon-border-width`	`1px`	Border width of the checkbox icon
`$checkbox-ios-icon-border-style`	`solid`	Border style of the checkbox icon
`$checkbox-ios-icon-border-radius`	`50%`	Border radius of the checkbox icon
`$checkbox-ios-icon-checkmark-width`	`1px`	Width of the checkbox icon checkmark
`$checkbox-ios-icon-checkmark-style`	`solid`	Style of the checkbox icon checkmark
`$checkbox-ios-icon-checkmark-color`	`color-contrast($colors-ios, $checkbox-ios-background-color-on)`	Color of the checkbox icon checkmark
`$checkbox-ios-disabled-opacity`	`.3`	Opacity of the disabled checkbox
`$checkbox-ios-item-left-margin`	`$item-ios-padding-media-top $item-ios-padding-right $item-ios-padding-media-bottom 2px`	Margin of the left checkbox item
`$checkbox-ios-item-right-margin`	`10px 8px 9px 0`	Margin of the right checkbox item

Material Design

属性	默认值	描述
`$checkbox-md-border-bottom-width`	`1px`	Border bottom width of the checkbox
`$checkbox-md-border-bottom-style`	`solid`	Border bottom style of the checkbox
`$checkbox-md-border-bottom-color`	`$list-md-border-color`	Border bottom color of the checkbox
`$checkbox-md-padding`	`$item-md-padding-top ($item-md-padding-right / 2) $item-md-padding-bottom 0`	Padding of the checkbox
`$checkbox-md-margin`	`0`	Margin of the checkbox
`$checkbox-md-disabled-opacity`	`.3`	Opacity of the disabled checkbox
`$checkbox-md-icon-background-color-off`	`$list-md-background-color`	Background color of the checkbox icon when off
`$checkbox-md-icon-background-color-on`	`color($colors-md, primary)`	Background color of the checkbox icon when on
`$checkbox-md-icon-size`	`16px`	Size of the checkbox icon
`$checkbox-md-icon-checkmark-width`	`2px`	Width of the checkbox icon checkmark
`$checkbox-md-icon-checkmark-style`	`solid`	Style of the checkbox icon checkmark
`$checkbox-md-icon-checkmark-color`	`color-contrast($colors-md, $checkbox-md-icon-background-color-on)`	Color of the checkbox icon checkmark
`$checkbox-md-icon-border-width`	`2px`	Border width of the checkbox icon
`$checkbox-md-icon-border-style`	`solid`	Border style of the checkbox icon
`$checkbox-md-icon-border-radius`	`2px`	Border radius of the checkbox icon
`$checkbox-md-icon-border-color-off`	`darken($list-md-border-color, 40%)`	Border color of the checkbox icon when off
`$checkbox-md-icon-border-color-on`	`color($colors-md, primary)`	Border color of the checkbox icon when on
`$checkbox-md-transition-duration`	`280ms`	Transition duration of the checkbox
`$checkbox-md-transition-easing`	`cubic-bezier(.4, 0, .2, 1)`	Transition easing of the checkbox
`$checkbox-md-item-left-margin`	`$item-md-padding-media-top 36px $item-md-padding-media-bottom 4px`	Margin of the left checkbox item
`$checkbox-md-item-right-margin`	`11px 10px 10px 0`	Margin of the right checkbox item

Windows Platform

属性	默认值	描述
`$checkbox-wp-border-bottom-width`	`1px`	Border bottom width of the checkbox
`$checkbox-wp-border-bottom-style`	`solid`	Border bottom style of the checkbox
`$checkbox-wp-border-bottom-color`	`$list-wp-border-color`	Border bottom color of the checkbox
`$checkbox-wp-padding`	`$item-wp-padding-top ($item-wp-padding-right / 2) $item-wp-padding-bottom 0`	Padding of the checkbox
`$checkbox-wp-margin`	`0`	Margin of the checkbox
`$checkbox-wp-disabled-opacity`	`.3`	Opacity of the disabled checkbox
`$checkbox-wp-icon-background-color-off`	`$list-wp-background-color`	Background color of the checkbox icon when off
`$checkbox-wp-icon-background-color-on`	`color($colors-wp, primary)`	Background color of the checkbox icon when on
`$checkbox-wp-icon-size`	`16px`	Size of the checkbox icon
`$checkbox-wp-icon-checkmark-width`	`1px`	Width of the checkbox icon checkmark
`$checkbox-wp-icon-checkmark-style`	`solid`	Style of the checkbox icon checkmark
`$checkbox-wp-icon-checkmark-color`	`color-contrast($colors-wp, $checkbox-wp-icon-background-color-on)`	Color of the checkbox icon checkmark
`$checkbox-wp-icon-border-width`	`2px`	Border width of the checkbox icon
`$checkbox-wp-icon-border-style`	`solid`	Border style of the checkbox icon
`$checkbox-wp-icon-border-radius`	`0`	Border radius of the checkbox icon
`$checkbox-wp-icon-border-color-off`	`#333`	Border color of the checkbox icon when off
`$checkbox-wp-icon-border-color-on`	`color($colors-wp, primary)`	Border color of the checkbox icon when on
`$checkbox-wp-item-left-margin`	`$item-wp-padding-media-top $item-wp-padding-right $item-wp-padding-media-bottom 4px`	Margin of the left checkbox item
`$checkbox-wp-item-right-margin`	`11px 10px 10px 0`	Margin of the right checkbox item

相关

复选框组件文档

results matching ""

No results matching ""