t4t5 / sweetalert

A beautiful replacement for JavaScript's "alert"
https://sweetalert.js.org
MIT License
22.4k stars 2.84k forks source link

Cannot set default button classes #785

Open matthew-inamdar opened 6 years ago

matthew-inamdar commented 6 years ago

I've read the documentation and cannot figure this out.

How does one set the default button class for the confirm and cancel buttons?

The following does not work:

swal.setDefaults({
    buttons: {
        cancel: {
            className: 'btn btn-light'
        },
        confirm: {
            className: 'btn btn-success'
        }
    }
});
theevilhead commented 6 years ago

Css

.red-bg{ background :red } .blue-bg{ background :blue } JS

swal({
  buttons: {
    dance : {
      text : "Button 1",
      className : 'red-bg'
    },
    confirm: {
      text : 'Button 2',
      className : 'blue-bg'
    }
  }
});

Demo : https://codepen.io/girishpatil/pen/YYOvVG Know more here https://sweetalert.js.org/docs/#buttons

matthew-inamdar commented 6 years ago

@girishpatil - this doesn't solve the problem, unfortunately. This requires you to set the button classes on every call to swal() (which is what I'm currently doing).

This results in duplicated code.

As the title says, I cannot set the default button class.

theevilhead commented 6 years ago

@matthew-inamdar yeah sorry for that .. although I couldn't find a way of assigning default external classes but digging into the code [https://github.com/t4t5/sweetalert/blob/master/src/modules/class-list/index.ts] found out that there are three types of default buttons. You can use their default class names to style them Or you can even extend @extend your own class (btn btn-left as mentined above) into these below classes

/* style overall buttons */ .swal-button{ border: 1px dashed #333; // @extend .yourclass } /* style cancel buttons */ .swal-button--cancel{ color: #333; } .swal-button--confirm{ color: green } .swal-button--danger{ color: red; } hope it helps in some way you can see the demo here https://codepen.io/girishpatil/pen/wpERBB

matthew-inamdar commented 6 years ago

Or you can even extend @extend your own class (btn btn-left as mentined above) into these below classes

This is an interesting solution. Not as clean as I would have liked, but may do the trick.

I would like this issue to remain open, as hopefully there is still an actual way with the default config?

If this is currently not possible (for someone to confirm) - I may open a PR if I get the time.

t4t5 commented 6 years ago

I agree that this should work, so yeah, this could be classified as a bug.

I might tackle it sometime in the future, but if you have the time to submit a PR, that would be great!

matthew-inamdar commented 6 years ago

Thanks for getting back to me @t4t5 - I'll find some time this week hopefully

jsainthilaire commented 6 years ago

@t4t5 @matthew-inamdar I'm looking for something to contribute between today and tomorrow, I can take over this, is that ok?

Riya123-code commented 1 year ago

can i work on this bug?