JarCasting
JarCasting JarCasting

angular-ui-tab-scroll

WebJar for angular-ui-tab-scroll

License

License

MIT
Categories

Categories

Angular User Interface Web Frameworks
GroupId

GroupId

org.webjars.bower
ArtifactId

ArtifactId

angular-ui-tab-scroll
Last Version

Last Version

2.2.3
Release Date

Release Date
Type

Type

jar
Description

Description

angular-ui-tab-scroll
WebJar for angular-ui-tab-scroll
Project URL

Project URL

http://webjars.org
Source Code Management

Source Code Management

https://github.com/VersifitTechnologies/angular-ui-tab-scroll

Download angular-ui-tab-scroll

Filename Size
angular-ui-tab-scroll-2.2.3.pom
angular-ui-tab-scroll-2.2.3.jar 16 KB
angular-ui-tab-scroll-2.2.3-sources.jar 22 bytes
angular-ui-tab-scroll-2.2.3-javadoc.jar 22 bytes
Browse

How to add to project

<!-- https://jarcasting.com/artifacts/org.webjars.bower/angular-ui-tab-scroll/ -->
<dependency>
    <groupId>org.webjars.bower</groupId>
    <artifactId>angular-ui-tab-scroll</artifactId>
    <version>2.2.3</version>
</dependency>
// https://jarcasting.com/artifacts/org.webjars.bower/angular-ui-tab-scroll/
implementation 'org.webjars.bower:angular-ui-tab-scroll:2.2.3'
// https://jarcasting.com/artifacts/org.webjars.bower/angular-ui-tab-scroll/
implementation ("org.webjars.bower:angular-ui-tab-scroll:2.2.3")
'org.webjars.bower:angular-ui-tab-scroll:jar:2.2.3'
<dependency org="org.webjars.bower" name="angular-ui-tab-scroll" rev="2.2.3">
  <artifact name="angular-ui-tab-scroll" type="jar" />
</dependency>
@Grapes(
@Grab(group='org.webjars.bower', module='angular-ui-tab-scroll', version='2.2.3')
)
libraryDependencies += "org.webjars.bower" % "angular-ui-tab-scroll" % "2.2.3"
[org.webjars.bower/angular-ui-tab-scroll "2.2.3"]

Dependencies

compile (3)

Group / Artifact Type Version
org.webjars.bower : bootstrap jar [3.1.1,)
org.webjars.bower : angular jar [1.4.6,)
org.webjars.bower : angular-bootstrap jar [0.14.0,)

Project Modules

There are no modules declared in this project.

angular-ui-tab-scroll

A scrollable tab plugin intended for scrolling UI Bootstrap tabset.

Here is a working demo : http://plnkr.co/edit/YJNDaQ?p=preview

npm version npm downloads License

Usage

  • Include angular-ui-tab-scroll.js and angular-ui-tab-scroll.css in your page.
  • Add ui.tab.scroll to your angular module dependencies.
  • Wrap your <tabset> inside of <scrollable-tabset>, like so:
<scrollable-tabset show-tooltips="true">
	<tabset>
		<tab ng-repeat="x in tabs">...</tab>
	</tabset>
</scrollable-tabset>

Attributes

  • show-drop-down - 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.
  • show-tooltips - whether or not to show tooltips on the scroll buttons. default is true.
  • tooltip-left-placement - which tooltip direction to use for the left button tooltip (bottom, top, left, right). default is right.
  • tooltip-right-placement - which tooltip direction to use for the right button tooltip (bottom, top, left, right). default is left.
  • scroll-by - the amount of pixels to offset upon each scroll. default is 50.
  • auto-recalculate - whether or not to watch the tabs collection for changes to initiate a re-calculation. default is false. important! see warning below
  • drop-down-header-template-url - set custom header 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:

<scrollable-tabset show-tooltips="true"
	               tooltip-left-placement="bottom"
	               scroll-by="150">
	<tabset>
		<tab ng-repeat="x in tabs">...</tab>
	</tabset>
</scrollable-tabset>

Or, they can be configured globally for all your scrollable-tabset directives, by using the scrollableTabsetConfigProvider, in the config section of your app.

Example:

angular.module('yourApp', [])
	.config(['scrollableTabsetConfigProvider', function(scrollableTabsetConfigProvider){
		scrollableTabsetConfigProvider.setShowTooltips(false);
		scrollableTabsetConfigProvider.setScrollBy('20');
		//...set other properties here
	}]);

This way, you can keep the directive usage simple and consistent across all your html.

Important Notes:

  • Use auto-recalculate 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.

Styling

you can use the default style by referencing angular-ui-tab-scroll.css, or you can chose to use the alternative customized flat style by referencing the supplied angular-ui-tab-scroll-flat.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 angular-ui-tab-scroll-flat.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:

.right-nav-button:before{
  font-family: 'Glyphicons Halflings';
  content: '\e080';
}

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

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

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

Dependencies

  • AngularJS
  • UI Bootstrap
  • Bootstrap CSS
org.webjars.bower

Versifit Technologies LLC

Versions

Version
2.2.3