Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

How to use? #4

Open
StevenTCramer opened this issue Feb 8, 2023 · 3 comments
Open

How to use? #4

StevenTCramer opened this issue Feb 8, 2023 · 3 comments

Comments

@StevenTCramer
Copy link
Contributor 

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
@jsakamoto
Copy link
Owner

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
Copy link
Contributor Author

StevenTCramer commented Feb 19, 2023 •
edited
Loading 

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?

@jsakamoto
Copy link
Owner

jsakamoto commented Mar 21, 2023 •
edited
Loading

@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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
2 participants
@jsakamoto @StevenTCramer