I have a nav component with a sub nav associated to it. The data structure is as follows:
{
title: 'Layout', routerLink: 'layout', // main nav
subNav: // sub nav
{
title: 'Layout',
items: [
{ title: 'Layout', routerLink: 'layout' },
{ title: 'Page Layout', routerLink: 'page-layout' },
]
}
}
I would like to create a link between the main nav and the sub nav so that when page-layout is navigated to, the active class is still set. My current parent HTML is:
<div [routerLink]="[item.routerLink]"
[routerLinkActive]="['active']"
[routerLinkActiveOptions]="{ exact: true }" #navitem>
// navigation specific html
</div>
I have attempted to add multiple routerlinks options and provide an array of routerlink options such as
[routerLink]="['/layout', '/page-layout']"
but this doesn't work.
Thanks
Related
I have set up a simple CSS file with a single .test class and have the following settings in TinyMCE I get two menus that both say 'Paragraph at the top. How do edit the CSS styles menu
tinymce.init({
selector: '#tiny',
menubar:false,
'content_css': 'my-styles.css',
importcss_append: false,
style_formats_merge: true,
plugins: ['importcss'],
toolbar: 'code| insertfile undo redo searchreplace | paste pastetext | formatselect | styleselect '
});
format menu
css styles menu
Here's a working example in case anyone else is looking:
content_style:
'.news-img-left { float: left;margin:1em 1em 1em 0;max-width:400px;height:auto }' +
'.news-img-right { float: right;margin:1em 0 1em 1em;max-width:400px;height:auto }' +
'.news-img-full { margin:1em 0;width:100%;max-width:100%;height:auto }',
style_formats: [
{ title: 'Text Formats' },
{ title: 'Paragraph', format: 'p' },
{ title: 'Heading 1', format: 'h1' },
{ title: 'Heading 2', format: 'h2' },
{ title: 'Heading 3', format: 'h3' },
{ title: 'Image Formats' },
{ title: 'Image Full Width', selector: 'img', classes: 'news-img-full' },
{ title: 'Image Left', selector: 'img', classes: 'news-img-left' },
{ title: 'Image Right', selector: 'img', classes: 'news-img-right' },
],
then in tool bar I added button 'styleselect'
This question was also asked in the TinyMCE Github issuetracker and I'll copy in the answer here for completeness.
Both formatselect and styleselect shows the currenly used format. The default format is the "Paragraph", matching the <p> tag basically.
The styleselect doesn't have anything to do with CSS style really, think of it more in terms of visual appearances. The differences between styleselect and formatselect are mainly in the config options available:
The formatselect button is configured by the block_formats option and is rather basic.
The styleselect button is configured through the style_formats option and is much more advanced. It can contain nested menus, have groups etc.
I'm working with PrimeNG 8.1.1 and I would like to push one of the items to the right side (the submenu of logout, and profile).
Any suggeestions please?
this._menuItems = [
{
label: 'Dashboard',
routerLink: '/dashboard'
},
{
icon:'pi pi-fw pi-user',
items: [
{
label: 'Profile',
icon: 'pi pi-fw pi-user',
command:()=> this.profile(),
},
{
label: 'Logout',
icon: 'pi pi-fw pi-sign-out',
command:()=> this.logout(),
}
]
}
]
Full disclosure: I'm new to this, so this may not be the best solution.
Tested on primeng 11.4.2
The menu bar is a flex container, so we should be able to push items around by using standard flex ideas - see Aligning flex items on MDN. As with other answers here, we make use of the style property of the menu item to control how it's displayed, in this case we need to use margin-left: auto to push the item to the right.
The problem I encountered was that the p-menubarsub component does not occupy 100% of the available width, so using margin-left by itself has no effect as there is no space available to move items around.
Once this is fixed, it seemed to work for me.
component.css
:host ::ng-deep p-menubarsub {
width: 100%;
}
component.html
<p-menubar [model]="mainMenu">
<ng-template pTemplate="start">
<h4>Welcome</h4>
</ng-template>
</p-menubar>
component.ts
export class .... {
mainMenu: MenuItem[] = [
{label: 'Left menu item'},
{label: 'Right menu item', style: {'margin-left': 'auto'}
];
If we check the compiled code from prime, we can see that "icon" actually just means class. This means that we can add a custom class to icon without affecting our icon.
this._menuItems = [
{
label: 'Dashboard',
routerLink: '/dashboard'
},
{
icon:'pi pi-fw pi-user',
items: [
{
label: 'Profile',
icon: 'my-margin-left pi pi-fw pi-user',
command:()=> this.profile(),
},
{
label: 'Logout',
icon: 'my-margin-left pi pi-fw pi-sign-out',
command:()=> this.logout(),
}
]
}
]
Now in our Styles.css we can simply add
.layout-wrapper .layout-menu li a > .my-margin-left {
margin-left: 25px;
}
This will add the css for all items in the menu with that class. This solution will work for both menu and submenu items.
For version PrimeNG 11.2.0 you have two options.
(1) Using styleClass property:
this._menuItems = [
{
label: 'Dashboard',
routerLink: '/dashboard'
},
{
icon:'pi pi-fw pi-user',
items: [
{
label: 'Profile',
icon: 'my-margin-left pi pi-fw pi-user',
command:()=> this.profile(),
},
{
label: 'Logout',
styleClass: 'p-ml-6',
icon: 'my-margin-left pi pi-fw pi-sign-out',
command:()=> this.logout(),
}
]
}
]
(2) or Using ng-template pTemplate="end" on HTML:
<p-menubar [model]="items">
<ng-template pTemplate="end">
<button type="button" pButton label="Logout" icon="pi pi-sign-out"></button>
</ng-template>
</p-menubar>
I created custom Gutenberg block for social links but I would need to add input fields where user can paste the url to that social profile. Here is where I would like to put the field (same as paragraph block has alignment settings there for example):
This is my code for the block:
const { registerBlockType } = window.wp.blocks;
const { __ } = window.wp.i18n;
const { BlockControls, AlignmentToolbar} = window.wp.editor;
registerBlockType('social-block/social', {
title: __('Social'),
icon: 'smiley',
category: 'common',
attributes: {
content: {type: 'string'},
color: {type: 'string'}
},
edit: function (props) {
return React.createElement(
"div",
{style: {
display: 'flex',
justifyContent: 'center'
}},
// facebook
React.createElement(
'a',
{
'href': '',
'rel': 'noopener noreferrer',
'target': '_blank'
},
React.createElement(
'svg',
{
'xmlns': "http://www.w3.org/2000/svg",
'xmlns:xlink': "http://www.w3.org/1999/xlink",
'viewBox': "0 0 24 24",
'fill': "currentColor",
'width': "48px",
'height':"48px"
},
React.createElement(
'path',
{
'fill-rule': "evenodd",
'd': "M12 22C6.477 22 2 17.523 2 12S6.477 2 12 2s10 4.477 10 10-4.477 10-10 10zm3-11.762h-1.703V9.2c0-.39.278-.48.474-.48h1.202V7.005L13.318 7c-1.838 0-2.255 1.278-2.255 2.096v1.142H10v1.765h1.063V17h2.234v-4.997h1.508L15 10.238z"
}
)
),
),
}
});
I tried implementing https://developer.wordpress.org/block-editor/tutorials/block-tutorial/block-controls-toolbars-and-inspector/ but its not the behavior that I need, anyone has a suggestion where to look or what to do?
First of all I will recommend you to use the ES6 syntax as it will make your code a lot easier. For ES6 whenever you see any code in WordPress docs then you can choose ESNEXT tab from top of snippet that will then shows you ES6 code.
Now your answer. Gutenberg provides us two kind of controls BlockControl and InspectorControl both of these provides you the way to manipulate your block but the difference is that BlockControl is a toolbar that appears on top of block (its the same link that you shared) while InspectorControls serves as a sidebar setting option the thing that you wanted to do. Here is the actual documentation of Inspector Controls and here is one working example from Image block of Gutenberg core.
I want to use the default button styles from the Bootstrap framework with the default button block of Gutenberg.
I found a solution to remove the default styles from WordPress and add some own styles. Here's the link: https://www.billerickson.net/block-styles-in-gutenberg/
I'm using the code from Bill Erickson to remove the default styles and add a new one. In my case, the .btn-primary style from Bootstrap:
wp.domReady( () => {
wp.blocks.unregisterBlockStyle( 'core/button', 'default' );
wp.blocks.unregisterBlockStyle( 'core/button', 'outline' );
wp.blocks.unregisterBlockStyle( 'core/button', 'squared' );
wp.blocks.registerBlockStyle( 'core/button', {
name: 'btn',
label: 'Default',
isDefault: true,
});
wp.blocks.registerBlockStyle( 'core/button', {
name: 'btn-primary',
label: 'Primary',
} );
} );
There a two problems here:
WordPress adds the class in the wrong way
It just adds one class but Bootstrap needs two at least
This is the button code after adding the class:
<div class="wp-block-button aligncenter is-style-btn-primary">
<a class="wp-block-button__link" href="#">Button</a>
</div>
As you can see, WordPress adds the new class two the div around the button.
And it adds is-style- to the class.
To use the button block with Bootstrap styles. I need a code like this:
<div class="wp-block-button aligncenter is-style-btn-primary">
<a class="btn btn-primary" href="#">Button</a>
</div>
The class has to be inside the <a> tag and I need the second class .btn as well.
Is there any way to add these two classes to the <a> tag?
Another way you can take care of this is using SCSS #extend
First register block styles that will show up in the buttons block editor:
wp.domReady ( function() {
wp.blocks.unregisterBlockStyle( 'core/button', 'outline');
wp.blocks.unregisterBlockStyle( 'core/button', 'fill');
wp.blocks.registerBlockStyle( 'core/button', {
name: 'bootstrap-default',
label: 'Bootstrap Default',
isDefault: true
});
wp.blocks.registerBlockStyle( 'core/button', {
name: 'bootstrap-primary',
label: 'Bootstrap Primary',
});
wp.blocks.registerBlockStyle( 'core/button', {
name: 'bootstrap-success',
label: 'Bootstrap Success',
});
wp.blocks.registerBlockStyle( 'core/button', {
name: 'bootstrap-default-lg',
label: 'Bootstrap Default Large',
});
wp.blocks.registerBlockStyle( 'core/button', {
name: 'bootstrap-primary-lg',
label: 'Bootstrap Primary Large',
});
wp.blocks.registerBlockStyle( 'core/button', {
name: 'bootstrap-success-lg',
label: 'Bootstrap Success Large',
});
});
Then I created a _wordpress.scss that gets included and compiled with the rules from each block style and what Bootstrap rules they extend:
.is-style-bootstrap-default > a {
#extend .btn;
#extend .btn-default;
}
.is-style-bootstrap-primary > a {
#extend .btn;
#extend .btn-primary;
}
.is-style-bootstrap-success > a {
#extend .btn;
#extend .btn-success;
}
.is-style-bootstrap-default-lg > a {
#extend .btn;
#extend .btn-default;
#extend .btn-lg;
}
.is-style-bootstrap-primary-lg > a {
#extend .btn;
#extend .btn-primary;
#extend .btn-lg;
}
.is-style-bootstrap-success-lg > a {
#extend .btn;
#extend .btn-success;
#extend .btn-lg;
}
I think you will find it is less complicated to write your own button than override existing component. If you really want to override the core button block you will probably need to apply the appropriate block filters.
If you are looking for an immediate solution, the source of the button component inside the Advanced Bootstrap Blocks plugin may get you started, or you can install through the plugin directory.
(Full disclosure: I am the author of this plugin.)
You can either install this plugin:
https://wordpress.org/plugins/wp-bootstrap-blocks/
Or read the plugin code and create your own block, then you can also create your own custom styles for buttons.
I am trying to customise a button with multiple entries and multiple sub menus. I have managed to do this satisfactorily with the following code but would like the button label to remain the same whatever menu item is chosen. The listbox is the only method that I have been able to get this effect but fail on other types of button that do retain the label.
tinymce.init({
selector: "textarea",
toolbar: "mybutton",
setup: function(editor) {
editor.addButton('mybutton', {
type: 'listbox',
text: 'Test Menu',
icon: false,
onselect: function(e) {
editor.insertContent(this.value());
},
values: [
{text:'Menu No 1', menu:[
{text:'Sub Menu 1',value:'Some text for sub menu 1'},
{text:'Sub Menu 2',value:'Some text for sub menu 2'}
]},
{text:'Menu No 2', menu:[
{text:'Sub Menu 3',value:'Some text for sub menu 3'},
{text:'Sub Menu 4',value:'Some text for sub menu 4'}
]}
],
});
} });
Any help most appreciated
Having had the same problem I solved it with resetting the text in onselect:
onselect: function(e) {
editor.insertContent(this.value());
this.text('Test Menu');
}