Add IsVisible Binding to OffCanvas #84

buist-sharris · 2022-08-10T12:18:54Z

It could greatly simplify the use of the offcanvas if rather than needing a reference to it so one can call ShowAsync() and HideAsync(), if it an "IsVisible" property that could be bound. Behind the scenes, in the setter, it could call Show/Hide.

Some simple pseudo code to demonstrate.

<togglebutton IsSelected="@Model.IsShowingCanvas" />

<blazorbootstrap.offcanvas IsVisible="@Model.IsShowingCanvas"  />

private bool _isVisible;

[Parameter] public bool IsVisible
    {
        get => _isVisible;
        set
        {
            if (value == _isVisible)
            {
                return;
            }

            _isVisible = value;

            if (value)
            {
                ShowAsync();
            }
            else
            {
                HideAsync();
            }
        }
    }
    
public Task ShowAsync() {
    _isVisible = true;
    //rest of code
}   

public Task HideAsync() {
    _isVisible = false;
    //rest of code
}

gvreddy04 · 2022-09-05T05:04:22Z

@buist-sharris

 if (value)
{
  ShowAsync();
 }
else
{
  HideAsync();
}

Instead of calling ShowAsync and HideAsync to update the flag, call offcanvas?.ShowAsync() and offcanvas?.HideAsync().

Example:

<Offcanvas @ref="offcanvas" 
           title="Offcanvas">    
   <BodyTemplate>
      <div>Some text as placeholder. In real life you can have the elements you have chosen. Like, text, images, lists, etc.</div>
      <div class="dropdown mt-3">
      <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-bs-toggle="dropdown">Dropdown button</button>
      <ul class="dropdown-menu" aria-labelledby="dropdownMenuButton">
          <li><a class="dropdown-item" href="#">Action</a></li>
          <li><a class="dropdown-item" href="#">Another action</a></li>
          <li><a class="dropdown-item" href="#">Something else here</a></li>
      </ul>
      </div>
      <div class="mt-3">
           <Button Color="ButtonColor.Primary" @onclick="OnHideOffcanvasClick">Hide Offcanvas</Button>
      </div>
   </BodyTemplate>
</Offcanvas>

<Button Color="ButtonColor.Primary" @onclick="OnShowOffcanvasClick">Show offcanvas</Button>

@code {
    private Offcanvas offcanvas;

    private async Task OnShowOffcanvasClick()
    {
        await offcanvas?.ShowAsync();
    }

    private async Task OnHideOffcanvasClick()
    {
        await offcanvas?.HideAsync();
    }
}

Demo: https://demos.getblazorbootstrap.com/offcanvas#examples

gvreddy04 closed this as completed Sep 5, 2022

gvreddy04 self-assigned this Sep 5, 2022

gvreddy04 added the area-offcanvas label Sep 5, 2022

mhspelt mentioned this issue Sep 24, 2024

Offcanvas #888

Open

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Add IsVisible Binding to OffCanvas #84

Add IsVisible Binding to OffCanvas #84

buist-sharris commented Aug 10, 2022 •

edited

Loading

gvreddy04 commented Sep 5, 2022

Add IsVisible Binding to OffCanvas #84

Add IsVisible Binding to OffCanvas #84

Comments

buist-sharris commented Aug 10, 2022 • edited Loading

gvreddy04 commented Sep 5, 2022

buist-sharris commented Aug 10, 2022 •

edited

Loading