chanan / blazorstrap Goto Github PK
View Code? Open in Web Editor NEWBootstrap 4 Components for Blazor Framework
Home Page: https://blazorstrap.io
License: The Unlicense
Bootstrap 4 Components for Blazor Framework
Home Page: https://blazorstrap.io
License: The Unlicense
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?
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/
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
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.
This is in progress but ran into a few issues regarding events.
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!
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; }
}
A dumb question most likely, but how do you actually use BlazorStrap with a Blazor site?
What are the steps for getting going?
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:
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
JSInterop.Current
is gone; we need to use injection instead.BlazorButton
. <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();
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?
<BlazorButton IsOutline="true" Color="Color.Primary" onclick="@CheckResults">Reply</BlazorButton>
protected async Task CheckResults(UIMouseEventArgs ev)
{
await SendResults();
}
shows return type error
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.
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:
This seems to be limited due to the UIMouseEventArgs
[Parameter] private Action<UIMouseEventArgs> onclick { get; set; }
Can you provide a way to pass arguments?
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">
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
}
}
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
I would love to help out with this project; it would be good to mark issues or items in backlog as 'up for grabs'
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?
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.
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 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
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)
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">
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.
Just a few notes on the documentation:
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?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
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.
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>
Binding to Modal IsOpen causes Client Side Blazor to lock up.
Blazor: 3.0.0-preview6.19307.2
BlazorStrap: 1.0.0-preview6-12
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; }
}
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
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))"
Various namespaces and packages have changed, including:
Microsoft.AspNetCore.Blazor.Browser
becomes Microsoft.AspNetCore.Components.Browser
BootstrapComponentBase
now needs to inherit from ComponentBase
instead of BlazorComponent
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.
Implement a base class for tags that will bind arbitrary attributes.
Some details here: https://github.com/aspnet/Blazor/issues/735
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!
Running an app on 0.6.0 with BlazorStrap 0.5.1 does not work well. I simply cloned the repository and built BlazorStrap locally against 0.6.0; no changes were needed and everything seems to function.
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
A declarative, efficient, and flexible JavaScript library for building user interfaces.
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. ๐๐๐
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google โค๏ธ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.