vue-modal
SweetAlert
vue-modal | SweetAlert | |
---|---|---|
2 | 11 | |
128 | 22,357 | |
- | - | |
8.5 | 0.0 | |
3 months ago | about 1 year ago | |
TypeScript | TypeScript | |
MIT License | MIT License |
Stars - the number of stars that a project has on GitHub. Growth - month over month growth in stars.
Activity is a relative number indicating how actively a project is being developed. Recent commits have higher weight than older ones.
For example, an activity of 9.0 indicates that a project is amongst the top 10% of the most actively developed projects that we are tracking.
vue-modal
-
Vue Modal Router
Everything I wrote was programmed and put into a separate library jenesius-vue-modal.
-
# A new look at modals in vue 3
from HTML. We will talk about modal windows in the vue ecosystem. Codes and the implementation can be viewed here jenesius-vue-modal. The new teleport feature in the third version of vue allows you to move content to the location you need. And that's cool! Maybe. having tried to use it on my project, my team encountered the following problems: how to support such code when any component can insert something anywhere in your product. We added abstractions, new components that were only used to limit the use of teleport. We used a lot of modal windows in our project. Open one, open another on top, return value from modal, integrate modal window in vue-router is not a complete list of what we implemented. At first we used a cool library, but like this the approach irritated our entire team: :user-id = "id" v-if = "isActive"/> Enter fullscreen mode Exit fullscreen mode For us, It looked awkward and we really wanted to get rid of it. We wanted to get rid of the description of the modal components windows in another component. Our task was to make modal windows to another level, another layer. In vue it is very convenient to use reactive states based on ref/reactive. Add a queue that will store open modal windows: const modalQueue = reactive([]); Enter fullscreen mode Exit fullscreen mode When adding a modal window, we will write the value there, when removing - delete. Everything seems to be very simple. Now to open a modal window add the openModal method: function openModal(component, props) { modalQueue.push({component, props}); } Enter fullscreen mode Exit fullscreen mode To close we use the splice method. Now all that remains is to display the modal windows. Let's create a separate one for this component in which the transferred components will be displayed. Also don't forget to pass props there: v-for = "item in modalQueue" :is = "item.component" v-bind = "item.props" /> Enter fullscreen mode Exit fullscreen mode To open a modal window from our new user card, let's add a click handler and call a new function: @click = "showUserModal">open template> const props = defineProps(['userId']) function showUserModal() { openModal(ModalUser, { userId: props.modalId }) } script> Enter fullscreen mode Exit fullscreen mode also, we must connect this component to App.vue. This is just a short but main part of what we have implemented. For us this approach allows you to build interfaces more accurately and safely. The entire code base can be found in the public repository at GitHub. We tried to give examples on how to use this library. We also described instructions and made nice documentation.
SweetAlert
-
Show HN: A game to pick a favorite from a list
Sunday morning programming fun. Created a little game to compare items from a list head-to-head and pick a winner. Inspired from social media short videos where people choose their favourite food, song, holiday destination etc. There are some example lists of cities, movies, actors, fragrances etc to play with and you can create your own list of items and play.
Check it out - https://yash.info/head-to-head.html
I created it mainly to pick a favourite fragrance from my collection of 50+. Not only is a fun project to build but it also allows me to use some of the interesting libraries and code snippets I find.
Programming logic wise there’s nothing fancy happening here, just picking a random element from an array and doing some JS and CSS around that.
New thing that I got to learn was generating a random color of a specific type (pastel, fluorescent, light) by playing with HSL values in a specific range instead of the RGB.
Discovered https://arraythis.com to convert a list to a JS array.
Used SweetAlert https://sweetalert.js.org for alert messages.
Been coding for 20+ years and such little projects still give me the joy of creation plus you always learn/find something that you did not know yesterday.
-
Top 4 JavaScript Notification Libraries
SweetAlert is a gorgeous notification library you can use to replace built-in alert function in your JavaScript applications. You can include buttons and icons, alter the text’s color, and even add alerts that adjust in response to user clicks.
-
SweetAlert2 manual confirm button text while echo'ing JS
Are you sure you're using SweetAlert2 and not SweetAlert1 because your syntax looks like 1.
-
Best notification libraries and plugins for Javascript and jQuery
SourceCode | Demo
-
A better way to show alerts in your next projects
Import Sweet Alert to your project
-
Part 2/2 - Game in ReactJS - Cuzzle
sweetalert:
-
Awesome Things Related To React Hooks 😍
Sweet Alert - A beautiful replacement for success messages, error messages or info messages
-
Is Sweet Alert Outdated?
Big question, though: Are you using SweetAlert, or SweetAlert2 ?
- Añadir alertas usando SweetAlert en una página web con ASP.NET Framework.
- 🚀10 Trending projects on GitHub for web developers - 12th March 2021
What are some alternatives?
react-native-actions-sheet - A Cross Platform(Android, iOS & Web) ActionSheet with a flexible api, native performance and zero dependency code for react native. Create anything you want inside ActionSheet.
sweetalert2 - ✨ A beautiful, responsive, highly customizable and accessible (WAI-ARIA) replacement for JavaScript's popup boxes. Zero dependencies. 🇺🇦
vuejs-confirm-dialog - Makes simple to create, reuse, promisify and build chains of modal dialogs in Vue.js
Bootbox - Wrappers for JavaScript alert(), confirm() and other flexible dialogs using Twitter's bootstrap framework
keukenhof - Lightweight and easy to use the library for modals
bootstrap-modal - Extends the default Bootstrap Modal class. Responsive, stackable, ajax and more.
react-useportal - 🌀 React hook for Portals
Magnific-Popup - Light and responsive lightbox script with focus on performance.
react-spring-bottom-sheet - Accessible ♿️, Delightful ✨, & Fast 🚀
fancyBox - jQuery lightbox script for displaying images, videos and more. Touch enabled, responsive and fully customizable.
X-editable - In-place editing with Twitter Bootstrap, jQuery UI or pure jQuery
AlertifyJS - A javascript framework for developing pretty browser dialogs and notifications.