npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

@farris/ui-wizard

v0.0.29

Published

This library was generated with [Angular CLI](https://github.com/angular/angular-cli) version 7.2.0.

Downloads

42

Readme

Wizard

This library was generated with Angular CLI version 7.2.0.

Code scaffolding

Run ng generate component component-name --project wizard to generate a new component. You can also use ng generate directive|pipe|service|class|guard|interface|enum|module --project wizard.

Note: Don't forget to add --project wizard or else it will be added to the default project in your angular.json file.

Build

Run ng build wizard to build the project. The build artifacts will be stored in the dist/ directory.

Publishing

After building your library with ng build wizard, go to the dist folder cd dist/wizard and run npm publish.

Running unit tests

Run ng test wizard to execute the unit tests via Karma.

Further help

To get more help on the Angular CLI use ng help or go check out the Angular CLI README.

扩展结构

  1. <ng-template wizardHeader> 头部区域
  2. ng-template wizardStep> 自定义步骤条样式区域
  3. <wizard-page></wizard-page>

参数

  1. pageId 唯一标识

事件

  1. stateChange 页面状态变化时触发事件 {state:'', fromPageId:'', toPageId:''}
  2. pageSelected page页面发生变化时 相应事件 接受参数为 {pageId:,state:}

属性

  1. stepClickable 步骤条是否可以点击 默认false
  2. fill 是否撑满父节点 默认false
  3. currentPageId 默认显示页面对应的pageId
  4. progressData 步骤条数据信息
  5. stepDirection 步骤条方向 默认 竖向 vertical 可选 横向horizontal
  6. stepPosition 步骤条摆放位置 默认None 可选参数默认PageLeft、Top、HeaderRight
  7. storedIndex 是否记录当前向导步骤
  8. storedIndexState 是否记录当前向导步骤及状态

注意点

  1. 用到该组件地方 fill为true 该组件父节点需要有高度 并且带有f-template-wizard-fill 类名 来定义内部flex布局方式

page页面结构

<wizard-page-detail>

扩展结构

<ng-template wizardPageHeader> 头部、 <ng-template wizardPageContent> 内容部分、 <ng-template wizardPageFooter> footer区域

事件

  1. pagedetailSelected 当前页面被显示时监听 {pageId: , state: }

方法

  1. getPageData 获取当前页数据
  2. setPageData 更新当页数据
  3. nextStep 下一步
  4. prevStep 上一步
  5. finishWizard 结束向导
  6. cancelWizard 取消向导

传输数据方式


@ViewChild() detailPage

constructor(private wizardSer: WizardService) {
    this.wizardSer.getWizardData().subscribe(data => {
        this.enableBegin = data.selectUnitValue !== '';
    });
}

this.detailPage.setPageData(this.pageData);

WizardService 服务 使用

import { WizardService} from '@farris/ui-wizard'
constructor(private wizardSer: WizardService)
//获取整个向导通用的数据
this.wizardSer.getWizardData()
//设置整个向导通用的数据
this.wizardSer.setWizardData({})
//获取向导状态变化
this.wizardSer.getWizardState()

//更新某步骤条数据
this.wizardSer.updateProgressData()
//获取步骤条数据
this.wizardSer.getProgressData()