πŸ”” Alert..!! Get 2 Month Free Cloud Hosting With $200 Bonus From Digital Ocean ACTIVATE DEAL

An angular directive for simple tabs with animation.

Animation Plugins Tabs

Documentation

#Angular: simple tabs with animation


Eng

##About tabs is module for angular framework. Live demo

Requires

Includes

Directives

  • ng-tabs - area of ​​the container tabs
  • ng-tab-head - tab head
  • ng-tab-body - tab body

Scope

The ng-tabs directive creates a isolate scope. Variables of this scope:

tabs: {     index: {Number},  // current tab index     count: {Number}  // tabs count };

Example

<div ng-tabs>     <div ng-tab-head>First tab</div>     <div ng-tab-head="active">Second tab</div>     <div ng-tab-body>Content 1</div>     <div ng-tab-body="animation">Content 2</div> </div>

Sorry for my english : )


Rus

##About / О ΠΌΠΎΠ΄ΡƒΠ»Π΅ tabs - ΠΌΠΎΠ΄ΡƒΠ»ΡŒ Ρ‚Π°Π±ΠΎΠ² для Ρ„Ρ€Π΅ΠΉΠΌΠ²ΠΎΡ€ΠΊΠ° angular. Live demo

Requires / Π’Ρ€Π΅Π±ΡƒΠ΅Ρ‚

  • angularjs Ρ„Ρ€Π΅ΠΉΠΌΠ²ΠΎΡ€ΠΊ

Includes / Π’ΠΊΠ»ΡŽΡ‡Π°Π΅Ρ‚

Directives / Π”ΠΈΡ€Π΅ΠΊΡ‚ΠΈΠ²Ρ‹

  • ng-tabs - Π·Π°Π΄Π°Π΅Ρ‚ ΠΎΠ±Π»Π°ΡΡ‚ΡŒ ΠΊΠΎΠ½Ρ‚Π΅ΠΉΠ½Π΅Ρ€Π° Ρ‚Π°Π±ΠΎΠ²
  • ng-tab-head - Π³ΠΎΠ»ΠΎΠ²Π° Ρ‚Π°Π±Π°
  • ng-tab-body - Ρ‚Π΅Π»ΠΎ Ρ‚Π°Π±Π°

Scope / ΠžΠ±Π»Π°ΡΡ‚ΡŒ видимости

Π”ΠΈΡ€Π΅ΠΊΡ‚ΠΈΠ²Π° ng-tabs создаСт ΠΈΠ·ΠΎΠ»ΠΈΡ€ΠΎΠ²Π°Π½Π½ΡƒΡŽ ΠΎΠ±Π»Π°ΡΡ‚ΡŒ видимости, Π² ΠΊΠΎΡ‚ΠΎΡ€ΠΎΠΉ доступны ΠΏΠ΅Ρ€Π΅ΠΌΠ΅Π½Π½Ρ‹Π΅:

tabs: {     index: {Number},  // current tab index     count: {Number}  // tabs count };

Example / ΠŸΡ€ΠΈΠΌΠ΅Ρ€

<div ng-tabs>     <div ng-tab-head>First tab</div>     <div ng-tab-head="active">Second tab</div>     <div ng-tab-body>Content 1</div>     <div ng-tab-body="animation">Content 2</div> </div>

You May Also Like