SplitView

ViewImports

@using TWyTec.Blazor

@addTagHelper *, TWyTec.Blazor.SplitView

---

TWyTec.Blazor.SplitView

Propertys

Parameter/Property	Value
SplitViewClass	CSS Class

---

TWyTec.Blazor.SplitViewPane

Propertys

Parameter/Property	Value
PaneClass	CSS Class
PaneMode	type of SplitViewPaneMode(enum)
PaneOpenLength	double
PaneCompactLength	double
IsPaneOpen	bool

Methodes

Methods	Description
void TogglePane()	Open or close Pane

TWyTec.Blazor.SplitViewPaneMode

• SplitViewPaneMode.Inline
• SplitViewPaneMode.CompactInline
• SplitViewPaneMode.Overlay
• SplitViewPaneMode.CompactOverlay

---

TWyTec.Blazor.SplitViewContent

Propertys

Parameter/Property	Value
ContentClass	CSS Class

---

HTML

<SplitView>
    <SplitViewPane PaneMode="SplitViewPaneMode.CompactInline" IsPaneOpen="false">
        <p>
            Pane content
        </p>
    </SplitViewPane>
    <SplitViewContent>
        <p>
            Text
        </p>
    </SplitViewContent>
</SplitView>

---

Default CSS Classes

.TWyTecSplitView {
    display: grid;
    grid-template-columns: auto auto;
    background-color: #2f2f2f;
}

.TWyTecSplitViewPane {
    grid-column: 1;
    height: 100vh;
    display: block;
    overflow-x: hidden;
    transition: max-width 0.3s;
}

.TWyTecSplitViewContent {
    grid-column: 2;
    padding: 10px;
}