honeymoose
/
angular-cn
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

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

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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

30
aio/src/app/custom-elements/code/code-tabs.component.ts
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 --> <!-- 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> <div #content style="display: none"><ng-content></ng-content></div>
<mat-tab-group class="code-tab-group" disableRipple> <mat-card>
<mat-tab style="overflow-y: hidden;" *ngFor="let tab of tabs"> <mat-tab-group class="code-tab-group" disableRipple>
<ng-template mat-tab-label> <mat-tab style="overflow-y: hidden;" *ngFor="let tab of tabs">
<span class="{{ tab.class }}">{{ tab.title }}</span> <ng-template mat-tab-label>
</ng-template> <span class="{{ tab.class }}">{{ tab.title }}</span>
<aio-code class="{{ tab.class }}" </ng-template>
[language]="tab.language" <aio-code class="{{ tab.class }}"
[linenums]="tab.linenums" [language]="tab.language"
[path]="tab.path" [linenums]="tab.linenums"
[region]="tab.region" [path]="tab.path"
[title]="tab.title"> [region]="tab.region"
</aio-code> [title]="tab.title">
</mat-tab> </aio-code>
</mat-tab-group> </mat-tab>
</mat-tab-group>
</mat-card>
`, `,
}) })
export class CodeTabsComponent implements OnInit, AfterViewInit { export class CodeTabsComponent implements OnInit, AfterViewInit {

4
aio/src/app/custom-elements/code/code-tabs.module.ts
View File

@ -1,12 +1,12 @@
import { NgModule, Type } from '@angular/core'; import { NgModule, Type } from '@angular/core';
import { CommonModule } from '@angular/common'; import { CommonModule } from '@angular/common';
import { CodeTabsComponent } from './code-tabs.component'; import { CodeTabsComponent } from './code-tabs.component';
import { MatTabsModule } from '@angular/material'; import { MatCardModule, MatTabsModule } from '@angular/material';
import { CodeModule } from './code.module'; import { CodeModule } from './code.module';
import { WithCustomElementComponent } from '../element-registry'; import { WithCustomElementComponent } from '../element-registry';
@NgModule({ @NgModule({
imports: [ CommonModule, MatTabsModule, CodeModule ], imports: [ CommonModule, MatCardModule, MatTabsModule, CodeModule ],
declarations: [ CodeTabsComponent ], declarations: [ CodeTabsComponent ],
exports: [ CodeTabsComponent ], exports: [ CodeTabsComponent ],
entryComponents: [ CodeTabsComponent ] entryComponents: [ CodeTabsComponent ]

15
aio/src/styles/2-modules/_code.scss
View File

@ -3,8 +3,9 @@ code-example, code-tabs {
display: block; display: block;
} }
code-example, code-example {
code-tabs mat-tab-body {
&:not(.no-box) { &:not(.no-box) {
background-color: rgba($backgroundgray, 0.2); background-color: rgba($backgroundgray, 0.2);
border: 0.5px solid $lightgray; border: 0.5px solid $lightgray;
@ -27,6 +28,16 @@ code-tabs mat-tab-body {
} }
} }
code-example, code-tabs {
.mat-card {
padding: 0;
border-radius: 5px;
}
code {
overflow: auto;
}
}
// TERMINAL / SHELL TEXT STYLES // TERMINAL / SHELL TEXT STYLES
code-example.code-shell, code-example[language=sh], code-example[language=bash] { code-example.code-shell, code-example[language=sh], code-example[language=bash] {