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

ngx-tab-scroll11

v0.0.3

Published

ngx-tab-scroll11 ===================== forked from ![rovico/ngx-tab-scroll](https://github.com/rovico/ngx-tab-scroll) to make it compitible with Angular 11, REMOVED ngbTabset as it was deprecated in newer version A scrollable tab plugin intended for scrol

Downloads

3

Readme

ngx-tab-scroll11

forked from rovico/ngx-tab-scroll to make it compitible with Angular 11, REMOVED ngbTabset as it was deprecated in newer version A scrollable tab plugin intended for scrolling UI Bootstrap tabset.

npm version npm downloads License

Installation

npm install [email protected]

or

yarn add [email protected]

Usage

  • Import preferred theme styles:

    /**
    ngx-tab-scroll
     */
    @import '~ngx-tab-scroll/tab-scroll-theme-flatten';
        

    OR

    /**
    ngx-tab-scroll
     */
    @import '~ngx-tab-scroll/tab-scroll-theme-bootstrap';
        

    And icons

    @import '~ngx-tab-scroll/tab-scroll-icons';
  • Import angular npm module:

    import { TabScrollModule } from 'ngx-tab-scroll';

    and in your @NgModule() decorator

    {
      ...,
      imports: [
        ...,
        TabScrollModule.forRoot({
          autoRecalculate: true,
          showDropDown: true,
          showTooltips: false,
          tooltipLeftPlacement: 'top',
          tooltipRightPlacement: 'top',
          scrollBy: 50,
          autoRecalculate: false,
          leftScrollAddition: 0
        }),
        ...
      ],
    }
  • Wrap your <ngb-tabset> inside of <ngx-tab-scroll>, like so:

<ngx-tab-scroll [showTooltips]="true">
	<ngb-tabset>
		<ngb-tab *ngFor="let x of tabs">...</ngb-tab>
	</ngb-tabset>
</scrollable-tabset>

Attributes

  • showDropDown - whether or not to show the drop-down for navigating the tabs, the drop-down reflects the selected tab and reflect if a tab is disabled. default is true.
  • showTooltips - whether or not to show tooltips on the scroll buttons. default is true.
  • tooltipLeftPlacement - which tooltip direction to use for the left button tooltip (bottom, top, left, right). default is right.
  • tooltipRightPlacement - which tooltip direction to use for the right button tooltip (bottom, top, left, right). default is left.
  • scrollBy - the amount of pixels to offset upon each scroll. default is 50.
  • autoRecalculate - whether or not to watch the tabs collection for changes to initiate a re-calculation. default is false. important! see warning below
  • dropDownHeaderTemplate - set custom header TemplateRef inside the drop-down. default is empty.

And additional attributes you can set on an individual tab:

  • data-tabScrollIgnore - if there is 'data-tabScrollIgnore="true"' on a tab than it will not be shown in the drop-down.
  • data-tabScrollHeading - put this on a tab and the value of it will be the text for this tab's tooltip and drop-down item.

Attributes can be directly set on each directive as DOM attributes

Example:

<ngx-tab-scroll [showTooltips]="true"
	              tooltipLeftPlacement="bottom"
	              [scrollBy]="150">
	<ngb-tabset>
		<ngb-tab *ngFor="let x of tabs">...</ngb-tab>
	</ngb-tabset>
</ngx-tab-scroll>

Or, they can be configured globally for all your ngx-tab-scroll components, by using the TabScrollConfigInterface, in the forRoot/forChild parameter. This way, you can keep the directive usage simple and consistent across all your html.

Important Notes:

  • Use autoRecalculate with caution! - when set to true a watcher is added to the collection of tabs, and watcher are costly on performance! it is better to call doRecalculate() when needed. use this option only on small applications.
  • When an option is both defined at directive level and at config level, the value specified in the DOM takes precedence over the one from the config!.

Api

there is an exposed api, with it you can call:

  • doRecalculate() - force a re-calculation of the scroll, this will calculate if the scroll buttons are needed and which to enable\disable. usually needed after a tabs are added or removed.
  • scrollTabIntoView() - scroll the selected tab into center of view. or if you want to scroll to a specific tab index:
  • scrollTabIntoView(number) - scroll the tab index into center of view.

Example:

export class AppComponent {

  @ViewChild(forwardRef(() => TabScrollComponent)) tabScroll: TabScrollComponent;

  tabs: {heading: string, content: string}[] = [];

  reCalcScroll() {
    this.tabScroll.api.doRecalculate();
  }

  scrollIntoView(n?: number) {
    this.tabScroll.api.scrollTabIntoView(n);
  }
}

Styling

you can use the default style by referencing tab-scroll-theme-bootstrap.css, or you can chose to use the alternative customized flat style by referencing the supplied tab-scroll-theme-flatten.css. both files are the result of a transpiled scss, which are also included in this package.

if you intend to have your own design i highly recommend you start with tab-scroll-theme-flatten.scss with it you can unleash the power of scss&css.

to change the icons on the buttons you simply need to override the relevant button's css with your own css

Example:

i[class^=ts-icon] {
  display: inline-block;
  width: 100%;
  margin-top: 10px;
  margin-left: 6px;
}
.ts-icon {
  &-chevron-left:before {
    content: url(data:image/svg+xml);
  }
  &-chevron-right:before {
    content: url(data:image/svg+xml);
  }
  &-chevron-down:before {
    content: url(data:image/svg+xml);
  }
  &-check:before {
    content: url(data:image/svg+xml);
  }
}

the drop-down can be given a class by using the dropDownClass property.

the drop-down menu can be given a class by using the dropDownMenuClass property.

the drop-down menu header can be given a class by using the dropDownHeaderClass property.

Dependencies

  • Angular7
  • Ngx Bootstrap
  • Bootstrap CSS