locked
bootstrap and material issues RRS feed

  • Question

  • User-234441352 posted

    Hi,

    I am using two themses in my  blazor project.

    One: bootstrap 

    second: MatBlazor

    What issue can occurred in it if I use both ?

    Sunday, August 4, 2019 10:11 AM

Answers

  • User-474980206 posted
    Heaver payload (two large css libraries, large JavaScript libraries, etc), odd looking design, confusing code (when to mat or bootstrap inputs or layouts). May have conflicting css.

    Why do you want both?.
    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Sunday, August 4, 2019 6:20 PM
  • User-474980206 posted

    you need a material design version. While MatBlazor has a slider, there are dozens of standalone sliders.

    If you use a standalone component,  many are javascript and require event handling, you will need to interface the slider events to Blazor the generated html.  You will probably also need a wrapper call to generate blazor events if you need them.

    you can also look at the MatBlazor source code their slider and see how they hookup events.

    https://github.com/SamProf/MatBlazor/tree/master/src/MatBlazor/Components/MatSlider

    note: I'd never use Blazor (I prefer react.js), just interested in the implementation, so can not comment on the quality of MatBlazor. 

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Monday, August 5, 2019 8:00 PM
  • User-474980206 posted

    there are dozens of standalone carousal libraries. why load all of bootstrap to get one feature. here is one of the most popular:

    http://wowslider.com/carousel-slider-showy-carousel-demo.html

    also, whichever one you pick, you will need to create a blazor wrapper component.

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Thursday, August 8, 2019 7:57 PM
  • User-474980206 posted

    most slider implementations require animation. currently Blazor has very poor support for animation, so the slider component should be a javascript component. The javascript component just needs an api for blazer to call. your bets bet with blazor is to pick a jQuery carousel, and create the blazor wrapper. 

    This is why I prefer react.js. you are just in one world (javascript and html). react is component based like blazor, but unlike blazor, react component have direct access to the dom and events. here is link to simple react carousel (though there are dozens of canned components):

      https://codepen.io/DZuz14/pen/XxKLVY?editors=0010

    note: I would not put blazor in the same category as angular, react and vue.  

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Thursday, August 8, 2019 11:29 PM

All replies

  • User-474980206 posted
    Heaver payload (two large css libraries, large JavaScript libraries, etc), odd looking design, confusing code (when to mat or bootstrap inputs or layouts). May have conflicting css.

    Why do you want both?.
    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Sunday, August 4, 2019 6:20 PM
  • User-234441352 posted

    Hi Bruce,

    You are right. I totally agree but what can I do if need to use something like sliders and other bootstrap feature ?

    Does MatBlazor support a slider ?

    Monday, August 5, 2019 6:57 PM
  • User-474980206 posted

    you need a material design version. While MatBlazor has a slider, there are dozens of standalone sliders.

    If you use a standalone component,  many are javascript and require event handling, you will need to interface the slider events to Blazor the generated html.  You will probably also need a wrapper call to generate blazor events if you need them.

    you can also look at the MatBlazor source code their slider and see how they hookup events.

    https://github.com/SamProf/MatBlazor/tree/master/src/MatBlazor/Components/MatSlider

    note: I'd never use Blazor (I prefer react.js), just interested in the implementation, so can not comment on the quality of MatBlazor. 

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Monday, August 5, 2019 8:00 PM
  • User-234441352 posted

    Hi Bruce,

    Thank you for replying and providing details.

    Bruce i was asking about Image Slider like Carousal Image slider  (bootstrap) .

    I want to use this image slider with MATBlazor ?

    Thursday, August 8, 2019 6:06 PM
  • User-474980206 posted

    there are dozens of standalone carousal libraries. why load all of bootstrap to get one feature. here is one of the most popular:

    http://wowslider.com/carousel-slider-showy-carousel-demo.html

    also, whichever one you pick, you will need to create a blazor wrapper component.

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Thursday, August 8, 2019 7:57 PM
  • User-234441352 posted

    Hi bruce,

    You are right but bruce , there is a beauty in all these technologies react, blazor , angular and vue. 

    they don't show the full plain html and logic.

    see 

    I wanted something like that :

    <input class=" mdc-text-field__input _mdc-text-field--upgraded mat-hide-clearbutton" id="matBlazor_id_34c3944e-b73f-4696-976a-0ebaf9daf081" aria-label="Pick one" type="text" _bl_476="">

    Ok i try for it.

    Can't i create something like this for image slider ?

    Thursday, August 8, 2019 8:33 PM
  • User-474980206 posted

    most slider implementations require animation. currently Blazor has very poor support for animation, so the slider component should be a javascript component. The javascript component just needs an api for blazer to call. your bets bet with blazor is to pick a jQuery carousel, and create the blazor wrapper. 

    This is why I prefer react.js. you are just in one world (javascript and html). react is component based like blazor, but unlike blazor, react component have direct access to the dom and events. here is link to simple react carousel (though there are dozens of canned components):

      https://codepen.io/DZuz14/pen/XxKLVY?editors=0010

    note: I would not put blazor in the same category as angular, react and vue.  

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Thursday, August 8, 2019 11:29 PM
  • User-234441352 posted
    Thank you
    Saturday, August 10, 2019 11:04 AM