Based on the starter kit I have created a new app. I would like to link the different pages to a set of icons in the app-toolbar.
I got it working with:
<a href="/main-stream">
<paper-icon-button icon="icons:view-stream"></paper-icon-button>
</a>
But I think I am missing something here. Is there a better way?
in your app-Component you have a variable called page. This variable indicates the current view that is shown. To modify its value you can use the iron-selector like in the demo app.
<iron-selector selected="[[page]]" attr-for-selected="name" class="drawer-list" role="navigation">
<a name="view1" href="[[rootPath]]view1">View One</a>
<a name="view2" href="[[rootPath]]view2">View Two</a>
<a name="view3" href="[[rootPath]]view3">View Three</a>
</iron-selector>
Copied from:https://github.com/PolymerElements/polymer-starter-kit/blob/master/src/my-app.html
Related
Below is the file structure
I have default Index page under Pages folder, which has layout as _LayoutHarman.cshmtl
Code : Pages/Shared/_LayoutHarman.chtml
header menu : pages are in subfolder.ie category folder in this case
<a asp-route-cat_slug="electronic" asp-page="./category/Index">Electronic</a>
<a asp-route-cat_slug="beauty-care" asp-page="./category/index" >Beauty Care</a>
<a asp-route-cat_slug="toy" asp-page="./category/index" >Toy</a>
footer menu : pages are on root folder
<a asp-page="./Contact" >Contact</a>
<a asp-page="./terms" >Terms</a>
<a asp-page="./privacy" >Privacy</a>
Code : Pages/category/Index.cshtml
#page "{cat_slug?}/{pageIndex:int?}"
#model bList.Pages.category.IndexModel
#{
}
<nav aria-label="Page navigation example">
<ul class="pagination text-center">
#if(Model.prev_no!=0){
<li><a asp-page="category" asp-route-cat_slug="#Model.cat_url" asp-route-pageIndex="#Model.prev_no"> Previous</a></li>
}
#if (Model.no_more_record != "YES")
{
<li><a asp-page="category" asp-route-cat_slug="#Model.cat_url" asp-route-pageIndex="#Model.next_no">Next</a></li>
}
</ul>
</nav>
Here Next/ previous button generate url as follow
https://localhost:8080/category/toy/1
https://localhost:8080/category/toy/2
https://localhost:8080/category/toy/3
respective on selected category
Issue : When i visit on category page and click on prev or next button and then try to click on link Contact,Terms,Privacy i.e (which is on _LayoutHarman.cshtml) or on header menu then href become blank.
Edited One:
Code: On _LayoutHarman.cshtml
HeaderMenu:
<a href="./category/toy" >toy</a>
Footer Menu
<a asp-page="./Contact" >Contact</a>
<a asp-page="./terms" >Terms</a>
Code: On Category/Index.html page
Prev</li>
Next
Now on Next/ Prev button click , header menu generates url as
https://localhost:44382/category/toy/category/toy hence error page occurs. but for footer menu contact/term/privacy works properly
I did reproduce your problem, you need to delete the point(.) in asp-page attribute in your _LayoutHarman.cshmtl.
Changed like this:
<a asp-route-cat_slug="electronic" asp-page="/category/Index">Electronic</a>
<a asp-route-cat_slug="beauty-care" asp-page="/category/index" >Beauty Care</a>
<a asp-route-cat_slug="toy" asp-page="/category/index" >Toy</a>
<a asp-page="/Contact" >Contact</a>
<a asp-page="/terms" >Terms</a>
<a asp-page="/privacy" >Privacy</a>
And you don't need to add asp-page="category" in Pages/category/Index.cshtml, just delete this attribute in this page.
Here is my test result:
Do you really need all this extra server side processing, asp-route-cat_slug asp-page?
Can't you just use plain old fashion HTML hyperlink? As for the dynamic parameters maybe you can set only them...
View category
Just an idea to think on...
Cheers
I'm using a UIKit library for a tab component that listens to a uk-tab property that targets an id. The problem with this, is that it creates the same ID for every tabbed component. I like the UI, but whoever thought of this, didn't think too far into it. I could fix it by making the id dynamic but I am having trouble calling it in the uk-tab property because it is rendering a string. Coming from a react background, I would do a string literal and some JSX, something like #item-${_id}to show #item-12, #item-13....and so on. But That's not working. How can I do this in Vue?
Here is an example of how it works
<div class="mytrigger">
<ul uk-tab="connect: #component-tab-left; animation: uk-animation-fade">
</div>
<div class="mytargetedtab">
<ul id="component-tab-left" class="uk-switcher">
</div>
Here is an example of how what I need
<div class="mytrigger">
<ul uk-tab="connect: #_uid+'switcher'; animation: uk-animation-fade">
</div>
<div class="mytargetedtab">
<ul :id="_uid+'switcher'" class="uk-switcher">
</div>
Check out the dev tools. It should be 810switcher, but instead is taking it as a string
Any ideas? Thanks
I believe what you need is:
<ul :uk-tab="`connect: #${_uid}switcher; animation: uk-animation-fade`">
Or if you prefer not to use backticks:
<ul :uk-tab="'connect: #' + _uid + 'switcher; animation: uk-animation-fade'">
The output will be:
<ul uk-tab="connect: #22switcher; animation: uk-animation-fade">
A few notes:
Using a : is short for v-bind: but don't let the name confuse you. v-bind doesn't necessarily bind anything, it just makes the attribute value a JavaScript expression.
I'd avoid using numbers at the start of element ids, I've seen that cause problems in the past. It'd be better to put the numbers at the end.
The underscore at the start of _uid indicates that it's private to Vue. There are no guarantees about what form it will take or whether it will even exist going forward.
Use data-uk-tab instead of uk-tab like below.
<div class="mytrigger">
<ul data-uk-tab="{connect: `#${_uid}switcher`, animation: 'uk-animation-fade'}">
</div>
<div class="mytargetedtab">
<ul :id="_uid+'switcher'" class="uk-switcher">
</div>
For more information => Switcher with tabs
You can use any javascript expression in a data binding in vue. So, if you bind a string template to the attribute, it'll populate what you expect.
<ul :uk-tab="`connect: #${uid}switcher`'; animation: uk-animation-fade">
I'm trying to display the thumbnail images of each product on category page in Stencil CLI - BigCommerce with the option to slide. The most logical thing to do was to take the snippet from product-view.html and just paste it in card.html, unfortunately, it was to easy to be true.
I've tried changing the handlebars multiple times and replacing the a href url, but still no luck.
<ul class="productView-thumbnails"{{#gt product.images.length 5}} data-slick='{
"infinite": false,
"mobileFirst": true,
"slidesToShow": 5,
"slidesToScroll": 1
}'{{/gt}}>
{{#each product.images}}
<li class="productView-thumbnail">
<a
class="productView-thumbnail-link"
href="{{getImage this 'product_size' (cdn ../theme_settings.default_image_product)}}"
data-image-gallery-item
data-image-gallery-new-image-url="{{getImage this 'product_size' (cdn ../theme_settings.default_image_product)}}"
data-image-gallery-zoom-image-url="{{getImage this 'zoom_size' (cdn ../theme_settings.default_image_product)}}">
<img class="lazyload" data-sizes="auto" src="{{cdn 'img/loading.svg'}}" data-src="{{getImage this 'productview_thumb_size' (cdn ../theme_settings.default_image_product)}}" alt="{{this.alt}}" title="{{this.alt}}">
</a>
</li>
{{/each}}
</ul>
Any ideas ? Thanks.
I believe it's not possible using handlebars helpers. according to documentation, product thumbnails is not assigned as global attributes. so it won't work if you copy the code to category template.
I am using OneUI which is basically just an extension of the dojo didjit widgets.
I need to put a widget inside a widget.
I am using a div with data-dojo-type="dojo.store.Memory".
I am then setting various elements of this using data-dojo-props.
So for example I have some spans and links set within the data-dojo-props.
These are work and display fine.
I am now trying to add a div which itself is a widget. So I've added the div and within this div I am setting the data-dojo-type as a HoverHelpToolTip and setting some other elements such as an onmouseover and some data-dojo-props.
Essentially what should happen is that a hover help tooltip should pop up on mouse over - but it isn't working at all.
So I suppose my question here is how do I correctly nest one widget within another?
Thanks
Sample Code
I am declaring it as follows...
<div data-dojo-id="store1819454249457680384" data-dojo-type="dojo.store.Memory" id="store1819454249457680384" data-dojo-props="data:[{"Name":"<!--o3nv--> ","id":1,"gender":"Female","ActionColumn":"<span class=\"actions\" ><a href=\"...\" onclick=\"...\" title=\"Click here to edit this item\" >Edit<\/a><span class=\"linksDivider\" > | <\/span><a href=\"#\" onclick=\"...\" title=\"Click here to delete this item\" >Delete<\/a><\/span>","Person.firstName":"werrwewre",
<!-- This is the start of the code in question -->
"HelpColumn":"<div class=\"hiddenHelpDialog\" data-dojo- props=\"forceFocus:true,connectId:['helpAnchor_rowHelp10309939']\" data-dojo- type=\"idx\/oneui\/HoverHelpTooltip\" id=\"rowHelp10309939\" style=\"text-align: left; position:relative; display:none\" widgetid=\"rowHelp10309939\" ><div class=\"helpDivDialog\" ><p class=\"helpFieldHeadingDialog\" >\u00a0<\/p><p class=\"helpDescriptionTextDialog\" >BLAH BLAH BLAH BLAH<\/p><\/div><\/div><a class=\"openHelpLink openHelpLinkDisplayField\" id=\"helpAnchor_rowHelp10309939\" onmouseover=\"idx.oneui.HoverHelpTooltip.defaultPosition=['above']\" ><\/a>"}]" ><!-- comment--></div>
It produces the following HTML which works correctly apart from the HoverHelpTip not appearing. The onmouseover is firing. Its alsmot like the widget isn't registered with dojo?!?!
<div widgetid="rowHelp1248193624" style="text-align: left; position:relative; display:none" id="rowHelp1248193624" data-dojo-type="idx/oneui/HoverHelpTooltip" data-dojo-props="forceFocus:true,connectId:'helpAnchor_rowHelp1248193624'" class="hiddenHelpDialog"> <div class="helpDivDialog">
<p class="helpFieldHeadingDialog"> </p>
<p class="helpDescriptionTextDialog">BLAH BLAH BLAH BLAH</p></div></div>
<a class="openHelpLink openHelpLinkDisplayField" id="helpAnchor_rowHelp1248193624" onmouseover="idx.oneui.HoverHelpTooltip.defaultPosition=['above'];">
<span class="hidden"> </span></a>
I fixed this by calling parser.instantiate(node) on the DOM Node when dojo is ready.
I dont know why but for some reason the widget was not being picked up/parsed.
I check dijit.registry and there was no mention of it and a lookup using dijit.byid returned undefined.
Explicitly instantiating the node worked however.
Anyone got any idea why????
Hot to find in dojo element when I know id of parent and I know type and style class of element which I looking for ?
For example, I want find and change (span style=tabLabel) ALARMS into Mga alarma
<div dojoattachpoint="focusNode" role="tab" style="-moz-user-select: none;" id="tab_div_tablist_dijit_layout_ContentPane_1" tabindex="-1" title="" aria-selected="false">
<img dojoattachpoint="iconNode" class="dijitIcon dijitTabButtonIcon dijitNoIcon" alt="" src="dojoroot/dojo/resources/blank.gif">
<span class="tabLabel" dojoattachpoint="containerNode" style="-moz-user-select: none;">Alarms</span>
<span role="presentation" dojoattachevent="onclick: onClickCloseButton" dojoattachpoint="closeNode" class="dijitInline dijitTabCloseButton dijitTabCloseIcon" style="display: none;">
<span class="dijitTabCloseText" dojoattachpoint="closeText">[x]</span></span>
</div>
In this case it is pretty easy. If you look at the span element you refer to it has a dojoattachpoint attribute specified. That means that the node can be accessed from the widget directly with that name.
Now I assume that the widget is called "tab_div_tablist_dijit_layout_ContentPane_1" from the id in your code so to get the widget:
var widget = dijit.byId("tab_div_tablist_dijit_layout_ContentPane_1");
And the dojoattachpoint on the span has the value containerNode so:
widget.containerNode.innerHTML = "Mga alarma";
I think that should work.
If you're creating a custom widget template and wish to localize a string, there is a mechanism to do this. Simply use a substitution pattern like ${alarm} and define a javascript property on your widget with that name. That property can then be populated with a localization bundle using dojo.i18n. You can look at some of the dijits like dijit.Dialog.postMixInProperties to see how this is done.