I have created a horizontal menu for Element Plus UI on Vue. When I right click on a menu item, I do not have the option to open it in a new tab.
But when on the element plus documentation. When I right click on a menu item I have that option:
How do I achieve that functionality since I can't find any references on that on the documentation?
Menu Code:
<template>
<el-menu
class="sideMenu"
:collapse="isCollapse"
active-text-color="#409EFF"
:default-active="activeLink"
text-color="#909399"
background-color="#FFFFFF"
:router="true"
>
<el-menu-item index="/menu1">
<el-icon><DocumentChecked /></el-icon>
<span>Menu 1</span>
</el-menu-item>
<el-menu-item index="/menu2">
<el-icon><DocumentChecked /></el-icon>
<span>Menu 2</span>
</el-menu-item>
</el-menu>
</template>
According to Element Plus documentation el-menu-item
has an attribute of route: which is type Obj. So, the el-menu-item class would be like:
<el-menu-item index="/menu1" route= VUE-ROUTER-OBJ>
Or You can use the menu attribute which activates routing from the index value of menu-items:
<!DOCTYPE html>
<el-menu
:default-active="activeIndex"
class="el-menu-demo"
mode="horizontal"
#select="handleSelect"
router= true
>
<!-- router is the key attribute-->
<el-menu-item index="/" route="/"> Home </el-menu-item>
<el-menu-item index="PATH OF VUE ROUTER"> LINK NAME </el-menu-item>
You need to add anchor tag inside el-menu-item.
<el-menu-item index="4">
<a href="https://www.ele.me" target="_blank">
<el-icon><DocumentChecked /></el-icon>
<span>Menu 1</span>
</a>
</el-menu-item>
<el-menu-item index="4">Simple Link</el-menu-item>
Related
Here is the source code, I just add a margin:auto to el-header，it exactly Centered display， but the last el-menu-item is displayed as "。。。"，when I put the mouse hover on the "。。。"，the last menu-item "注册" was shown int the blow.
If I remove the CSS, the last one displayed normally, but the menu will not be centred,I do not know how to fix it.
<el-header>
<el-menu
:default-active="'/'+this.$route.path.split('/')[1]"
mode="horizontal"
:router="true"
:style="{background:'#f7f7f7'}"
>
<el-menu-item index="/">首页</el-menu-item>
<el-menu-item index="/Lost">寻物广场</el-menu-item>
<el-menu-item index="/Found">招领广场</el-menu-item>
<el-menu-item index="/Post">发布启事</el-menu-item>
<el-menu-item index="/Me">我的</el-menu-item>
<el-menu-item index="/Login">登录</el-menu-item>
<el-menu-item index="/Register">注册</el-menu-item>
</el-menu>
</el-header>
.el-header {
margin: auto;
}
I have solved this problem, just add a :ellipsis="false" to the el-menu.
<el-menu
:default-active="'/'+this.$route.path.split('/')[1]"
mode="horizontal"
:router="true"
:style="{background:'#f7f7f7'}"
:ellipsis="false"
>
I'm trying to create a list with checkboxes for collecting actions with materialize, but the input tag didn't get recognized by the pattern. Is this possible?
<div class="row">
<ul class="collection with-header" v-if="listaRoles.length > 0">
<li class="collection-header left-align"><h4> Roles do perfil {{ perfil.descricao }}</h4></li>
<li v-for="r in listaRoles" :key="r.id" class="collection-item">
<div class="left-align">
<span> {{ r.descricao }} </span>
<input type="checkbox" />
</div>
</li>
</ul>
</div>
You have to use the exact same structure as the materialize docs, otherwise your components won't work correctly. So in the case of checkboxes that is <input>, followed by <span>, and both of these wrapped in a <label>.
<label>
<input type="checkbox" />
<span>Red</span>
</label>
Any deviation from this will break the component.
EDIT:
Checkboxes inside li works perfectly fine, here a codepen to demonstrate:
https://codepen.io/doughballs/pen/KKpNrPy
The error is coming from somewhere else.
https://materializecss.com/checkboxes.html
This is my component:
{{#link-to routeName class="list-group-item"}}
<i class="fa {{icon}} fa-fw"></i> {{text}}
{{/link-to}}
Which I use:
<div class="list-group">
{{icon-link routeName="my-account" icon="fa-user" text="Personal details"}}
...
</div>
The expected html is:
<div class="list-group">
<a class="list-group-item" href="xxx">
<i class="fa fa-user fa-fw"></i> Personal details
</a>
...
</div>
But because ember wraps the components in a div, the bootstrap rules do not apply anymore and the list-group has a wrong style.
If I change the component tag to a, and remove link-to from the component template, I loose the flexibility of link-to - and I do not know how to set attributes (href, class) in the containing tag.
It seems I can not use an Ember component for this then? Or is there a way to tellink ember no to wrap my component in a div, or anything else really: in order for the CSS to work, the markup structure must not be modified.
I've not tried this myself but apparently you can create custom link-to components by extending Ember.LinkComponent. Something like this might work...
// app/components/icon-link.js
export default Ember.LinkComponent.extend({
classNames: ["list-group-item"],
icon: null,
text: null,
})
...
// app/templates/components/icon-link.hbs
<i class="fa {{icon}} fa-fw"></i> {{text}}
...
// wherever
{{icon-link 'my-account' icon="fa-user" text="Personal details"}}
Here's a related blog post which may help you also - http://til.hashrocket.com/posts/faef1058c3-inheriting-from-linkcomponent-in-ember-is-amazing
I can't figure out why this Bootstrap modal receives the wrong data context.
Let's begin with my templates (excluding the modal for now). The first iterates through a list of items fetched by itemsList:
<template name="CategoryItems">
<ul>
{{#each itemsList}}
{{> Item}}
{{/each}}
</ul>
</template>
itemsList looks like this, by the way:
itemsList: function() {
return Items.find()
}
The inside template, Item, details just how these items should appear:
<template name="Item">
<li>
<span class="item-name">{{name}} </span>
<a href="#" class="anchor-item-edit" data-toggle="modal" data-target="#edit-item-modal">
<span class="fa fa-2x fa-pencil-square-o"></span> //Font Awesome icon
</a>
{{> EditItemModal}}
</li>
</template>
So basically it displays the name of the item fetched from the database and then provides an edit button that opens the edit-item-modal. The modal itself is placed here (it's hidden by default) so that it gets the correct data context, however that doesn't seem to work.
When the edit link is clicked, the modal opens. Excluding a lot of markup, it looks like this:
<template name="EditItemModal">
<div class="modal fade" id="edit-item-modal" tabindex="-1" role="dialog" aria-hidden="true">
<h4>{{name}}</h4>
</div>
</template>
The name, however, always displays the name of my first item in the list, ignoring what I actually clicked on.
A very strange thing, though, is that if I include a helper check inside the modal like so,
<template name="EditItemModal">
{{checkDataContext}}
//the other stuff
</template>
and makes the helper look like this,
Template.EditItemModal.helpers({
checkDataContext: function() {
console.dir(this)
}
})
then all the correct items are spit out in the console as soon as I load the page.
What's going on here?
Your modal markup only defines one shared ID between all of your modals, which is not valid HTML and ends up being the root of your problem.
When you click on any button triggering the modal, it's going to show up the first modal it finds in your markup, which always happens to be the first one.
You need to decorate your modals IDs with your items IDs (since they come from a Mongo.Collection), your markup will no longer contain duplicated modal IDs and your code will run as expected.
<template name="EditItemModal">
<div class="modal fade" id="edit-item-modal-{{_id}}" tabindex="-1" role="dialog" aria-hidden="true">
<h4>{{name}}</h4>
</div>
</template>
<template name="Item">
<li>
<span class="item-name">{{name}} </span>
<a href="#" class="anchor-item-edit" data-toggle="modal" data-target="#edit-item-modal-{{_id}}">
<span class="fa fa-2x fa-pencil-square-o"></span> //Font Awesome icon
</a>
{{> EditItemModal}}
</li>
</template>
I have a dynamic form that's using <core-ajax> to bind data into multiple <paper-dropdown-menu>'s. My question: What is the preferred way to change the data in each dropdown based upon the previous one's selection. Right now, there is no javascript for it, only Polymer data-binding. Here is the code:
<polymer-element name="example-element" attributes="">
<template>
<link rel="stylesheet" href="example-element.css">
<core-ajax auto
url="http://example.json"
response="{{regionData}}"
handleAs="json">
</core-ajax>
<!-- global user object -->
<pvc-globals id="globals" values="{{globals}}"></pvc-globals>
<!-- page container -->
<div class="background" vertical layout>
<!-- toolbar -->
<template is="auto-binding">
<!-- Add teams dialog -->
<paper-action-dialog heading="Add A Example" backdrop autoCloseDisabled
id="addTeamDialog">
<p>Once this form is complete, you will have a new example on your account.</p>
<br>
<!-- Region Name -->
<paper-dropdown-menu label="Choose Your Region" style="width: 100%;">
<paper-dropdown class="dropdown">
<core-menu class="menu" selected="{{selection}}">
<template repeat="{{region in regionData}}">
<paper-item name="{{region.name}}">{{region.name}}</paper-item>
</template>
</core-menu>
</paper-dropdown>
</paper-dropdown-menu>
<br><br>
<!-- State Name depending on what region you choose -->
<paper-dropdown-menu label="Choose Your State" style="width: 100%;">
<paper-dropdown class="dropdown">
<core-menu class="menu">
<template ref="{{region.name}}" repeat="{{region, regionIndex in regionData}}">
<paper-item>{{region.states[regionIndex]}}</paper-item>
</template>
</core-menu>
</paper-dropdown>
</paper-dropdown-menu>
<br><br>
<!-- Club Name -->
<paper-dropdown-menu label="Choose Your Club depending on what region you choose" style="width: 100%;">
<paper-dropdown class="dropdown">
<core-menu class="menu">
<template repeat="{{region, regionIndex in regionData}}">
<template repeat="{{clubs in region.clubs}}">
<paper-item>{{clubs.name}}</paper-item>
</template>
</template>
</core-menu>
</paper-dropdown>
</paper-dropdown-menu>
<br><br>
<!-- Team Name -->
<paper-dropdown-menu label="Choose Your Team" style="width: 100%;">
<paper-dropdown class="dropdown">
<core-menu class="menu">
<template repeat="{{region, regionIndex in regionData}}">
<template repeat="{{clubs in region.clubs}}">
<paper-item>{{clubs.teams[regionIndex]}}</paper-item>
</template>
</template>
</core-menu>
</paper-dropdown>
</paper-dropdown-menu>
<!-- <paper-input-decorator label="Your Team Name" floatingLabel
error="Team Name is required!" autovalidate>
<input is="core-input" type="text" value="{{teamName}}" required>
</paper-input-decorator> -->
<paper-button dismissive on-tap="{{openInfo}}">More Info...</paper-button>
<paper-button affirmative>Cancel</paper-button>
<paper-button affirmative>Add Team</paper-button>
</paper-action-dialog>
<!-- more info dialog (At time, adding `backdrop` attr to this caused error on close) -->
<paper-dialog heading="More Info For Adding Teams" transition="core-transition-top"
id="infoDialog">
<p>If you're region or team is missing, please email us at
info#mintonette.io so we can contact the
neccessary region/authorities to request your addition to join our community!</p>
</paper-dialog>
<!-- toast -->
<paper-toast id="toast1" text="{{message}}" onclick="discardDraft(el)"></paper-toast>
</div>
</template>
<script src="example-element.js"></script>
</polymer-element>
Here is my example of dependent(cascading) drop-down's: JSBin
It is commented, but shortly this is what it does:
it assumes that there is saved state(in the DB) and at load it
initiate the drop-downs according to that state.
it catches selection changes(for storing them after).
Found what I feel to be the most 'Polymer-way' possible to this question (until a Polymer team member answers it). Once you have access to your JSON data via <core-ajax> element, then bind and loop through it in your <paper-dropdown-menu> like so:
<core-ajax auto
url="http://jsonexample.com/example.json"
response="{{yourData}}"
handleAs="json">
</core-ajax>
<!-- Region Name -->
<paper-dropdown-menu label="Your Label" style="width: 100%;">
<paper-dropdown class="dropdown">
<core-menu class="menu" selected="{{selection}}" on-core-select="{{DDSelected}}">
<template repeat="{{something in yourData}}">
<paper-item name="{{something.name}}">{{something.name}}</paper-item>
</template>
</core-menu>
</paper-dropdown>
</paper-dropdown-menu>
Notice that on the <core-menu> element there is the on-core-selected attribute that binds to a function in our script, which looks like this:
regionSelected: function(e) {
var convert = [];
// save selected item
this.item = this.DDSelection;
// Loop through ajax data to find obj selected that matches selection
for (var i = 0; i <= this.yourData.length - 1; i++) {
if (this.yourData[i].name === this.item) {
this.yourObj = this.yourData[i];
// convert obj to array b/c Polymer doesn't loop -> obj
convert.push(this.yourObj);
this.convert = convert;
}
}
}
What this is basically doing is taking the selection that the user chose and looping through your ajax data to find a matching property name. Once it has, then convert that object into an array (if necessary). This is crucial because as of now, Polymer only loops through arrays - not objects. Then, store it as a variable called convert
Once you do this, in your next dropdown, loop through convert and you are golden:
...
<paper-dropdown-menu label="Choose Your Second" style="width: 100%;"
disabled?="{{!selection}}">
<paper-dropdown class="dropdown">
<core-menu class="menu">
<template repeat="{{key, index in convert}}">
<template repeat="{{prop in key.props}}">
<paper-item>{{prop}}</paper-item>
</template>
</template>
</core-menu>
</paper-dropdown>
</paper-dropdown-menu>
A good UX move is to also disable the dropdown until the first has been selected. Notice the disabled?="{{selection}}" attribute on the <paper-dropdown-menu> element which is doing that...
That's it!