bitwarden/browser
1
0
Fork 0
mirror of https://github.com/bitwarden/browser synced 2025-12-19 09:43:23 +00:00
Code Issues Releases Wiki Activity

[EC 456] Component Library Content Switching Tabs (#3452)

Browse Source 
* [EC-456] Rename bitTabItem -> bitTab

* [EC-456] Use templateRefs or text for tab label content

* [EC-456] Add bit-tab-nav-bar component

* [EC-456] Finish content tab switching and nav tabs

* [EC-456] Undo accidental eslintrc.json change

* [EC-456] Fix directive/component selector naming convention

* [EC-456] Cleanup unnecessary InjectionTokens and simplify template label property

* [EC-456] Cleanup one more unnecessary InjectionToken

* [EC-456] Cleanup tab styles to better match Figma. Add internal tab header component for styling header background according to Figma.

* [EC-456] Add sub-folders for nav, content, and shared tab components/directives

* [EC-456] Code/style cleanup

* [EC-456] Remove underscore from protected members

* [EC-456] Cleanup tab stories and forgotten any type.

* [EC-456] Fix dark theme story tab content text color

* [EC-456] Add missing padding to tab header

* [EC-456] Add tab content padding to align with tab headers

* [EC-456] Move bottom tab border to header to span entire content area

* [EC-456] Force text-main tab label color

* [EC-456] Undo text-main change
This commit is contained in:
Shane Melton
2022-09-26 14:41:51 -07:00
committed by GitHub
parent e8936eb4c6
commit debaef2941
21 changed files with 653 additions and 112 deletions
Download Patch File Download Diff File Expand all files Collapse all files

45
libs/components/src/tabs/tab-group/tab-body.component.ts Normal file
View File

@@ -0,0 +1,45 @@
import { TemplatePortal } from "@angular/cdk/portal";
import { Component, HostBinding, Input } from "@angular/core";
@Component({
selector: "bit-tab-body",
templateUrl: "tab-body.component.html",
})
export class TabBodyComponent {
private _firstRender: boolean;
@Input() content: TemplatePortal;
@Input() preserveContent = false;
@HostBinding("attr.hidden") get hidden() {
return !this.active || null;
}
@Input()
get active() {
return this._active;
}
set active(value: boolean) {
this._active = value;
if (this._active) {
this._firstRender = true;
}
}
private _active: boolean;
/**
* The tab content to render.
* Inactive tabs that have never been rendered/active do not have their
* content rendered by default for performance. If `preserveContent` is `true`
* then the content persists after the first time content is rendered.
*/
get tabContent() {
if (this.active) {
return this.content;
}
if (this.preserveContent && this._firstRender) {
return this.content;
}
return null;
}
}