skills/angular__angular
1
0
Fork 0
mirror of https://github.com/angular/angular.git synced 2026-09-14 13:54:52 +08:00
Code Issues Packages Projects Releases Wiki Activity

feat(aio): display code-tabs in a Material Design "card" (#24027)

Browse Source 
This helps to connect the "content" of the tab to its label.

Closes #23985

PR Close #24027
This commit is contained in:
Pete Bacon Darwin
2018-05-21 12:55:22 +01:00
committed by Matias Niemelä
parent 96a0e131bf
commit ddd6124802
3 changed files with 31 additions and 18 deletions
Download Patch File Download Diff File Expand all files Collapse all files
aio/src/app/custom-elements/code/code-tabs.component.ts
+16 -14
View File
@@ -25,20 +25,22 @@ export interface TabInfo {
<!-- Use content projection so that the provided HTML's code-panes can be split into tabs -->
<div #content style="display: none"><ng-content></ng-content></div>
<mat-tab-group class="code-tab-group" disableRipple>
<mat-tab style="overflow-y: hidden;" *ngFor="let tab of tabs">
<ng-template mat-tab-label>
<span class="{{ tab.class }}">{{ tab.title }}</span>
</ng-template>
<aio-code class="{{ tab.class }}"
[language]="tab.language"
[linenums]="tab.linenums"
[path]="tab.path"
[region]="tab.region"
[title]="tab.title">
</aio-code>
</mat-tab>
</mat-tab-group>
<mat-card>
<mat-tab-group class="code-tab-group" disableRipple>
<mat-tab style="overflow-y: hidden;" *ngFor="let tab of tabs">
<ng-template mat-tab-label>
<span class="{{ tab.class }}">{{ tab.title }}</span>
</ng-template>
<aio-code class="{{ tab.class }}"
[language]="tab.language"
[linenums]="tab.linenums"
[path]="tab.path"
[region]="tab.region"
[title]="tab.title">
</aio-code>
</mat-tab>
</mat-tab-group>
</mat-card>
`,
})
export class CodeTabsComponent implements OnInit, AfterViewInit {
aio/src/app/custom-elements/code/code-tabs.module.ts
+2 -2
View File
@@ -1,12 +1,12 @@
import { NgModule, Type } from '@angular/core';
import { CommonModule } from '@angular/common';
import { CodeTabsComponent } from './code-tabs.component';
import { MatTabsModule } from '@angular/material';
import { MatCardModule, MatTabsModule } from '@angular/material';
import { CodeModule } from './code.module';
import { WithCustomElementComponent } from '../element-registry';
@NgModule({
imports: [ CommonModule, MatTabsModule, CodeModule ],
imports: [ CommonModule, MatCardModule, MatTabsModule, CodeModule ],
declarations: [ CodeTabsComponent ],
exports: [ CodeTabsComponent ],
entryComponents: [ CodeTabsComponent ]