MudBlazor.Extensions 사용하기 - MudExSplitter

MudBlazor.Extensions 사용하기 - MudExSplitter

 

설치 및 설정은 아래 포스팅을 확인합니다.

2025.03.24 - [코딩/Blazor] - MudBlazor.Extensions 사용하기 - Dialog Drag

MudBlazor 에는 Splitter 가 없습니다.

기본적인거 같은데 없는개 많습니다. MudBlazor 로 확장 컨트롤을 만드 패키지들이 많이 나와있어서 다행입니다.

오늘은 MudExSplitter 컨트롤을 사용하는 방법을 알아봅니다.

 

MudExSplitPanel 을 이용하며 Left,Right 로 양쪽으로 나눠서 표현이 가능합니다.

Left,Right 에 MudExSplitPanelItem 을 정의하여 표시할 컨트롤을 배치하면 됩니다.

<MudExSplitPanel Style="width: 100%; height: 30vh">
    <Left>
        <MudExSplitPanelItem Style="width: 50%; min-width:350px; height: 50%; min-height:50px; background-color: lightblue">
            <center>Left part in MudExSplitPanel.</center>
        </MudExSplitPanelItem>
    </Left>
    <Right>
        <MudExSplitPanelItem Style="width: 50%; min-width:350px; height: 50%; min-height:50px; background-color: lightgreen">
            <center>Right part in MudExSplitPanel.</center>
        </MudExSplitPanelItem>
    </Right>
</MudExSplitPanel>

기본은 좌우로 나뉘나 ColumnLayout 을 false 로 하면 위아래로 나뉩니다.

<MudExSplitPanel Style="width: 100%; height: 30vh" ColumnLayout = "false">
    <Left>
        <MudExSplitPanelItem Style="width: 50%; min-width:350px; height: 50%; min-height:50px; background-color: lightblue">
            <center>Left part in MudExSplitPanel.</center>
        </MudExSplitPanelItem>
    </Left>
    <Right>
        <MudExSplitPanelItem Style="width: 50%; min-width:350px; height: 50%; min-height:50px; background-color: lightgreen">
            <center>Right part in MudExSplitPanel.</center>
        </MudExSplitPanelItem>
    </Right>
</MudExSplitPanel>