ng-yochia-ui v0.1.20

NgYochiaUi

个人使用的AngularUI合集。

初期开发，无测试用例，请不要在正式工程使用。

Do not use this package in your release project.

##使用方法 请在需要用到的Module中import对应组件的module：

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    FormsModule,
    
    YochiaAlertModule,
    YochiaCarouselModule,
    YochiaCheckboxModule,
    YochiaNavigatorModule,
    YochiaPhotoPickerModule,
    YochiaProgressHudModule,
    YochiaSelectModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})

##YochiaAlertComponent - 提醒框组件

<yochia-alert [alertData]="alertData"></yochia-alert>

• alertData为提醒数据

YochiaAlertData - 提醒数据

• title为提醒标题，可选
• message为提醒文本内容，可选
• imageSrc为图片url，可选
• animated决定是否渐入渐出
• coverLayer决定背景是否变黑
• actions为按钮列表，类型为YochiaAlertAction[]

YochiaAlertAction - 提醒按钮

• title为按钮标题，必传
• block为按钮回调，可选
• important为是否标红

##YochiaProgressHudComponent - HUD组件

<yochia-progress-hud [hudData]="progressHUDData"></yochia-progress-hud>

• hudData为HUD数据

###YochiaProgressHudData - HUD数据

• message为HUD文字，可选
• isIndicatorShown决定是否需要菊花，不传默认展示
• timeInterval持续时间，超时自动消失，可选
• animated是否渐入渐出
• coverLayer背景是否变黑

##YochiaNavigatorComponent - 导航栏组件

<yochia-navigator [title]="navigatorTitle"
                      [titleColor]="navigatorTitleColor"
                      [itemColor]="navigatorItemColor"
                      [backgroundColor]="navigatorBackgroundColor"
                      [floating]="navigatorFloating"
                      [leftActions]="navigatorLeftActions"
                      [rightActions]="navigatorRightActions"
                      [leftDrawerActions]="navigatorLeftDrawerAction"
                      [rightDrawerActions]="navigatorRightDrawerAction">
</yochia-navigator>

• title为导航栏标题，超出的文字展示省略号
• titleColor为导航栏标题颜色，若不指定则根据背景色明度计算
• itemColor为导航物件颜色，若不指定则根据背景色明度计算
• backgroundColor为导航栏背景色
• floating为是否滞留在页面顶部
• leftActions与rightActions分别为导航栏左侧与右侧的按钮，类型为YochiaNavigatorAction[]
• 若宽度不足且该侧按钮数量大于1，该侧的按钮将变为默认抽屉按钮。点击将展示抽屉，所有按钮全部放置于抽屉中
• leftDrawerAction与rightDrawerAction用于自定义抽屉按钮。

###YochiaNavigatorAction - 导航栏物件

• title为标题
• imageSrc为图片url
• block为回调

##YochiaCheckboxComponent - 选择框组件

<yochia-checkbox [(value)]="navigatorFloating"></yochia-checkbox>

• 传入value，可双向绑定；
• 支持id、required、disabledAttribute；
• checkedColor、uncheckedColor、disabledColor为选中、不选中、不可用的颜色，可不传。

##YochiaOptionPickerComponent - 弹出选择组件

<yochia-option-picker [data]="selectData"
                      [(selectedIndex)]="selectedIndex"
                      [optionKeyName]="'text'"
                      [title]="selectTitle"
                      [pickerTitle]="selectPickerTitle"
                      [disabled]="false"
                      [animated]="true">
</yochia-option-picker>

• data为选项数据列表；
• selectedIndex选中项的index，可双向绑定；
• optionKeyName指定data中每个单位的用于展示的属性名，默认为"title"；
• title与pickerTitle分别为未选中时显示的标题、弹出框的标题，默认为"请选择"；
• selectedMarkSrc为选中项右边的标记图片的url，不传则改为选中项背景色变化；
• disabled控制是否禁用，默认为false。
• animated控制是否动画弹出。

##YochiaCarouselComponent - 自滚动展示组件

<yochia-carousel [data]="carouselData"
                     [delay]="carouselDelay"
                     [(cIndex)]="carouselIndex"
                     [scrolling]="carouselScrolling"></yochia-carousel>

• data为项目列表
• delay为单项目持续时间
• cIndex为当前展示的index
• scrolling为是否自动滚动
• 若光标进入组件，不滚动

###YochiaCarouselItem - 单个展示

• imageSrc为图片链接
• title为展示标题
• href与target请按照的方式使用
• lazyLoad为true则懒加载，默认为false

##YochiaPhotoCapture - 摄像头照相组件

通过设备的摄像头获取相片。

<yochia-photo-capture [imageWidth]="captureResultWidth"
                          [imageHeight]="captureResultHeight"
                          [imageQuality]="captureQuality"
                          [inlineCapture]="true"
                          [switchButtonIcon]="xxx/xxx.jpg"
                          [disabled]='false'
                          (imageResult)="captureResult = $event">
</yochia-photo-capture>

• imageWidth为结果图片宽度
• imageHeight为结果图片高度
• imageQuality为结果图片质量，传入0~1
• switchButtonIcon为切换摄像头按钮图片地址
• inlineCapture控制是否支持行内摄像，默认true。（使用getUserMedia系列API，使用前请了解其特性。）
• imageResult为返回的结果图片base64数据（dataUrl）
• disabled控制禁用用户交互，默认为false

##YochiaLayout - 遮罩组件

在网页上生成一个遮罩层，掩盖整个视窗。

<yochia-layer [animated]="layerAnimated"
              [shown]="layerShown"
              (click)="onClickLayer($event)">
</yochia-layer>

• animated控制是否淡入淡出
• bashown控制是否展示
• click为点击回调