I am trying to set activated link color should be red uisng primeng angular 6.How can i do it this.
ngOnInit() {
this.items = [
{label:'Home', routerLink:'/home'},
{label:'Cycle', routerLink:'/cycle'},
{label:'Football', routerLink:'/football'},
{label:'Cat', routerLink:'/cat'}
];
}
Related
Right now I'm integrating custom plugins into the ckeditor 5. I created and added plugins using the ckeditor 5 documentation.
I also have a custom "super" build (similar to this example) that I use in my web application.
Now my problem is that my plugins will not be disabled in the ckeditor read mode (as showcased in the image at the button). The ckeditor documentation mentions that this should be the "default" behaviour for plugins / buttons.
If someone has an idea where I'm going wrong that'd be greatly appreciated!
Here is a skeleton example of my custom plugin class.
import { Plugin } from 'ckeditor5/src/core';
import { ButtonView } from 'ckeditor5/src/ui';
import ckeditor5Icon from './icons/insertvariable.svg';
export default class HWInsertVariable extends Plugin {
static get pluginName() {
return 'HWInsertVariable';
}
init() {
const that = this;
const editor = this.editor;
const model = editor.model;
let labelTxt = 'Variable einfügen';
editor.ui.componentFactory.add( 'hwInsertVariableButton', locale => {
const view = new ButtonView( locale );
view.set( {
label: labelTxt,
icon: ckeditor5Icon,
tooltip: true,
affectsData: true
} );
this.listenTo( view, 'execute', () => {
model.change( writer => {
that.buttonClicked();
} );
editor.editing.view.focus();
} );
return view;
} );
}
buttonClicked() {
//code
}
}
Im not sure what the correct method to resolve this is, as I also am facing the same. But what I have found so far, is that there might be a hacky way to get around this.
Checkout the docs regarding "disabling commands", "read-only" mode, and notice the CSS class "ck-disabled"
if/when I find a working way, I will try to come back here and post a better solution
Update:
I fixed this for me when I found that I was missing the section of the code in my my_plugin_ui.js where
const command = editor.commands.get('nameOfCommand');
// Execute the command when the button is clicked (executed).
buttonView.bind('isOn', 'isEnabled').to(command, 'value', 'isEnabled');
I'm using RadCalendar in my NativeScript Project, the problem is I want to add custom styling on specific day cell from a cellTap Event.
So I started with listening to the Event
<RadCalendar (cellTap)="onCellTap($event)"></RadCalendar>
in my component.ts file:
onCellTap(args: CalendarCellTapEventData) {
// here, it return the whole RadCalendar Object
console.log(args.object);
// and in the line below it returns the native cell Element
console.log(args.cell)
}
I tried to change directly the CSS properties like this:
args.object.style.backgroundColor = new Color('#ff0000')
but it doesn't work.
Is there a way to perform the required behaviour ?
I don't think adjusting cell style upon tap is supported but it should be possible. To adjust background color of cell,
import { CalendarCellTapEventData } from "nativescript-ui-calendar";
import { Color } from "tns-core-modules/color";
onCellTap(event: CalendarCellTapEventData) {
const color = new Color('#ff0000');
if (color.android) {
// https://docs.telerik.com/devtools/android/AndroidControlsDoc/com/telerik/widget/calendar/CalendarDayCell.html
event.cell.setBackgroundColor(color.android);
} else {
// https://docs.telerik.com/devtools/ios/api/Classes/TKCalendarDayCell.html
event.cell.style().backgroundColor = color.ios;
}
}
I'm using react navigation V3 and i want to use swipe in my bottomTabNavigator.
i can't do it because createBottomTabNavigator don't support it any yet and createBottomNavigator is actually deprecated.
It is very annoying because in react navigation V2 we can do iteasily.
Just createMaterialTopTabNavigator support swipe but i want a bottom navigator and not a top one
If you take a look at the documentation for createMaterialTopTabNavigator you can see that in the TabNavigatorConfig there is the ability to set the position of the tab bar using tabBarPosition
Position of the tab bar, can be 'top' or 'bottom', default is top
So if you use createMaterialTopTabNavigator instead of createMaterialBottomTabNavigator and set tabBarPosition: 'bottom' in your config you should get a createMaterialTopTabNavigator but at the bottom.
Here is what it should look like in code
import Screen1 from './Screen1';
import Screen2 from './Screen2';
import { createMaterialTopTabNavigator, createAppContainer } from 'react-navigation';
const screens = {
Screen1: {
screen: Screen1
},
Screen2: {
screen: Screen2
}
}
const config = {
headerMode: 'none',
initialRouteName: 'Screen1',
tabBarPosition: 'bottom' // <- add this line to your config
}
const MainNavigator = createMaterialTopTabNavigator(screens,config);
export default createAppContainer(MainNavigator);
Here is a snack showing it working https://snack.expo.io/#andypandy/materialtopnavigator-at-the-bottom
Is there anyway to change the color of the dialog window when using the kendo dialog service?
Currently it defaults to red but I need to customize the window to show a different color based on what is passed.
I tried using a kendo-dialog as my template but it doesn't show the action buttons.
<kendo-dialog title="{{title}}" (close)="Cancel()" [ngClass]="yellow">
</kendo-dialog>
I asked myself that same question a while ago and came up with a solution found in this post : Kendo UI angular DialogService - Change the title bar background color
I'll copy my answer here:
I worked a solution for this. It works but it is not elegant one bit.
Here's the plunker link that demonstrates the code :
http://plnkr.co/edit/MGw4Wt95v9XHp9YAdoMt?p=preview
Here's the related code in the service:
const dialog: DialogRef = this.dialogService.open({
actions: message.actions,
content: MessageComponent,
title: message.title
});
const messageComponent = dialog.content.instance;
messageComponent.message = message;
//I get the dialog element and use jQuery to add classes to override styles.
//Let's say I had the error class as well.
const element = dialog.dialog.location.nativeElement;
$( element ).addClass( 'kendo-override ' + message.classes );
return dialog.result;
And the scss:
$error: #c13;
$success: #0c5;
.kendo-override {
&.error {
kendo-dialog-titlebar {
background-color: $error;
}
}
&.success {
kendo-dialog-titlebar {
background-color: $success;
}
}
}
I'm developing an application using Angular, Semantic-UI and Animate.
I'm creating a form and I'm experiencing problems with dropdown that overlaps other inputs when it is open.
Here is a Plunker: https://plnkr.co/edit/BTCxfk
As you can see removing animated fadeIn animation from the class of Semantic-UI fields fixes the problem.
Then, what can I do to keep using both Semantic-UI and Animate and having that dropdown menu working with no bugs?
In this case it's recommended to use the built-in fade in animation (transition) in semantic-ui . this won't cause any bug on the dropdown .So first
remove animated fadeIn class , then change your code to the following :
export class App {
constructor() {
jQuery('.fields')
.transition('fade in')
;
setTimeout(() => {
jQuery('.ui.dropdown').dropdown();
}, 1000);)
}
}
Note that you can set parameters for your transition like: duration,callback... ,in transition settings:
jQuery('.fields')
.transition({
animation : 'fade in',
duration : '2s',
onComplete : function() {
alert('done');
}
})
;
For more settings see Docs