This question has been raised for sweetalert 1
Adding class to sweet alert
Now my question is, how can i add a custom class in sweetalert2?
className: "new_class" does not work for me.
For sweetalert2 the custom class can be added to multiple targets:
Swal.fire({
...
customClass: {
container: 'container-class',
popup: 'popup-class',
header: 'header-class',
title: 'title-class',
closeButton: 'close-button-class',
icon: 'icon-class',
image: 'image-class',
content: 'content-class',
input: 'input-class',
actions: 'actions-class',
confirmButton: 'confirm-button-class',
cancelButton: 'cancel-button-class',
footer: 'footer-class'
}
})
Docs: https://sweetalert2.github.io/#custom-class
Related
Please help me fix this problem. I create application using Laravel 8, Blade templates and Vue 3 components.
In that i have basic routing in Laravel. I want to add nice looking menu in admin panel https://github.com/yaminncco/vue-sidebar-menu.
Unfortunately, I don't know how to pass my menu structure to this component. When I use the example from the documentation I get an error
Failed to resolve component: router-link
I dont use router in Vue. I see in documentation example with Customize link with InertiaJa but i dont know how use it because i dont use and know InertiaJS.
My simple MainMenu.vue component code:
<template>
<SidebarMenu :menu="menu"></SidebarMenu>
</template>
<script>
import { SidebarMenu } from 'vue-sidebar-menu'
import 'vue-sidebar-menu/dist/vue-sidebar-menu.css'
export default {
name: "MainMenu",
components: {
SidebarMenu
},
data() {
return {
menu: [
{
header: 'Main Navigation',
hiddenOnCollapse: true
},
{
href: '/',
title: 'Dashboard',
icon: 'fa fa-user'
},
{
href: '/charts',
title: 'Charts',
icon: 'fa fa-chart-area',
child: [
{
href: '/charts/sublink',
title: 'Sub Link'
}
]
}
]
}
}
}
</script>
<style scoped>
</style>
Ok, I found a solution to the problem. Need to add own code which create\render simple link in html
in app.js add:
/*remaining application code*/
import { createApp, h } from "vue";
const customLink = {
name: 'CustomLink',
props: ['item'],
render() {
return h('a', this.$slots.default())
}
}
const app = createApp({});
app.component('custom-link', customLink)
/*remaining application code*/
and in Vue Component:
<SidebarMenu :menu="menu" :link-component-name="'custom-link'"></SidebarMenu>
I have a problem with vue routes. I am using laravel 6 with vue#2.6.10
I want to create the actions button in the header dynamically (the actions are different which depends on the component). This AppHeader component is on every component and on the current component I want to create in the header the events for the current component.
For example the component CategoryDetails I want to have two actions in the header (save and exit).
The route foe the category is this:
path: '/',
redirect: 'dashboard',
component: DashboardLayout,
children: [
{
path: '/categories',
component: Category,
name: 'category',
meta: {
requiresAuth: true
}
},
{
path: '/categories/:CategoryID',
component: CategoryDetails,
name: 'category-details',
props: true,
meta: {
requiresAuth: true
}
},
]
In the component CategoryDetails:
<template>
<div>
<app-header :actions="actions"></app-header>
// other code
</div>
</template>
<script>
import AppHeader from "../../layout/AppHeader";
export default {
name: "CategoryDetails",
components: {AppHeader},
data() {
actions: [{label: 'Save', event: 'category.save'}, {label: 'Exit', event: 'category.exit'}],
},
mounted() {
const vm = this;
Event.$on('category.save', function(){
alert('Save Category!');
});
Event.$on('category.exit', function(){
vm.$router.push({name: 'category'});
});
}
}
</script>
I crated the action object which tells the header component what events to emit and listen to them in this component.
In the AppHeader component:
<template>
<div v-if="typeof(actions) !== 'undefined'" class="col-lg-6 col-sm-5 text-right">
{{ btn.label }}
</div>
</template>
<script>
export default {
name: "AppHeader",
props: [
'actions'
],
methods: {
onActionClick(event) {
Event.$emit(event);
}
}
}
</script>
The Event is the "bus event" defined in the app.js
/**
* Global Event Listener
*/
window.Event = new Vue();
So... let`s tested :)
I am in the category component. Click on the category details ... the actions are in the header (save and exit). Click on exit...we area pushed back to the category component... click again to go in the category details and click save ... the alert appears TWICE.
Exit and enter again ... the alert "Save Category!" appears 3 times.....and so on ...
Why ?
I think the issue is not with your routes. I don't know but try testing with your event locally (not globally) in the component of interest. There may be duplicate action (CategoryDetails).
According to this post: https://forum.vuejs.org/t/component-not-destroying/25008/10
I have to destroy the "zombie effect"
destroyed() {
Event.$off('category.save');
Event.$off('category.exit');
}
I need to add a custom button to CKEditor 4.6.2 instance without plugin.
I've tried solution suggested at similar question How to add a custom button to the toolbar that calls a JavaScript function?
The difference is that I don't want to replace existing instance, but instead modify it after it's initialised. Like here: http://jsfiddle.net/paragonid/8r4gk45n/1/
CKEDITOR.replace('container', {
on: {
instanceReady: function( evt ) {
console.log('instanceReady', evt)
evt.editor.addCommand("mySimpleCommand", {
exec: function(edt) {
alert(edt.getData());
}
});
evt.editor.ui.addButton('SuperButton', {
label: "Click me",
command: 'mySimpleCommand',
toolbar: 'insert',
icon: 'https://avatars1.githubusercontent.com/u/5500999?v=2&s=16'
});
}
}
});
But button doesn't appear in this case.
I also faced the same issue, this is how I resolved mine-
var editor = CKEDITOR.replace(ck, {
toolbar: [['Source','-','Preview','Print'],['UIColor','Maximize','ShowBlocks'],
['Cut','Copy','Paste','PasteText','PasteFromWord','-','Undo','Redo','RemoveFormat','-','Link','Unlink','Anchor'],
['Bold','Italic','Underline','Strike','Subscript','Superscript','RemoveFormat'],['Link','Unlink','Anchor'], '/',
['NumberedList','BulletedList','-','Outdent','Indent','-','Blockquote','CreateDiv','-','JustifyLeft','JustifyCenter','JustifyRight','JustifyBlock','-','BidiLtr','BidiRtl'],
['Styles','Format','Font','FontSize'],['TextColor','BGColor'],'/',
{name: 'insert', items:['InsertCustomImage','Flash','Table','Iframe','HorizontalRule','Smiley','SpecialChar','PageBreak']}]
});
editor.addCommand("insertImgCmd", {
exec: function(edt) {
helper.showdlg(component);
}
});
editor.ui.addButton('InsertCustomImage', {
label: "Insert Image",
command: 'insertImgCmd',
toolbar: 'insert',
icon: 'https://avatars1.githubusercontent.com/u/5500999?v=2&s=16'
});
While setting the toolbar, I inserted a custom command name "InsertCustomImage".
Now while creating new button below, set the same name as "InsertCustomImage" in addButton function.
Question
I used to use extJs 4 with MVC, now I want to change to extjs 5 and add ViewModel and ViewController into it. But I have no privilege to install SenchaCmd to generate and compile the app as the guides says. I wonder if SenchaCmd is necessarily in ExtJs5, because when I add a ViewController for a view, there's error - Uncaught Error: [Ext.createByAlias] Unrecognized alias: controller.mainViewController.
If there's no SenchaCmd but I want to add ViewController and ViewModel for my app, what should I do?
Code
MyApp.view.main.MainView.js
Ext.define('MyApp.view.main.MainView', {
extend: 'Ext.tab.Panel',
alias: 'widget.MainView',
// requires: ['main.MainViewModel'],
controller: 'mainViewController',
// viewModel: {
// type: 'mainView'
// },
tabPosition: 'left',
tabRotation: 0,
defaults: {
textAlign: 'left',
bodyPadding: 15
},
items: [{
title: 'test',
items: [{
xtype: 'button',
listeners: {
onClick: 'onTest'
}
}]
}]
});
CaTools.view.main.MainViewController.js
Ext.define('CaTools.view.main.MainViewController', {
extend: 'Ext.app.ViewController',
alias: 'controller.mainViewController',
onTest: function() {
console.log('test -- ');
}
});
Error
Error - Uncaught Error: [Ext.createByAlias] Unrecognized alias: controller.mainViewController
Many Thanks!!
All that Sencha CMD is doing for you - in this context, anyway - is building a bootstrap file. As part of that, it knows that when it brings in a View, and it sees that the view has a viewModel and controller attribute, it looks for ViewModel and ViewController classes by convention (Model and Controller).
So you can do that yourself. Simply require the ViewModel and ViewController classes from within your View, just as you would require any other class.
(As an alternative - define the ViewModel and ViewController as additional classes inside the View's Javascript file; that way it's always loaded when the View is)
I have a MVC app built with extJS 4.
I want to disable a docked button in a grid panel from a controller
Here is my grid panel view:
Ext.define('SDI.view.MissionsGridPanel', {
extend: 'Ext.grid.Panel',
alias: 'widget.missionsGridPanel',
width: 688,
title: 'Missions',
store: 'MissionsStore',
tbar:[
{
text:'Delete mission',,
icon: '/images/delete.png',
itemId: 'removeMissionButton',
disabled: true,
action :'delete'
}
]...
Here is my controller :
Ext.define('SDI.controller.MissionsController', {
extend: 'Ext.app.Controller',
views: ['SDI.view.MissionsGridPanel'],
refs: [
{
selector:'missionsGridPanel',
ref:'missionsGridPanel'
},
{
selector:'missionsGridPanel button[action=delete]',
ref:'missionsGridPanelToolbarDelButton'
}
],
init: function() {
this.control({
'missionsGridPanel': {
selectionchange: this.onMissionSelect
}
})
},
onMissionSelect: function(pTarget,pRecord,pOptions){
console.log("Mission is selected")
this.getMissionsGridPanelToolbarDelButton().setDisabled(false);
}
});
I don't understand why this doesn't work.
"Mission is selected" is logged but the button remains disabled.
Here is how to troubleshoot this -
Go to the Firebug console, type this:
Ext.ComponentQuery.query('missionsGridPanel button[action=delete]')
and see if anything is being returned. I would recommend installing Illuminations for Developers firebug plugin to further help you figure out whats what on your page.
I am not sure why it's not working, but it works fine if you call it by itemid:
selector: 'missionsGridPanel #removeMissionButton'