Angular 2指令来构建Web App Tours – angular2-joyride

Angular 2指令来构建Web App Tours – angular2-joyride
插件名称 ngx-joyride
发布时间 2020年5月25日
插件作者 tnicola

angular2-joyride指令可轻松引导您的用户浏览您的网站,向他们显示所有部分和功能。它完全用Angular编写,没有任何繁琐的外部依赖(如jquery或Bootstrap)。

安装:

# NPM
$ npm install angular2-joyride --save

使用:

1.使用joyrideStep指令标记HTML元素

 <h1 joyrideStep="firstStep" title="Page Title" text="Main title!">Text</h1>
<div joyrideStep="secondStep" title="Page Title" text="Main title!">Div content</div>

2.将导入到JoyrideModule您的AppModule中

@NgModule({
    declarations: [AppComponent],
    imports: [JoyrideModule.forRoot(), RouterModule.forRoot([]), BrowserModule],
    providers: [],
    bootstrap: [AppComponent]
})
export class AppModule {}

3.将注入JoyrideService您的Component并开始浏览,并传递步骤顺序列表

@Component({
    selector: 'app-component',
    templateUrl: './app.component.html'
})
export class AppComponent {
    constructor(private readonly joyrideService: JoyrideService) {}

    onClick() {
        this.joyrideService.startTour(
            { steps: ['firstStep', 'secondStep'] } // 您的步骤顺序
        );
    }
}

API参考


指令输入/输出

您可以将joyrideStep指令与以下输入配合使用:

@Input 需要 目的 值/类型
JoyrideStep 步骤名称,它应该是唯一的。 string
stepPosition 没有 绘制步骤的位置。 ‘top’, ‘right’, ‘bottom’, ‘left’, ‘center’
title 没有 步骤标题。 string
text 没有 步骤文本内容。 string
stepContent 没有 具有自定义内容的Angular模板。 TemplateRef <any>
stepContentParams 没有 使用Angular模板传递的数据对象 Object
prevTemplate 没有 具有自定义prev按钮的Angular模板。 TemplateRef <any>
nextTemplate 没有 具有自定义下一个按钮的Angular模板。 TemplateRef <any>
doneTemplate 没有 具有自定义完成按钮的Angular模板。 TemplateRef <any>
counterTemplate 没有 具有自定义计数器组件的Angular模板。 TemplateRef <any>
@Output 需要 目的
next No 单击“下一步”按钮时,它将触发一个事件。
prev No 单击“上一步”按钮时将触发一个事件。
done No 单击“完成”按钮或“关闭”并完成巡视时,将触发一个事件。

选项

名称 需要 目的 类型 默认值
steps 代表要显示的步骤名称的有序列表。例如steps: ['step1', 'header', 'interesting-table', 'navbar']。此选项对于多页导航特别有用。如果您的步骤不在根路径中,则应在步骤名称后用a @分隔符指示路由。例如:steps: ['firstStep', 'image@home', 'step4@about/you', 'user-avatar@user/details'] string[] none
startWith 没有 stour应该从其开始的步骤的名称(加上多页导航的路线)。 string undefined
waitingTime 没有 显示下一个/上一个步骤之前要等待的时间(以毫秒为单位)。 number 1个
stepDefaultPosition 没有 定义步骤默认位置。指令中设置的stepPositon会覆盖此值。 string bottom
themeColor 没有 背景,按钮和标题颜色。(十六进制值) string #3b5560
showCounter 没有 在左下角显示计数器。 boolean true
showPrevButton 没有 显示“上一个”按钮。 boolean true
logsEnabled 没有 启用日志以查看有关磁带库状态的信息。成功获取有意义的错误消息。 boolean false
customTexts 没有 下一个,上一个,完成按钮的自定义按钮文本。 Object { prev: 'prev', next: 'next', done: 'done'}

您可以更改每个元素步骤css,以覆盖默认样式。