chanan / blazorstrap Goto Github PK

View Code? Open in Web Editor NEW

906.0 29.0 156.0 330.79 MB

Bootstrap 4 Components for Blazor Framework

Home Page: https://blazorstrap.io

License: The Unlicense

C# 42.78% HTML 46.33% JavaScript 3.31% CSS 7.58%

blazor bootstrap4 bootstrap5

blazorstrap's Introduction

BlazorStrap

Bootstrap 4/5 components for Blazor

Bootstrap 5

We do not include bootstrap.min.css in the package. This already exists in the blazor wasm and blazor server side templates.

Packages

Core Package handles all the logic / JSInterop
Display packages. These packages so the rendered components. V5 is for Bootstrap 5. V4 is for Bootstrap 4
Pre Release
- Beta. Not recommended for production use.
  - Minor fixes a-z. Example 5.2.100-Beta1a
- Preview. Test to make sure it meets your requirements before production use.
  - Minor fixes a-z. Example 5.2.100-Preview1a
- Release. Safe for production.
  - Minor fixes .MMDDYY. Example 5.2.100.60323

Install

Blazor WebAssembly

- Download BlazorStrap package from nuget:
- Download BlazorStrap.V5 package from nuget:
  - Both packages should be the same version.
Modify your index.html with the following.
1. Inside the <head> add
  1. <link href="YourAssemblyName.styles.css" rel="stylesheet"> )
  2. <link href="path_to_bootstrap.min.css" rel="stylesheet" integrity="if_needed" />"
2. At the end of the <body> add
  1. <script src="_content/BlazorStrap/popper.min.js"></script>
  2. <script src="_content/BlazorStrap/blazorstrap.js"></script>
In Program.cs add
1. builder.Services.AddBlazorStrap();
In _Imports.razor add
1. @using BlazorStrap.V5

Blazor Server Side

- Download BlazorStrap package from nuget:
- Download BlazorStrap.V5 package from nuget:
  - Both packages should be the same version.
Modify your _host.cshtml with the following.
1. Inside the <head> add
  1. <link href="YourAssemblyName.styles.css" rel="stylesheet">
  2. <link href="path_to_bootstrap.min.css" rel="stylesheet" integrity="if_needed" />"
2. At the end of the <body> add
  1. <script src="_content/BlazorStrap/popper.min.js"></script>
  2. <script src="_content/BlazorStrap/blazorstrap.js"></script>
In Program.cs or Startup.cs add
1. Services.AddBlazorStrap(); to your build pipeline
In _Imports.razor add
1. @using BlazorStrap.V5

Bootstrap 4

We do not include bootstrap.min.css in the package. This already exists in the blazor wasm and blazor server side templates.

Install

Blazor WebAssembly

- Download BlazorStrap package from nuget:
- Download BlazorStrap.V4 package from nuget:
  - Both packages should be the same version.
Modify your index.html with the following.
1. Inside the <head> add
  1. <link href="YourAssemblyName.styles.css" rel="stylesheet"> )
  2. <link href="path_to_bootstrap.min.css" rel="stylesheet" integrity="if_needed" />"
2. At the end of the <body> add
  1. <script src="_content/BlazorStrap/popper.min.js"></script>
  2. <script src="_content/BlazorStrap/blazorstrap.js"></script>
In Program.cs add
1. builder.Services.AddBlazorStrap();
In _Imports.razor add
1. @using BlazorStrap.V4

Blazor Server Side

- Download BlazorStrap package from nuget:

Download BlazorStrap.V4 package from nuget:
- Both packages should be the same version.-

Modify your _host.cshtml with the following.
1. Inside the <head> add
  1. <link href="YourAssemblyName.styles.css" rel="stylesheet">
  2. <link href="path_to_bootstrap.min.css" rel="stylesheet" integrity="if_needed" />"
2. At the end of the <body> add
  1. <script src="_content/BlazorStrap/popper.min.js"></script>
  2. <script src="_content/BlazorStrap/blazorstrap.js"></script>
