Say I have this simple scaffold in my app_component.html:
<header>
<div>
<!-- here I have some elements that won't change -->
</div>
<div>
<!-- SECTION HEADER: but I want to change this part's content, based on
navigation or something else (auth roles, for example) -->
</div>
</header>
<main>
<div class="container">
<div class="row">
<div class="col s12">
<section class="section">
<router-outlet>
<!-- SECTION MAIN: main content goes here -->
</router-outlet>
</section>
</div>
</div>
</div>
</main>
<div class="divider"></div>
<footer>
<div>
some footer here. nothing important
</div>
</footer>
As you can see in the snippet, I'm using a <router-outlet> in SECTION MAIN to show contents which is fine. The problem is, how can I have a changeable part in header section (the SECTION HEADER in the code) and how can I change it's content based on e.g. navigation, auth roles, etc. ? Does AngularDart support this kind of routing? Thanks in advance.
The short answer is no, the router doesn't currently have support for doing this easily.
Other frameworks support this functionality through "named" router outlets. This allows multiple outlets to exist in the same view, provided they're given unique names. Each route configuration then must designate which component is rendered in which named outlet. If this sounds desirable, please feel free to file a feature request: https://github.com/dart-lang/angular
Of course you could always write your own solution. You could create a component for the header section that dynamically loads a different component, depending on which route is active. It simply needs to inject Router and listen to Router.stream for route changes.
Related
In the features tag on the homepage layout of the Vuepress, any markdown notation can't be used due to get the error.
So, I'd like to make my custom layout which is extended from the default homepage layout and to get possible to use markdown.
Is this possible? Any suggestion is welcome, thank you!
I agree with #Sun Haoran's answer, but want to note a good way to add content/html is using a component.
We created a front page component called HomeFeatures.vue. (see the repo) Also, we pretty much just copied this straight from vuepress.
<template>
<div class="features">
<div class="feature">
<h2>AccuTerm</h2>
<p>
Getting Started<br />
Licensing<br />
Desktop<br />
Web<br />
Mobile
</p>
</div>
<div class="feature">
<h2>jBASE</h2>
<p>All Docs<br /></p>
</div>
<div class="feature">
<h2>OpenQM</h2>
<p>Main (Coming Soon!)<br /></p>
</div>
<div class="feature">
<h2>MV Dashboard</h2>
<p>
Introduction<br />
Installation Guide<br />
Programmers Guide
</p>
</div>
<div class="feature">
<h2>MV Connect</h2>
<p>
Overview<br />
Getting Started<br />
API
</p>
</div>
<div class="feature">
<h2>Customer Portal</h2>
<p>
All Docs
</p>
</div>
</div>
</template>
<script>
export default {
name: 'Features'
};
</script>
And just included it like so: (see the repo)
---
home: true
heroImage: /assets/img/logo-grey.png
heroText: Product Documentation
tagline: Welcome to the future
footer: MIT Licensed | Copyright © 2019-present Company Name
---
<HomeFeatures />
Our docs live here if you'd like to see it in action.
Currently, you can't without going through a lot of trouble. The default theme's homepage is using YAML front matter to pass on user config texts, which will not be parsed as markdown.
Personally, I suggest you try to use HTML directly with a customized layout. To use a customized layout for the homepage, check my other answer, and to use HTML see the relavent issue in VuePress #2186
when i add a custom option in my magento product, im using magento 1.7.02 my theme broken for some reason, i tried change something in the view.phtml (template/catalog/product) but without success...
i dont know where i can change there to fix, i tried change the position from the custom option, but nothing worked
Some ideas please?
Product With Custom Option
Product without Custom Option
*the code in view.phtml
<!-- AddThis Button END -->
</div>
</div>
<div class="clearer"></div>
</form>
I can see a solution for that two tabs Product Description and Product tags are showing well
open http://www.boutiquekawaii.com/corsets/corset-test.html
go to inspect by right click and select Inspect
Now down there in Elements tab search for this class product-shop span8
you will find a div like this
<div class="product-shop span8">
....
<div class="clearer"></div> <!-- you need to move this -->
</div>
and in that div there is a div like this <div class="clearer"></div> which should not be there.That div should be after
like this
<div class="product-shop span8">
....
</div>
<div class="clearer"></div> <!-- and place it here before </form> tag -->
</form>
And you will have this result. Just like your other page.
So open that file template/catalog/product/view.phtml find <div class="clearer"></div> and change it like i said.
I'm doing maintenance work on a magento site for a client and I'm trying to w3c validate the site.
The problem is that the blocks in the main column are all being wrapped with a <p> tag.
<div class="col-main last">
<div class="std">
<p>
<div class="flexslider">
...
I tried using debug_backtrace and managed to locate the problem to originate somewhere between calls to the Abstract class (app/code/core/Mage/Core/Block/Abstract.php). Maybe there is some sort of filter that applies the <p> tag?
I've not previously worked with magento so any help towards debugging the issue would be greatly appreciated.
Where should I start looking?
If it's only for cms pages then the <p> comes from the content of the page. Edit the page in CMS->Pages and replace the tag with a <div>.
I have main layout template /views/web/main_lo.blade.php as
<html>
<head>
<meta charset="UTF-8">
<title>{{$title or 'Default Title'}}</title>
</head>
<body>
<div class="section-1-outer">
#section('section-1')
<div class="section-1-parent">parent section 1</div>
#show
</div>
<div class="section-2-outer">
#section('section-2')
<div class="section-2-parent">parent section 2</div>
#show
</div>
<div class="section-3-outer">
#section('section-3')
<div class="section-3-parent">parent section 3</div>
#show
</div>
<div>
#yield('content')
</div>
</body>
</html>
and a section template as:
#extends('web.main_lo')
#section('section-1')
#parent
<div class='section-1-child'>
<p>Appended to parent</p>
</div>
#stop
#section('section-2')
<div class='section-2-child'>
<p>Replace parent</p>
</div>
#stop
#section('section-3')
<div class='section-3-child'>
<p>Replace parent</p>
</div>
#overwrite
Now here section layout is extending main_lo, here First section-1 which is quite clear that child section will include parent section-1 and content in parent section will also be printed.
Now my confusion is what on earth is difference between section-2 and section-3 implementation as they both replace content of parent section and only content in child get printed. I mean what is need of this extra #overwrite tag when documentation clearly states that
"Note that views which extend a Blade layout simply override sections
from the layout."
and then there is Overwriting Sections using #overwrite which is also for replacing content of parent section.
Laravel view's sections are a bit oddish and the bad part is that it's not obvious from the start.
Sections are actually extending in converse order, the section defined first will be the child and the one later will be the parent. So #parent is actually including the content of the section which may come after.
This is why I think parent and child are not the best terms for this system.
This is not obvious because of the conventional use case - layouts - it looks like the layout sections are the ones defined first. But actually they ran after the content sections are rendered.
This means #overwrite is actually used with the parent section, not the child. Which wouldn't make much sense in your example as you're yielding (#show) in the layout too, meaning you don't want to overwrite there.
The reason for this is actually because #overwrite was made for less conventional use cases, not when you have a layout-content, parent-child relationship.
Most often this happens when you include some partial files - maybe all over the place - where you use the same section names and you run into a problem when the earlier defined section is the one showing instead of the later.
for some reason this navbar is not rendering correctly on the browser :
<header data-role="header">
<div id="navbar-personalize" data-role="navbar" class="my-navbar">
<div data-align="left">
<img src="../../Images/dashboard6.png" alt="Dashboard"/>
</div>
<span data-role="view-title">Cart Summary</span>
<div data-align="right">
<a href="#merchandise-otherorders-view">
<img src="../../Images/whoelse6.png" alt="Who else is going?"/>
</a>
</div>
</div>
</header>
I have other navbars just like this one all around my index file, and they all work fine, except for this one. It seems that KendoUI isn't initializing it all. By inspecting the code I can see that it's missing all of kendo's styling (like "km-navbar" and such).
It may have to do with the fact that I'm defining this header in each one of the views inside the file, instead of defining it in the app layout, but for some reason defining it inside the app layout doesn't work for me, it simply doesn't render at all.
I'm out of ideas, can somebody help me?
Thanks
I had this problem today. Make sure that kendo.mobile.min.js is included on your page. The docs don't say to put it in, but adding that made it work for me.