How to use? - Githubissues

jsakamoto / Toolbelt.Blazor.SplitContainer

A Blazor component to create panes separated by a slidable splitter bar.

https://jsakamoto.github.io/Toolbelt.Blazor.SplitContainer/

Mozilla Public License 2.0

57 stars 6 forks source link

How to use? #4

Open StevenTCramer opened 1 year ago

StevenTCramer commented 1 year ago

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

jsakamoto commented 1 year ago

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.

StevenTCramer commented 1 year ago

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

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

jsakamoto commented 1 year ago

@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" />
    ...