In Vuetify's pre-defined layouts, there are two very similar pieces of example code:
<v-app>
<v-navigation-drawer app></v-navigation-drawer>
<v-toolbar app></v-toolbar>
<v-content>
<v-container fluid>
<router-view></router-view>
</v-container>
</v-content>
<v-footer app></v-footer>
</v-app>
and
<v-app>
<v-navigation-drawer app></v-navigation-drawer>
<v-toolbar app></v-toolbar>
<v-content>
<router-view>
<v-container fluid></v-container>
</router-view>
</v-content>
<v-footer app></v-footer>
</v-app>
The second one looks better in my app, but it really confuses me how it works. How can there be a <v-container> inside <router-view> when <router-view> is replaced by route content? What is this supposed to achieve?
Any direct content of <router-view> will be displayed when there is no matching route for that <router-view>. It will be replaced by the matched route component. It's placeholder content until a route is matched.
Related
I would like to be able to fully control the background color of an element inside a Vuetify3 card with variant=tonal.
In the example below, I want the Inside component to be white in both cases. The inner component does not have to be a `, just anything, that allows full color control.
How do I do this?
<v-card class="ma-5" color="red" variant="tonal">
Test
<v-sheet class="ma-5" color="white" variant="tonal">
Inside
</v-sheet>
</v-card>
<v-card class="ma-5" color="red">
Test
<v-sheet class="ma-5" color="white" variant="tonal">
Inside
</v-sheet>
</v-card>
I have a 'My Scores' view in my Node JS / Sails JS app and I'm using partials, one for a List View, and another one for a Grid View. When the user clicks the Grid or List View from the nav bar I'd like to be able to swap the UI with the given partial.
List view:
<div class="content-container">
<h1>My Scores</h1>
<%- partial('../partials/list-view')%>
</div>
Grid view:
<div class="content-container">
<h1>My Scores</h1>
<%- partial('../partials/grid-view')%>
</div>
Please advise.
No problem--just use a variable for the partial name, instead of hardcoding it:
<%- partial(viewName) %>
then in your config/routes.js:
"/listView": {
view: "list.ejs",
locals: {viewName: "../partials/list-view.ejs"}
},
"/gridView": {
view: "list.ejs",
locals: {viewName: "../partials/grid-view.ejs"}
}
That's assuming you're just routing directly to views. If you're using a custom controller action and res.view() to display your content, you'll put the viewName value in the second res.view() argument, like res.view("list.ejs",{viewName: "../partials/list-view.ejs"}).
Now, if you're trying to do this without reloading the page, then #tonejac has the right idea in his comment--either switch them using Javascript/CSS, or use AJAX to load content on-demand. Sails can only help on the backend!
I've added the following code to the selected transformation of a News List webpart:
<%# Register Src="~/CMSAdminControls/ContentRating/RatingControl.ascx" TagName="RatingControl" TagPrefix="cms" %>
<cms:RatingControl ID="elemRating" runat="server" Enabled="true" RatingType="Stars" ExternalValue='
<%# Convert.ToString(CMS.GlobalHelper.ValidationHelper.GetDouble(Eval("DocumentRatingValue"), 0)/((CMS.GlobalHelper.ValidationHelper.GetDouble(Eval("DocumentRatings"), 0) == 0?1:CMS.GlobalHelper.ValidationHelper.GetDouble(Eval("DocumentRatings"), 1)))) %>' />
The rest of the selected transformation is the same as the default.
According to the Kentico documentation this should add the webpart to the details page of a news item.
For some reason the input tag is getting rendered as follows:
<input type="hidden" name="p$lt$zoneContent$pageplaceholder$pageplaceholder$lt$News$NewsList$repItems$ctl00$ctl00$elemRating$RatingControl$elemRating_RatingExtender_ClientState" id="p_lt_zoneContent_pageplaceholder_pageplaceholder_lt_News_NewsList_repItems_ctl00_ctl00_elemRating_RatingControl_elemRating_RatingExtender_ClientState" value="0">
note the type="hidden" attribute. This causes the control not to render and I'm not sure where to fix this.
As mentioned in my comment. The is actually just used to store the value. Below that, it renders some extra content that will not display unless some CSS classes are carried over from the CMSDesk.css.
You can either copy the necessary CSS classes into your own CSS, or just import the CMSDesk.css file where necessary to make sure the rating elements are displaying.
I'm building a website that makes heavy use of image carousels. Each section has a different carousel with different slides.
Therefore, I've created an embed called global_embeds/image_carousel.html that contains the logic. It looks like this:
<div class="carousel">
{exp:channel:entries channel="homepage_carousel"}
<div class="slide">
<img src="{image}" alt="{title}" />
</div>
{/exp:channel:entries}
</div>
As you can see, it's a simple HTML snippet that generates a <div> for each item. The problem, however, is that I want to use an embed parameter in the exp:channel:entries tag.
I tried calling the embed in my parent template like so:
{embed="global_embeds/image_carousel" carousel_channel="homepage_carousel"}
And changing my embed template to this:
...
{exp:channel:entries channel=embed:carousel_channel}
...
But it doesn't seem to be passing the variable value through as I'd like, instead just showing all entries in my carousel regardless of channel.
Am I going about this the right way? Or is there a better way to achieve what I'm after in Expression Engine?
D'oh! Practically immediately after posting the question, I realised I can use the curly brace notation wrapped in quote marks:
...
{exp:channel:entries channel="{embed:carousel_channel}"}
...
Sorry to waste people's time.
I did some searching around but I can't seem to find any information on embedding a channel entry tag pair within another.
When I try the following code in a template, it breaks the page and I see the opening {reverse_related_entries sort="desc"} displayed as plain text:
{exp:channel:entries channel="pages"}
{reverse_related_entries sort="desc"}
{if show_testimonial}
{exp:channel:entries channel="testimonials" orderby="random" limit="1"}
<blockquote>
{testimony}
<cite>
<span class="cite_name">{cite_name}</span><br />
<span class="cite_org">{cite_org}</span><br />
<span class="cite_title">{cite_title}</span>
</cite>
</blockquote>
{/exp:channel:entries}
{/if}
{/reverse_related_entries}
{/exp:channel:entries}
Is there a way in ExpressionEngine to nest a channel entry tag pair inside itself?
In order to nest a {exp:channel:entries} tag pair inside of itself, you'll need to embed the template within another template using an {embed} variable.
To do so, just modify your main channel entries tag to look like the following:
{exp:channel:entries channel="pages"}
{reverse_related_entries sort="desc"}
{if show_testimonial}
{embed="template_group/template"}
{/if}
{/reverse_related_entries}
{/exp:channel:entries}
Then, create a new template with the contents of your nested channel entries tag pair:
{exp:channel:entries channel="testimonials" orderby="random" limit="1"}
<blockquote>
{testimony}
<cite>
<span class="cite_name">{cite_name}</span><br />
<span class="cite_org">{cite_org}</span><br />
<span class="cite_title">{cite_title}</span>
</cite>
</blockquote>
{/exp:channel:entries}
Which you can include in any ExpressionEngine template using the following syntax, as shown earlier:
{embed="template_group/template"}
Using embed templates are a standard way around some of ExpressionEngine's quirks and Parse Order (PDF, 32 KB), but they do carry a performance penalty with them so be mindful in deciding between using an {embed} and a {snippet}.