Toolbelt.Blazor.SplitContainer icon indicating copy to clipboard operation
Toolbelt.Blazor.SplitContainer copied to clipboard

Published 20 hours ago • verified publisher icon jsakamoto

How to use?

Open StevenTCramer opened this issue 2 years ago • 3 comments
trafficstars 

dotnet new blazorserver -n SplitterTest
cd .\SplitterTest\
dotnet add package Toolbelt.Blazor.SplitContainer

Add the following to _Imports.razor

@using Toolbelt.Blazor.Splitter

Change Pages/Index.razor to

@page "/"

<SplitContainer @bind-FirstPaneSize="_PaneSize">

    <FirstPane>
        <h1>Hello</h1>
    </FirstPane>

    <SecondPane>
        <h1>World</h1>
    </SecondPane>

</SplitContainer>

@code {
    private int _PaneSize = 80;
}

dotnet run

result looks like

image

StevenTCramer avatar Feb 08 '23 08:02 StevenTCramer

The reason why you get such a result is there is no styling for those components. The SplitContainer is just a container component, so you have to take all responsibility for its appearance, such as size, border color and style, background color, etc.

For example, if you add the CSS styles below to the end of the wwwroot/css/site.css file:


.split-container {
    width: 100%;
    height: 320px;
}

.spliter-bar {
    background-color: blueviolet;
}

.pane-of-split-container {
    display: flex;
    justify-content: center;
    align-items: center;
    border: dashed 2px blueviolet;
}

Then, you will see the result in the following screenshot.

movie-001

That's all.

jsakamoto avatar Feb 08 '23 13:02 jsakamoto 

dotnet new blazorserver-empty -n SplitterTest
cd .\SplitterTest\
dotnet add package Toolbelt.Blazor.SplitContainer

Change Pages/Index.razor to

@page "/"
@using Toolbelt.Blazor.Splitter
<SplitContainer @bind-FirstPaneSize="_PaneSize">

    <FirstPane>
        <h1>Hello</h1>
    </FirstPane>

    <SecondPane>
        <h1>World</h1>
    </SecondPane>

</SplitContainer>
<style>
  .split-container {
      width: 100%;
      height: 320px;
  }

  .spliter-bar {
      background-color: blueviolet;
  }

  .pane-of-split-container {
      display: flex;
      justify-content: center;
      align-items: center;
      border: dashed 2px blueviolet;
  }
</style>
@code {
    private int _PaneSize = 80;
}

dotnet run

result looks like

image

So what does it take if I want to start from empty template?

StevenTCramer avatar Feb 19 '23 16:02 StevenTCramer

@StevenTCramer Sorry too late. This package assumes that the application uses Blazor's CSS isolation by default. Usually, this pre-requirement is appropriate. However, unfortunately, Blazor projects made by the "empty" project template are not configured for CSS isolation. Therefore you should include the CSS file of this package by yourself in that scenario.

Specifically, you should include the bundled CSS file for the project, like the following code,

<!DOCTYPE html>
<html lang="en">
<head>
    ...
    <!-- 👇 Add this line. -->
    <link href="SplitterTest.styles.css" rel="stylesheet" />
    ....

or the CSS file for this package individually, like the following code.

<!DOCTYPE html>
<html lang="en">
<head>
    ...
    <!-- 👇 Add this line. -->
    <link href="_content/Toolbelt.Blazor.SplitContainer/Toolbelt.Blazor.SplitContainer.bundle.scp.css"
        rel="stylesheet" />
    ...

See also: https://learn.microsoft.com/aspnet/core/blazor/components/css-isolation

jsakamoto avatar Mar 21 '23 23:03 jsakamoto