This component can help you organize information that lends itself to viewing hierarchicaly.
The d2l-hierarchical-view component uses the d2l-hierarchical-view-mixin for nesting components.
<script type="module">
import { css, html,LitElement } from 'lit';
import '@brightspace-ui/core/components/button/button.js';
import '@brightspace-ui/core/components/hierarchical-view/hierarchical-view.js';
class TestHierarchicalView extends LitElement {
constructor() {
super();
this.showSubView = this.showSubView.bind(this);
this.showParentView = this.showParentView.bind(this);
}
// <!-- docs: start hidden content -->
static get styles() {
return [css`
#view1 {
width: 100%;
}
.view {
height:100%;
min-height: 200px;
}
.layout > * {
margin: 0;
}
.buttons {
height: 60px;
}
.buttons > .left {
float: left;
}
.buttons > .right {
float: right;
}
d2l-button {
margin: 5px;
}
h1 {
margin: 0;
}
.position-display {
height: 150px;
margin-top: 15px;
display: flex;
vertical-align: middle;
}
.col {
height: 100px;
justify-content: center;
display: flex;
flex-direction: column;
}
.block {
height: 20px;
width: 100px;
padding: 10px;
text-align: center;
line-height: 20px;
}
.selected {
border: 1px solid grey;
}
.position-display {
display: flex;
justify-content: space-evenly;
}`];
}
// <!-- docs: end hidden content -->
showSubView(id) {
const view = this.shadowRoot.getElementById(id);
view.show();
}
showParentView(id) {
const view = this.shadowRoot.getElementById(id);
view.hide();
}
render() {
return html`
<d2l-hierarchical-view id="view1">
<div class="view view1">
<div class="buttons">
<d2l-button id="btn-view-2b" class="right" @click=${() => this.showSubView('view2b')}>View 2b</d2l-button>
<d2l-button id="btn-view-2a" class="right" @click=${() => this.showSubView('view2a')}>View 2a</d2l-button>
</div>
<h1>View 1</h1>
<!-- docs: start hidden content -->
<div class="position-display">
<div class="col col1">
<div class="block selected">View 1</div>
</div>
<div class="col col2">
<div class="block">View 2a</div>
<div class="block">View 2b</div>
</div>
<div class="col col3">
<div class="block">View 3</div>
<div class="block"></div>
<div class="block"></div>
<div class="block"></div>
</div>
</div>
</div>
<!-- docs: end hidden content -->
<d2l-hierarchical-view id="view2a">
<div class="view view2a">
<div class="buttons">
<d2l-button id="btn-parent-view-2a" class="left" @click=${() => this.showParentView('view2a')}>View 1 (parent)</d2l-button>
<d2l-button id="btn-view-3" class="right" @click=${() => this.showSubView('view3')}>View 3</d2l-button>
</div>
<h1>View 2A</h1>
<!-- docs: start hidden content -->
<div class="position-display">
<div class="col col1">
<div class="block ">View 1</div>
</div>
<div class="col col2">
<div class="block selected">View 2a</div>
<div class="block">View 2b</div>
</div>
<div class="col col3">
<div class="block">View 3</div>
<div class="block"></div>
<div class="block"></div>
<div class="block"></div>
</div>
</div>
</div>
<!-- docs: end hidden content -->
<d2l-hierarchical-view id="view3">
<div class="view view3">
<div class="buttons">
<d2l-button id="btn-parent-view-3" class="left" @click=${() => this.showParentView('view3')}>View 2a (parent)</d2l-button>
</div>
<h1>View 3</h1>
<!-- docs: start hidden content -->
<div class="position-display">
<div class="col col1">
<div class="block">View 1</div>
</div>
<div class="col col2">
<div class="block">View 2a</div>
<div class="block">View 2b</div>
</div>
<div class="col col3">
<div class="block selected">View 3</div>
<div class="block"></div>
<div class="block"></div>
<div class="block"></div>
</div>
</div>
</div>
<!-- docs: end hidden content -->
</d2l-hierarchical-view>
</d2l-hierarchical-view>
<d2l-hierarchical-view id="view2b">
<div class="view view2b">
<div class="buttons">
<d2l-button id="btn-parent-view-2b" class="left" @click=${() => this.showParentView('view2b')}>View 1 (parent)</d2l-button>
</div>
<h1>View 2b</h1>
<!-- docs: start hidden content -->
<div class="position-display">
<div class="col col1">
<div class="block ">View 1</div>
</div>
<div class="col col2">
<div class="block">View 2a</div>
<div class="block selected">View 2b</div>
</div>
<div class="col col3">
<div class="block">View 3</div>
<div class="block"></div>
<div class="block"></div>
<div class="block"></div>
</div>
</div>
<!-- docs: end hidden content -->
</div>
</d2l-hierarchical-view>
</div>
</div>
</d2l-hierarchical-view>`;
}
}
customElements.define('d2l-test-hierarchical', TestHierarchicalView);
</script>
<d2l-test-hierarchical></d2l-test-hierarchical>This mixin allows for nested views within components. To use, apply the mixin and add the d2l-hierarchical-view-content class to the hierarchical content in your component. Apply the hierarchical styles by including super.styles in your styles getter.
import { HierarchicalViewMixin } from '@brightspace-ui/core/components/hierarchical-view/hierarchical-view-mixin.js';
class MyComponent extends HierarchicalViewMixin(LitElement) {
static get styles() {
return [ super.styles, css`
:host {
display: inline-block;
}
`];
}
render() {
return html`
<div class="d2l-hierarchical-view-content">
<slot></slot>
</div>
`;
}
}show: to show child, hiding the parent (e.g.,child.show())hide: to hide child, showing the parent (e.g.,child.hide())getActiveView: get the currently active hierarchical viewgetRootView: get the root hierarchical viewisActive: whether the specified hierarchical view is the active viewresize: force resize of the hierarchical view (useful if initially not displayed when attached)
d2l-hierarchical-view-show-start: dispatched when child view will be shown (before animation begins)d2l-hierarchical-view-show-complete: dispatched when child view is shown (when animation ends)d2l-hierarchical-view-hide-start: dispatched when child view will be hidden (before animation begins)d2l-hierarchical-view-hide-complete: dispatched when child view is hidden (when animation ends)