Sidebar
Use the sidebar to fly out a pane for viewing or editing details. Usefule for online documentation as well.
Getting Started
<button class="btn btn-primary" @onclick="() => OpenPanel(PanelPosition.Right, PanelSize.Small)">Open Panel Right</button>
<button class="btn btn-primary" @onclick="() => OpenPanel(PanelPosition.Left, PanelSize.Small)">Open Panel Left</button>
<button class="btn btn-primary" @onclick="() => OpenPanel(PanelPosition.Right, PanelSize.Medium)">Open Panel Medium</button>
<button class="btn btn-primary" @onclick="() => OpenPanel(PanelPosition.Right, PanelSize.Large)">Open Panel Large</button>
<button class="btn btn-primary" @onclick="() => OpenPanel(PanelPosition.Right, PanelSize.ExtraLarge)">Open Panel Extra </button>
<Panel @ref="Panel" Title="Panel Demo" PanelSize="@PanelSize" PanelPosition="@PanelPosition">
<h5>Hello!</h5>
<p>
Put any content you want in here.
</p>
<div class="form-group mb-3">
<label class="form-label" for="name">Name</label>
<input class="form-control" id="name" />
<label class="form-label" for="address">Address</label>
<input class="form-control" id="address" />
</div>
<div class="card mb-3">
<div class="card-body">
<h5 class="card-title">Special title treatment</h5>
<p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
<a href="#" class="btn btn-primary">Go somewhere</a>
</div>
</div>
<figure class="figure">
<img src="images/orbs.jpg" class="figure-img img-fluid rounded" alt="ponderous orbs">
<figcaption class="figure-caption">Some orbs for you to ponder.</figcaption>
</figure>
<div class="btn-group mt-auto" role="group" aria-label="Modal Options">
<div class="btn btn-primary" @onclick="Panel!.ClosePane">Cancel</div>
<button class="btn btn-outline-primary" type="submit" @onclick="Panel!.ClosePane">Save</button>
</div>
</Panel>
@code {
private Panel Panel { get; set; } = default!;
private PanelPosition PanelPosition { get; set; } = PanelPosition.Right;
private PanelSize PanelSize { get; set; } = PanelSize.Small;
private async Task OpenPanel(PanelPosition panelPosition, PanelSize panelSize)
{
PanelPosition = panelPosition;
PanelSize = panelSize;
await Panel.OpenPane();
}
}
