NativeScript NG2 Slides for iOS and Android -- 测试版

简介幻灯片示例

图片轮播示例

视频来自 NativeScript Slides 插件。可能并非所有功能都已实现。

视频由 Brad Martin 提供

示例用法

import { SlidesModule } from '@irman/nativescript-ng2-slides';

import { AppComponent } from "./app.component";

@NgModule({
    declarations: [AppComponent],
    bootstrap: [AppComponent],
    imports: [NativeScriptModule, SlidesModule],
    schemas: [NO_ERRORS_SCHEMA]
})
export class AppModule { }

XML

<slides>
    <slide class="slide-1">
        <Label text="This is Panel 1"></Label>
    </slide>
    <slide class="slide-2">
        <Label text="This is Panel 2"></Label>
    </slide>
    <slide class="slide-3">
        <Label text="This is Panel 3"></Label>
    </slide>
    <slide class="slide-4">
        <Label text="This is Panel 4"></Label>
    </slide>
    <slide class="slide-5">
        <Label text="This is Panel 5"></Label>
    </slide>
</slides>

CSS

.slide-1{
  background-color: darkslateblue;
}

.slide-2{
  background-color: darkcyan;
}
.slide-3{
  background-color: darkgreen;
}

.slide-4{
  background-color: darkgoldenrod;
}
.slide-5{
  background-color: darkslategray;
}
Label{
  text-align: center;
  width: 100%;
  font-size: 35;
  margin-top: 35;
	color: #fff;

}

非常适合用于图像轮播的简介/教程。

这是一个正在进行中的项目。请随时贡献。

SlideContainer 属性

• loop : boolean - 如果为 true，则幻灯片将形成一个无限循环。建议的使用案例是图像轮播或其他类似功能。

• pageIndicators : boolean - 如果为 true，则会在幻灯片的底部添加指示点。

指示器

如果 pageIndicators 属性为 true，则从 2.0.0 版本开始，您将立即看不到页面指示器。提供了两个 CSS 类，您可以根据需要设置活动和非活动指示器。以下是一个半透明点的示例。

.slide-indicator-inactive{
    background-color: #fff;
    opacity : 0.4;
    width : 10;
    height : 10;
    margin-left : 2.5;
    margin-right : 2.5;
    margin-top : 0;
    border-radius : 5;
}

.slide-indicator-active{
    background-color: #fff;
    opacity : 0.9;
    width : 10;
    height : 10;
    margin-left : 2.5;
    margin-right : 2.5;
    margin-top : 0;
    border-radius : 5;
}

插件开发工作流程

• 将仓库克隆到您的机器上。
• 运行 npm run setup 准备演示项目
• 使用 npm run build 构建
• 使用 npm run demo.android 或 npm run demo.ios 运行并部署到您的设备或模拟器

已知问题

• 可能很多...

贡献指南

贡献指南

许可证

MIT

适用于 {N} 版本 2.0.0+