Ionic - API

放在前面：ionic3中文api

1.操作表：ActionSheetController

2:格 
（1）垂直对齐：

a.通过向行row中添加不同的属性，可以将所有列垂直对齐

align-items-start/align-items-center/align-items-center/

<ion-row align-items-start>
...
<ion-col>
      4 of 4 
    </ion-col>
  </ion-row>

• 1
• 2
• 3
• 4
• 5
• 6

b.通过将对齐属性直接添加到列col，列也可以与其他列的方式不同 
align-self-start/align-self-center/align-self-end

<ion-row>
    <ion-col align-self-start>
      <div>
        1 of 4
      </div>
    </ion-col>
  </ion-row>

• 1
• 2
• 3
• 4
• 5
• 6
• 7

（2）水平对齐： 
通过向行中添加不同的属性，所有列可以在行内水平对齐 
justify-content-start/center/end/around/between

<ion-row justify-content-start>
    <ion-col col-3>
      1 of 2
    </ion-col>
    <ion-col col-3>
      2 of 2
    </ion-col>
  </ion-row>

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8

（3）自定义网格 
可以通过Sass变量修改网格列数及其填充数。 
$grid-columns：用于生成每个列的宽度（以百分比表示）。

grid−padding−width：用于对电网的填充，同时grid−padding−width：用于对电网的填充，同时grid-padding-widths允许特定断点值宽度在跨越均匀划分padding-left和 padding-right以及padding-top和padding-bottom网格和列

$grid-columns:               12 !default;

$grid-padding-width:         10px !default;

$grid-padding-widths: (
  xs: $grid-padding-width,
  sm: $grid-padding-width,
  md: $grid-padding-width,
  lg: $grid-padding-width,
  xl: $grid-padding-width
) !default;

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10
• 11

（4）网格层 
要自定义断点及其值，请覆盖 grid−breakpoints和grid−breakpoints和grid-max-widths

$grid-breakpoints: (
  sm: 0,
  md: 768px,
  lg: 1024px
);

$grid-max-widths: (
  sm: 420px,
  md: 720px,
  lg: 960px
);

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10
• 11

3.触觉：Haptic 
设备上的触觉引擎交互

4.图：ion-img 
一个页面在可滚动区域内可能存在数百甚至数千个图像 
注意：ion-img仅用于虚拟滚动内部使用

5.物品放置

属性 描述 
item-start 
放置在所有其他元素的左侧，在内部项目之外。如复选框 
item-end 
放在内部项目内部的所有其他元素的右侧，在输入包装器之外。如无线电和切换

item-content 
放置ion-label在输入包装内的任何内部的右侧。如Select， Input，TextArea，DateTime和 Range。

6.虚拟滚动：[virtualScroll] 
给该virtualScroll属性的数据必须是一个数组。*virtualItem需要具有该属性的项目模板virtualScrol；

记录数组将传递给包含数据的虚拟滚动条来创建模板，为每个记录创建的模板（称为单元格）可以由项目，页眉和页脚组成：

基础：