In Program.cs or Startup.cs add
1. Services.AddBlazorStrap(); to your build pipeline
In _Imports.razor add
1. @using BlazorStrap.V4

Extensions:

BlazorStrap.Extensions.FluentValidation
BlazorStrap.Extensions.TreeView

blazorstrap's People

Contributors

Stargazers

Watchers

Forkers

psvensso mysolisoft hungdluit fulviocanducci zyhong ebekker nj-db nheath99 goranhalvarsson thomas-westergard-scandinn-se pieceofsummer bad-influence fszakka emelhu chucker natbyre wirelessjeano qcjxberin webdiyer simbesh hawxy raihansazal fenggaoyao crashsol iglong anberm jacelu jbomhold3 peterblazejewicz hongkuancn cojegede woodste36 sepppenner endeffects tstivers1990 hungdluit90 itsseanbennett bimble zjxstjg herbertmilhomme laslavtchev grleachman cusi-dev anderjoy drasmith emax093 markzither chandusekhar jubayerarefin gitter-badger jiaxiang8756 bigham codyclay88 steveneco vagrantkm gander7 zbecknell notaclue toddforsberg jianzhichu bholland314 steveteece okusnadi pavelvsl tangallan blinard h080620 lanticee alexandredsimoes songpa slamj1 rafsanulhasan masterskriptor drakonoffnetforfork timbze olegoseev targserv jamesquox adriyian-ref fao001 arivera12 pelshen hedayatullahhoshmand hrsh 5118234 tabnoc autismpatient pitchpool-hub pankraty oo-simbo mark-at-tusksoft devknightlie ash-grennan farvashani irishkush markesss eugenekim fredrik0277 rickiswright xzar90

blazorstrap's Issues

Documentation site is broken

The documentation site, https://chanan.github.io/BlazorStrap/ results in the following in Chrome console:

