web/elements: add support for sidebar on table page
Signed-off-by: Jens Langhammer <jens.langhammer@beryju.org>
This commit is contained in:
parent
7d6e88061f
commit
103e723d8c
|
@ -4,6 +4,7 @@ import { ifDefined } from "lit/directives/if-defined.js";
|
||||||
|
|
||||||
import PFContent from "@patternfly/patternfly/components/Content/content.css";
|
import PFContent from "@patternfly/patternfly/components/Content/content.css";
|
||||||
import PFPage from "@patternfly/patternfly/components/Page/page.css";
|
import PFPage from "@patternfly/patternfly/components/Page/page.css";
|
||||||
|
import PFSidebar from "@patternfly/patternfly/components/Sidebar/sidebar.css";
|
||||||
|
|
||||||
import "../../elements/PageHeader";
|
import "../../elements/PageHeader";
|
||||||
import { Table } from "./Table";
|
import { Table } from "./Table";
|
||||||
|
@ -14,7 +15,15 @@ export abstract class TablePage<T> extends Table<T> {
|
||||||
abstract pageIcon(): string;
|
abstract pageIcon(): string;
|
||||||
|
|
||||||
static get styles(): CSSResult[] {
|
static get styles(): CSSResult[] {
|
||||||
return super.styles.concat(PFPage, PFContent);
|
return super.styles.concat(PFPage, PFContent, PFSidebar);
|
||||||
|
}
|
||||||
|
|
||||||
|
renderSidebarBefore(): TemplateResult {
|
||||||
|
return html``;
|
||||||
|
}
|
||||||
|
|
||||||
|
renderSidebarAfter(): TemplateResult {
|
||||||
|
return html``;
|
||||||
}
|
}
|
||||||
|
|
||||||
render(): TemplateResult {
|
render(): TemplateResult {
|
||||||
|
@ -25,7 +34,15 @@ export abstract class TablePage<T> extends Table<T> {
|
||||||
>
|
>
|
||||||
</ak-page-header>
|
</ak-page-header>
|
||||||
<section class="pf-c-page__main-section pf-m-no-padding-mobile">
|
<section class="pf-c-page__main-section pf-m-no-padding-mobile">
|
||||||
<div class="pf-c-card">${this.renderTable()}</div>
|
<div class="pf-c-sidebar pf-m-gutter">
|
||||||
|
<div class="pf-c-sidebar__main">
|
||||||
|
${this.renderSidebarBefore()}
|
||||||
|
<div class="pf-c-sidebar__content">
|
||||||
|
<div class="pf-c-card">${this.renderTable()}</div>
|
||||||
|
</div>
|
||||||
|
${this.renderSidebarAfter()}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
</section>`;
|
</section>`;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
Reference in New Issue