marcelodolza / izitoast Goto Github PK
View Code? Open in Web Editor NEWElegant, responsive, flexible and lightweight notification plugin with no dependencies.
Home Page: http://izitoast.marcelodolza.com
License: Apache License 2.0
Elegant, responsive, flexible and lightweight notification plugin with no dependencies.
Home Page: http://izitoast.marcelodolza.com
License: Apache License 2.0
Hello, is it possible to pass multiple classes on the settings object? Right now it isn't possible, it'd be cool to be able to add N classes to a specific toast.
Also If we could add an ID to the toast element, that'd be helpful as well.
{
id: "toast1234", // <- Would be cool
class: "someClass anotherClass thirdClass", // <- Highly desired
title: "title",
message: "some text",
layout: 2,
timeout: 8000,
animateInside: false,
transitionIn: 'fadeInLeft',
transitionOut: 'fadeOutRight',
transitionInMobile: 'fadeInUp',
transitionOutMobile: 'fadeOutDown',
}
The z-index is wrongfully inserted on the container with the class iziToast it should be inserted on the div containing the class iziToast-wrapper
I'm using typescript and commonjs module loading to try to bring iziToast (1.0.2-c) into my module/class. The import does not appear to be working and provides undefined at runtime. Weirdly the debugger tooltip of the iziToast variable in the chrome debugger tools suggest that the type has loaded correctly.
There is an iziToast_1 variable available that does provide the correct instance but I have to get to it via hacky and non-CSP compliant eval call.
import Failure from "./failure";
import iziToast from "iziToast";
export class Notify {
private notifier: any;
public constructor() {
this.notifier = iziToast;
if (!this.notifier) {
// tslint:disable-next-line:no-eval
this.notifier = eval("iziToast_1");
}
}
}
The only other thing I've been able to find is that iziToast_1 gets registered in the map file but does not exist anywhere else in compiled source (via Webpack) or anywhere in the node_modules directory.
I don't think this is to do with minification however because I find the same results on code that isn't minified. I also doubt that this is an issue with webpack as all other modules load fine.
Any idea what is going wrong here?
When both iziModal and iziToast are used on the same page, the iziModal CSS animations are affected by the iziToast CSS.
Situation:
When you show a toast with/without the close (x) button and without any other button or message, the title and icon of the toast are misaligned.
Samples:
iziToast.warning({
timeout: 5000,
title: 'Some message here.',
position: 'centerTop',
close: false
});
iziToast.success({
timeout: 5000,
title: 'Some message here.',
position: 'centerTop',
close: true
});
Using the iziToast.settings default this seems to happen to any kind of toast.
edit: I just noticed, if I include a message in the toast, the misalignment doesn't happen.
Is it possible to add html in messages?
Marcelo, não vi nada sobre licenças, sobre qual você irá manter? Vi no site que é free, mas em que condições? Posso usar tranquilamente em meus projetos independente da área de atuação inclusive uso comercial? Abraço.
Very nice design and animations! I would love to see an option for a toast to collapse to just it's icon on (auto-)closing, allowing user to re-open it on click. I guess the icon could float on the edge of the screen on larger screens, respecting the existing position parameter (bottomRight, bottomLeft, topRight, topLeft, topCenter, bottomCenter). Some animation could make it clear to the user that the icon came out of the collapsed toast. What do you think?
Love the plugin but is there any reason for console.log('closed1'); and console.log('closed2'); being still in the code?
Somehow the toast is wider than the screen width on narrow screens and so the close icon gets cut off.
been trying to implement your library with my React project that uses Material UI template library
it appears I cant get popups to appear visually, and no errors are thrown :(
when i am using ie9, it show error 'Unable to get undefined or null referenced attributes "add" '
The .js-files doesn't seem to be retrieved making none of the demos testable
How can I change final opacity? I mean at the end of the show animation.
I want to have a message with new lines in it, but they are rendered as whitespace in the toast. Can you render these as
instead. For backwards compatibility, this should have a config setting to enable it (false by default).
Quando o iziToast é chamado, o balão não aparece mais o texto.
Ate uns dias estava funcionando, e o codigo nao foi mudado, entao sei que não é erro meu.
Balloon takes, the original color for show, success, error... etc.
But if you customize backgroundColor option, the Balloon (little triangle) continue adopting original color.
Request:
thank you :)
In my settings I set the zIndex to be the highest zIndex in my app
iziToast.settings({ position: 'bottomRight', timeout: 4000, zIndex: 9999999999 });
This gets ignored and I see the div
<div class="iziToast-wrapper iziToast-wrapper-bottomRight" style="z-index: 999999;">...</div>
Hi, Great tool!
One problem, in IE11 (Chrome works fine) the toast starts small (good) but after a second it takes on the whole height of the screen. I'm using the newest version: 1.1.2
After I click on the button the notification starts on the right bottom like it should.
But than, after a second, it expands over the whole height to the top. (Untill time's up and it dissapeares.)
Anything wrong with the following:
Best regards,
Simon
As per question.
Please, consider using semver versioning, to avoid possible misbehavior with package managers. Currently yarn is unable to fetch latest version because of trailing "b".
Mais uma sugestão.
No evento onClose, enviar algo para informar se foi fechado quando tempo finalizou ou quando por ter clicado no botão fechar.
[Question] How to create yes/no or more button like demo ? i see custom 1, custom 2 but no demo code.
When trying to do, for examle:
iziToast.info({ title: 'Hello', message: 'Welcome!', });
The message is not displayed:
We use the latest Version of iziToast which is 1.1.4.
(This is happening to all toasts)
Even here: http://izitoast.marcelodolce.com/, the Example Info Toast does not display the message.
npm install installs the v1.1.0
when i run the script together with the library,
the timeout of the alerts prolongs almost x4
so timeout: 1000 will result to almost 4seconds
if i use 250 to create a 4 second timeout, the animation on the loading bar doesn't look as fluid as before.
Is there an option to close on Escape key press?
Thank you
I was wondering if there was a way to pass in a component variable to the message parameter.
This is what I am looking for [message]="'{{error}}'".
Thanks
Hello !
Is it possible to set max-with of the toast?
because sometimes the title and message are couple of words so it make the toast so long....
Is-it possible ?
thanks
In Chrome 59 on macOS 10.12.5, iziToast 1.1.4 displays toasts incorrectly
Despite the CSS rule on .iziToast
: max-height: 54px
, the height of the element is 71px.
This is because the default box-sizing
value is content-box
, so the height of the content is being set to 54px regardless of borders and margins which may add height. The most appropriate solution is to set the box-sizing
property of .iziToast
to border-box
.
Hello,
When invoking iziToast with the property resetOnHover:true value, the following error occurs.
iziToast.info({
title: 'Hello',
message: 'Welcome!',
resetOnHover: true
});
Uncaught RangeError: Maximum call stack size exceeded
Same error is reproduced in the following call:
iziToast.info({
title: 'Hello',
message: 'Welcome!',
resetOnHover: true,
pauseOnHover: false
});
The version used is the release on tag v1.1.3
Any thoughts what could be causing it?
Thank you.
Olá Marcelo,
Novamente parabéns!
Novamente porque te dei os parabéns no facebook, e ainda relatei algumas coisas que fiz em outro plugin para adaptar as minhas necessidade. No facebook você diz que aceitaria sugestões, pois bem, vou aqui apresentar algumas que pelo menos eu estou precisando,
1: Poder personalizar as cores do título, tanto de fundo quanto dele mesmo (sem usar class)
2: Poder personalizar as cores da mensagem, tanto do fundo quanto da mensagem (sem usar class)
3: Ter opção para não possibilitar copiar o texto (não me pergunte pq preciso disso, pq eu também não sei rsrsrs). Mas esta aqui acho que não faz muito sentido implementar não, mas talvez vc goste da ideia.
Uncaught RangeError: Maximum call stack size exceeded
at y (:6:3644)
at Object.updateProgress (:6:3923)
at y (:6:4362)
at Object.updateProgress (:6:3923)
at y (:6:4362)
at Object.updateProgress (:6:3923)
at y (:6:4362)
at Object.updateProgress (:6:3923)
at y (:6:4362)
at Object.updateProgress (:6:3923)
I know that is possible to change the color of the icon, but what about the close icon, i'd like to turn it white.
I've noticed iziToast title and message were fading out when called.
Then I changed the order of css links and it normalized, however iziModal assumed the behavior of iziToast.
Maybe same class used to both?
Not sure how big of a problem it is, but bubles is misspelt:
var event = new CustomEvent(PLUGIN_NAME+'-close', {detail: settings, bubles: true, cancelable: true});
just noticed because the syntax highlighter complained.
I get error : Uncaught ReferenceError: isClosed is not defined(…) on
line 403 : settings.onClose.apply(null, [settings, $toast, isClosed]);
On the minified version this error does not show.
Testes on a clean page, no other JS loaded.
Hi, i sow you have supported IE 10, but in my organization the client require at least IE 9, Do not iziToast support IE 9 ??.
Thanks in advance.
I don't know if this is a issue or is by design, but, when i call instance.hide() from a button shouldn't the global onClose be also called ?
Olá, quando chamo um toast, e ele é iniciado, os textos desaparecem.
Se eu removo a classe .slideIn dos textos e deixo a opacidade 1, eles retornam. O CSS do slidein está causando este problema.
.iziToast.slideIn, .iziToast .slideIn { animation: b 1s cubic-bezier(.16,.81,.32,1) both }
I am trying to include izitoast in my vue js application. And I have declared the plugin in my dev,base and prod conf file. I have included the imports in my main.js file like this import '../node_modules/izitoast/dist/js/iziToast.min.js'
import '../node_modules/izitoast/dist/css/iziToast.css'
. And used izitoast in my mounted hook like $(this.$el).find('.addbtn').iziToast.success({ title: 'OK', message: 'Successfully inserted record!', });
. I get error "Cannot read property success of undefined"? Can you help with this?
PS: I have also tried using the import izitoast from 'izitoast'
and Vue.use(izitoast)
Opa, boa tarde,
Está ocorrendo algum erro no npm, o modulo do iziToast não ta sendo encontrado...
https://runkit.com/5843226183edc1001385297d/5843226183edc1001385297e
Pode ver ai no teste online do npm.
Abçs
Oi marcelo !
ha possibilidade de suportar o izitoast tendo como target um input/select .... etc !
Obrigada
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.