WASM: The assembly mscorlib.dll was not found or could not be loaded.
blazor.webassembly.js:1 WASM: It should have been installed in the `/mnt/jenkins/workspace/test-mono-mainline-wasm/label/ubuntu-1804-amd64/sdks/out/wasm-runtime-release/lib/mono/4.5/mscorlib.dll' directory.

Displaying a modal when a page navigation occurs

I'd like to have a modal displayed when a page is the target of a navigation event. IE, if you navigate to page x that contains a component that is a modal I'd like to have that modal rendered in open mode.

The issue is that if you try to set IsOpen (presuming that is your member controlling the modal visibility) in OnAfterRender the modal does not display. If you simply place a button on page x that toggles the same member then the modal acts as expected. However the extra button press is what I am trying to avoid.

TabPane

Hi Chanan,

Thanks for your Blazorstrap work! I've just started trying it out, and am struggling to find a tab pane example for Navs. Is there one you can refer me to please?

Many thanks, Simon

Upgrade to preview6

This is in progress but ran into a few issues regarding events.

Question - How to actually use BlazorStrap with a Blazor Site

A dumb question most likely, but how do you actually use BlazorStrap with a Blazor site?

What are the steps for getting going?

Investigate using cascading values and parameters

BlazorInput value binding doesn't work

When using the BlazorInput tag you are unable to bind to the value.

<BlazorInput InputType="InputType.Text" Value="@Content" />
<BlazorInput InputType="InputType.Text" bind-Value="@Content" />

@functions {
    private string Content { get; set; }
}

0.9 compat

JSInterop.Current is gone; we need to use injection instead.
EventCallback also appears to break BlazorButton.

Can't upgrade to Blazor 0.4.0

https://github.com/aspnet/Blazor/issues/954

Upgrade to bootstrap 4.3

Installing 1.0.0-preview4 shows internal .razor files

After installing BlazorStrap 1.0.0-preview4, I can see every BlazorStrap component in my projet.

Repro Steps

Create a new Blazor Client Side App
Install BlazorStrap 1.0.0-preview4

BlazorInput two-way binding doesn't work

When using the BlazorInput tag you are unable to use two-way binding to the value.
Change text and press submit.

<BlazorInput InputType="InputType.Text" bind-Content="@Content" />@*Two-Way?*@
<input type="text" bind="@Content2" />
<BlazorButton Color="Color.Primary" OnClick="@Submit">Submit</BlazorButton>
@functions {
    private string Content { get; set; }
    private string Content2 { get; set; }
    async void Submit(UIMouseEventArgs e)
    {
        Console.WriteLine(Content);  // Not work
        Console.WriteLine(Content2); // Work
    }
}

Links in tooltips are clickable when invisible

When tooltip disappears, the invisible link is still clickable if you hover above its location.
Is there any better way of hiding the tooltips?

Reproduce with:

<Tooltip Target="div1" Placement="Placement.Bottom">
Text here. Text here. Text here. Text here.<br />
Text here. Text here. Text here. Text here.<br />
<a target="_blank" href="https://www.github.com/">Read more</a>.
</Tooltip>

Documentation bugs

Just a few notes on the documentation:

the h3 tags could do with a padding-top or margin-top, they are often up against the example of the previous section, which looks confusing?
alerts: the "Dismissing" example is not rendering?

Pass arguments to onclick method

Hi,

I was wondering if it is possible to pass one or more attributes to the onclick methods of the components.

Currently I'm not able to pass arguments. For example with the

<ListGroupItem OnClick="@onclick1" ...>

I'd like to use this:

<ListGroupItem OnClick="@(() => onclick(123))"....>

This code produces the following error:

Error CS1593 Delegate 'Action' does not take 0 arguments

This seems to be limited due to the UIMouseEventArgs

[Parameter] private Action<UIMouseEventArgs> onclick { get; set; }

Can you provide a way to pass arguments?

Q: up for grabs

I would love to help out with this project; it would be good to mark issues or items in backlog as 'up for grabs'

Dropdown Close on Escape (Fixed now) or Click outside element (Still pending)

Any idea's how we can tackle the issue when a dropdown is open and we want to close it based on a random click or escape key press?

Modal @bind-IsOpen lockup

Binding to Modal IsOpen causes Client Side Blazor to lock up.

Blazor: 3.0.0-preview6.19307.2
BlazorStrap: 1.0.0-preview6-12

Repro

Click on the Show Modal button. Blazor will freeze

@page "/Test"

<Modal @bind-IsOpen="@ModalIsOpen">
    <ModalHeader>Modal</ModalHeader>
    <ModalBody>Test</ModalBody>
</Modal>

<button @onclick="@(() => ModalIsOpen = true)">Show Modal</button>

@code {
    private bool ModalIsOpen { get;set; }
}

How can you run the Sample project?

It's a lame question probably but I can't run your project (Sample). Should I add the server part? (I'm new to Blazor)

Update project to Blazor 0.5.0

A disabled BlazorNavLink still activates the router when clicked.

                <NavItem>
                    <BlazorNavLink href="logoffview" IsDisabled="true">Log off</BlazorNavLink>
                </NavItem>

This link is rendered in the disabled color, however when I select it I am routed to 'logoffview'.
I can see that the IsDisabled is part of the rendered code, but it isn't functioning as I would expect.

                        builder4.CloseComponent();
                        builder4.AddContent(112, "\n                ");
                        builder4.OpenComponent<BlazorStrap.NavItem>(113);
                        builder4.AddAttribute(114, "ChildContent", (Microsoft.AspNetCore.Blazor.RenderFragment)((builder5) => {
                            builder5.AddContent(115, "\n                    ");
                            builder5.OpenComponent<BlazorStrap.BlazorNavLink>(116);
                            builder5.AddAttribute(117, "href", "logonview");
                            builder5.AddAttribute(118, "IsDisabled", Microsoft.AspNetCore.Blazor.Components.RuntimeHelpers.TypeCheck<System.Boolean>(true));
                            builder5.AddAttribute(119, "ChildContent", (Microsoft.AspNetCore.Blazor.RenderFragment)((builder6) => {
                                builder6.AddContent(120, "Logon");
                            }
                            ));
                            builder5.CloseComponent();
                            builder5.AddContent(121, "\n                ");
                        }
                        ));
                        builder4.CloseComponent();

BlazorButton produces compile errors

Hi,

I decided to try out a Jumbotron as a starter using the template provided -

<Jumbotron>
        <h1 class="display-4">Hello, world!</h1>
        <p class="lead">This is a simple hero unit, a simple jumbotron-style component for calling extra attention to featured content or information.</p>
        <hr class="my-4">
        <p>It uses utility classes for typography and spacing to space content out within the larger container.</p>
        <BlazorButton Color=Color.Primary Size=Size.Large>Learn more</BlazorButton>
    </Jumbotron>

However, the last line throws errors, specifically around Color and Size not existing in the current context.

Error CS0103 The name 'Color' does not exist in the current context

What have I missed?

Compatibility with Blazor 0.8 (prerelease)

Various namespaces and packages have changed, including:

the package reference to Microsoft.AspNetCore.Blazor.Browser becomes Microsoft.AspNetCore.Components.Browser
BootstrapComponentBase now needs to inherit from ComponentBase instead of BlazorComponent

BlazorForm and onsubmit not working

Am i doing something wrong here? my OnSubmit handler is never called

<BlazorForm OnSubmit="@Save">
             <FormGroup>
                <BlazorLabel For="inputFirstName">First Name</BlazorLabel>
                <BlazorInput Id="inputFirstName" InputType="InputType.Text" PlaceHolder="First Name" Value="@user.FirstName" />
            </FormGroup>
            <FormGroup>
                <BlazorLabel For="inputLastName">Last Name</BlazorLabel>
                <BlazorInput Id="inputLastName" InputType="InputType.Text" PlaceHolder="Last Name" Value="@user.LastName" />
            </FormGroup>
            <FormGroup>
                <BlazorButton Color="Color.Primary" ButtonType="ButtonType.Submit">Submit</BlazorButton>
            </FormGroup>
        </BlazorForm>

@functions {
    User user;
   
    protected override async Task OnInitAsync()
    {
        try
        {
            user = await UserService.GetLoggedInUser();
        }
        catch (Exception)
        {
            UriHelper.NavigateTo("");
        }
    }

    private async Task Save()
    {
    await UserService.Update(user);
    }
}

Generated html:

<form onsubmit="Microsoft.AspNetCore.Components.EventCallback`1[[Microsoft.AspNetCore.Components.UIEventArgs, Microsoft.AspNetCore.Components, Version=3.0.0.0, Culture=neutral, PublicKeyToken=adb9793829ddae60]]" class=" " _bl_19="">

