https://github.com/asv2001/mat-named-tabs
https://github.com/asv2001/mat-named-tabs
angular angular-material-design angular2 angular4 angular5 angular6 angular7 material-design mattab mattabgroup selectedid selectedindex selectedname selectedtab selectedtabid selectedtabname
Last synced: 3 months ago
JSON representation
- Host: GitHub
- URL: https://github.com/asv2001/mat-named-tabs
- Owner: asv2001
- License: mit
- Created: 2019-01-26T09:23:37.000Z (over 6 years ago)
- Default Branch: master
- Last Pushed: 2020-02-13T10:26:30.000Z (over 5 years ago)
- Last Synced: 2025-02-14T14:42:20.698Z (4 months ago)
- Topics: angular, angular-material-design, angular2, angular4, angular5, angular6, angular7, material-design, mattab, mattabgroup, selectedid, selectedindex, selectedname, selectedtab, selectedtabid, selectedtabname
- Language: JavaScript
- Size: 12.7 KB
- Stars: 0
- Watchers: 2
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# Angular material design named tabs
A tiny module that enables tab selection by id within Angular 2+ and Material Design. This module adds support of the directives with attribute selectors `selectedTabName` and `tabName`. You can also to listen to a `selectedTabNameChange`-event that will be triggered upon tab switch. Please see the example below.
## Example
### Module file:
```
import { MatNamedTabsModule } from "mat-named-tabs";
@NgModule({
imports: [
...
MatNamedTabsModule,
...
],
})
export class SomeModule {
}
```
### Component file:
```
import { Component, Input } from "@angular/core";
@Component({
selector: "example-tabs",
templateUrl: "./example-tabs.component.html",
})
export class TableDetailsComponent {
@Input()
public tab = "integer-nec";
public handleTabChange(tab: string): void {
console.log(`Tab selected: ${tab}`);
}
}
```
### HTML-template file:
```
Active tab: {{tab}}
Two-way binding
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam a metus orci. Quisque sodales imperdiet nisi lobortis interdum. Vivamus ullamcorper metus at justo mattis, nec venenatis leo condimentum. Maecenas tincidunt placerat dapibus. Phasellus iaculis eros eget magna tincidunt, vitae tincidunt velit finibus. Quisque porta luctus enim vitae auctor. Maecenas porttitor, arcu sit amet blandit placerat, nibh lorem convallis ex, vel condimentum lectus nibh eu dui. Nunc porttitor lobortis velit, et molestie risus venenatis quis. Mauris ornare pellentesque arcu nec interdum. Suspendisse nec felis magna. Pellentesque finibus ex eu egestas dapibus. Proin dictum ultricies metus at fringilla. Donec lacinia congue ipsum ut pulvinar. Mauris ac justo commodo, pretium sem vitae, cursus elit.
Integer nec hendrerit nulla. Nam eu lacus congue, malesuada metus et, suscipit velit. Nam eget nulla nec tellus eleifend efficitur sed et neque. Etiam venenatis orci felis, ut porttitor felis elementum sit amet. Etiam tempus leo sed tempor fermentum. Vestibulum ac sagittis tellus. Mauris vestibulum dolor finibus dolor sagittis, ut gravida arcu pretium. Cras egestas tristique aliquet. Sed vel augue finibus, egestas sapien non, rutrum neque. Sed tellus dui, imperdiet eget imperdiet molestie, tincidunt ut dolor. Quisque at efficitur mauris, in feugiat massa. Aenean blandit condimentum lobortis.
Sed nisl diam, condimentum scelerisque sem nec, viverra interdum risus. Fusce vulputate enim ex, et dapibus erat posuere quis. Proin non rhoncus quam. Sed vestibulum purus sit amet tempor laoreet. Phasellus varius sollicitudin dictum. Donec sollicitudin efficitur nunc et varius. Nunc neque elit, ultrices at eros eu, ultrices imperdiet erat.
One-way binding
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam a metus orci. Quisque sodales imperdiet nisi lobortis interdum. Vivamus ullamcorper metus at justo mattis, nec venenatis leo condimentum. Maecenas tincidunt placerat dapibus. Phasellus iaculis eros eget magna tincidunt, vitae tincidunt velit finibus. Quisque porta luctus enim vitae auctor. Maecenas porttitor, arcu sit amet blandit placerat, nibh lorem convallis ex, vel condimentum lectus nibh eu dui. Nunc porttitor lobortis velit, et molestie risus venenatis quis. Mauris ornare pellentesque arcu nec interdum. Suspendisse nec felis magna. Pellentesque finibus ex eu egestas dapibus. Proin dictum ultricies metus at fringilla. Donec lacinia congue ipsum ut pulvinar. Mauris ac justo commodo, pretium sem vitae, cursus elit.
Integer nec hendrerit nulla. Nam eu lacus congue, malesuada metus et, suscipit velit. Nam eget nulla nec tellus eleifend efficitur sed et neque. Etiam venenatis orci felis, ut porttitor felis elementum sit amet. Etiam tempus leo sed tempor fermentum. Vestibulum ac sagittis tellus. Mauris vestibulum dolor finibus dolor sagittis, ut gravida arcu pretium. Cras egestas tristique aliquet. Sed vel augue finibus, egestas sapien non, rutrum neque. Sed tellus dui, imperdiet eget imperdiet molestie, tincidunt ut dolor. Quisque at efficitur mauris, in feugiat massa. Aenean blandit condimentum lobortis.
Sed nisl diam, condimentum scelerisque sem nec, viverra interdum risus. Fusce vulputate enim ex, et dapibus erat posuere quis. Proin non rhoncus quam. Sed vestibulum purus sit amet tempor laoreet. Phasellus varius sollicitudin dictum. Donec sollicitudin efficitur nunc et varius. Nunc neque elit, ultrices at eros eu, ultrices imperdiet erat.
```