Workaround:
<form novalidate onsubmit="@Save" class="form">

Instead of
<BlazorForm OnSubmit="@Save">

Tooltips are not displayed from time to time

Hello,

I have a table with a few icons in each row. Every single icon has its own tooltip. But for some reason some of the tooltips don't show up when a mouseover event occurs. It seems to be totally random and every time the page loads it is an other tooltip that dosn't show up. If I use the classic bootstrap way to display tooltips (not via BlazorStrap) and initialize them in the OnAfterRender method of my component, everything works fine.

If you want I can build a small sample project, but it will take a few days to get the time.

Best regards
Felix

Model IsOpenChanged is not triggered

Most Controls Won't Work on iOS Devices

It seems that the onclick event won't be fired on iOS devices when the rendered <a> tag doesn't have a href prop. Most controls (pagination, tabs, etc...) are broken.

Adding href="javascript:;" to <a> would solve the issue. I might as well submit a PR.

Horizontal navbar has odd responsive behaviors

These may all be known to you based on the alert on the navbars page in the sample app ("Navbar toggle needs more work) but here is what I have observed:

As you reduce the width of the page the navbar reorients from a horizontal to a vertical presentation, however:

The hamburger does not appear until you further reduce the page width
The vertical menu starts in the open format and it really should start in the collapsed form

The opposite issue occurs when you stretch the page width, the hamburger disappears leaving you with no menu if the menu wasn't expanded at the time you do the stretch

Documentation missing for css environment

I see in the sample that you have added css in site.css to support the sample. Is any of that needed for proper functioning of BlazorStrap or is the current BootStrap V4 css all that is needed? A quick addition to the documentation adding a "Using BlazorStrap" section would be welcome.

button ListGroupItem uses 'submit' button type by default

ListGroupItem with ListGroupType="ListGroupType.Button" needs to set button type to button, by default it acts as a submit button, and submits the current form.

Reproduction:

When the ListGroupItem is clicked:
1.myWorkingClickHandler will get called
2. Save will also get called

<form onsubmit="@Save">     
<ListGroup ListGroupType="ListGroupType.Button">
   <ListGroupItem ListGroupType="ListGroupType.Button" onclick="@myWorkingClickHandler">list group item button</ListGroupItem>
</ListGroup>
<BlazorButton ButtonType="ButtonType.Submit" Color="Color.Primary">Save</BlazorButton>
</form>

Solution:

Add type="button" on the generated HTML for <ListGroupItem ListGroupType="ListGroupType.Button">

StateHasChanged required for updates

Hi,

Thanks for developing this library. I've got a small issue, in a simple scenario where the click of a BlazorButton updates the _itemList which is one-way bound to this block:

<ListGroup>
    @foreach (var item in _itemList)
    {
        <ListGroupItem>@item</ListGroupItem>
    }
</ListGroup>

<BlazorButton Color="Color.Primary" OnClick="@AddWord">Add</BlazorButton>

void AddWord(UIMouseEventArgs e)
{
        _itemList.Add("a word");
        StateHasChanged(); // <- should not normally need this!
}

Blazor does not seem able to automatically detect that the DOM needs updating and I have to stick in a StateHasChanged( ) call into the OnClick handler.

But If I use a normal html <button> element instead the StateHasChanged( ) call is not needed as the framework is able to automatically detect the data change and re-render the DOM.

Is that a known/expected behaviour or a bug?

Thanks!

Fix binding, events and arbitrary attributes

Implement a base class for tags that will bind arbitrary attributes.

Some details here: https://github.com/aspnet/Blazor/issues/735

Error updating to Blazor 0.5.0

While trying to update to Blazor 0.5.0 parts of the sample site stopped working. I opened an issue in the main Blazor repo:

https://github.com/aspnet/Blazor/issues/1206

Migrate from Action to EventCallback

The new guidance is to use EventCallback instead of Action.
See for more details dotnet/aspnetcore#6351

Since Preview 6, the use of Action is also causing the following errors to show up:

System.ArgumentException: Object of type 'Microsoft.AspNetCore.Components.EventCallback`1[Microsoft.AspNetCore.Components.UIMouseEventArgs]' cannot be converted to type 'System.Action`1[Microsoft.AspNetCore.Components.UIMouseEventArgs]'.
   at System.RuntimeType.CheckValue (System.Object value, System.Reflection.Binder binder, System.Globalization.CultureInfo culture, System.Reflection.BindingFlags invokeAttr) <0x2778e18 + 0x000c6> in <917eebd1d479468d957d9e8362baba7d>:0

I hate CSS...

I'll post without actual hope but hey, you never know.

I am making a demo application using a whole lot of Blazor and associated bits including Fluxor, Db and especially BlazorStrap. I have a licence for a template that hgas bits of what I want to do but I'm finding it impossible to replicate them in BlazorStrap.

Here's the image of the toolbar I am wrestling with

and here's the source of that particular bit.

Does anyone have any advice? I can do the code, that's fine. I've written a dynamic clanedar component - that one does BlazorStrap - but I can't seem to manage styling. Drives me insane.

Docs generating a 404 error for font in site.css

The site.css file requests a font that isn't present causing a 404

https://chanan.github.io/BlazorStrap/open-iconic/font/css/open-iconic-bootstrap.min.css

Consider Prefixing all Components

With a mixture of things popping up on Intellisense, and the possibility of namespace collision, would it be worth prefixing all components, or is there a way to do this with the tagHelper import?

Update to 3.0.0-preview4

Upgrade instructions here and changelog here

Thanks for your work.

Edit: I went ahead and did it in #46

Do events work on any controls?

I have events on Button Click, but appears they don't fire anymore with BlazorStrap? I did see on the home page, Events were not working, but I wanted to confirm, as I see an example onClick in the BlazorButton Sample Page?

Below used to work, but now is not being fired. Where iRoleIndex is just a Row in a BootStrap table. AddEditClaim is the Function I have in Code Behind.

onclick="@(e => AddEditClaim(iRoleIndex))"

Update DynamicElement to the latest guidance using BlazorComponent

Integrate with EditForm component and validation

Bootstrap CSS

The boot strap css files shouldn't be required in the site project; but added as a resource to the BlazorStrap project and injected into the pages via the interop typescript.

Bootstrap coupled or Material-Design possible?

Hi Chanan. Nice! I'm assuming, due to the name, that this is not reasonably usable/adaptable with a Material-Design style basis? Sure, one can hack a Material-Design style on top of Bootstrap, but not really a good idea. We use MD in other contexts and, as such, can't readily go with Bootstrap. ... any thoughts appreciated!

Better way to contribute to BlazorStrap

I am opening this issue to solicit suggestions from people that contribute to BlazorStrap. First, many thanks to everyone that contributes to BlazorStrap and I glad to have this problem!

Merging PRs to master is becoming painful. Today, I had the "pleasure" for the first time to see Github's web merge resolver and I never want to see that again... I think that to get around that we need to start working off of branches and not master. To that end, if any of you are used to the way other projects work and have suggestions, please list them here. Once we settle on something, I will create a contributing.txt with the guidelines.

Again, many thanks to everyone that contributes to BlazorStrap,

PS - If anyone has time and the desire to help out on a more permanent basis please let me know.

Tagging some people that have contributed lately: @IvanJosipovic @jbomhold3 @hez2010 @chucker @sitharus @BlackFenix2 @razfriman @Hawxy

Suggestion: Reduce size of rendered HTML-elements

To reduce amount of data sent to Brower in created HTML-Elements are a lot of attributes which shouldn't be rendered when they've default values.
For example

<input class="  form-control  valid" type="text" size="0" selectedIndex="0" value="">

contains several attributes which aren't needed / shouldn't be rendered.
Blazor itself is also not rendering such attributes, see https://docs.microsoft.com/en-us/aspnet/core/blazor/components?view=aspnetcore-3.0#razor-support at topic Conditional HTML element attributes.

Additionally the class attribute contains unnecessary spaces which could be removed from created html.
Just tell me if such "optimizations" are ok for you.

EDITED: I fixed the url to the docs, for some reason it was not linked right in the markdown

protected async Task CheckResults(UIMouseEventArgs ev)
    {
        await SendResults();
    }

shows return type error

Support Blazor Preview 6

Preview 6 added quite a few breaking changes.

Blog: https://devblogs.microsoft.com/aspnet/asp-net-core-and-blazor-updates-in-net-core-3-0-preview-6/

chanan / blazorstrap Goto Github PK

blazorstrap's Introduction

BlazorStrap

Bootstrap 4/5 components for Blazor

Bootstrap 5

Packages

Install

Blazor WebAssembly

Blazor Server Side

Bootstrap 4

Install

Blazor WebAssembly

Blazor Server Side

Extensions:

blazorstrap's People

Contributors

Stargazers

Watchers

Forkers

blazorstrap's Issues

Repro

Recommend Projects

Recommend Topics

Recommend Org