I have a jade template
extends _base
block content
include ./partials/_main-header
.Template2RightBig
.container
.row
block content2RightBig
.col-md-3.Template2RightBig--left.column
block left-column
.col-md-9.Template2RightBig--right.column
.Template2RightBig--right-header
block right-column-header
.Template2RightBig--right-annotation
block right-column-annotation
block right-column
include ./partials/_footer
I want to show or hide right-column-annotation block WITH its parent container(.Template2RightBig--right-annotation) in pages, which will extend this page.
How can I do that with Jade power?
You can pass a variable from your child page into this template through a new block in order to conditionally control anything in this template.
_your-template.jade
extends _base
block content
include ./partials/_main-header
.Template2RightBig
.container
.row
block content2RightBig
block page-variables
.col-md-3.Template2RightBig--left.column
block left-column
.col-md-9.Template2RightBig--right.column
.Template2RightBig--right-header
block right-column-header
if rightAnnotationVisible === true
.Template2RightBig--right-annotation
block right-column-annotation
block right-column
include ./partials/_footer
_your-page.jade
extends _your-template
block page-variables
- var rightAnnotationVisible = true
//- annotation and parent wrapper will render
_your-other-page.jade
extends _your-template
block page-variables
- var rightAnnotationVisible = false
//- annotation and parent wrapper won't render
Just be sure the new block is scoped to be included in the right place in the parent blocks.
Related
How can I check if a div with certain class x exists on page?
{% if page.div.class == x %}
<script></script>
{% endif %}
Would this work?
With JavaScript and document.querySelector(), you can select the first element within the document that matches your specified selector.
For example:
const targetElement = document.querySelector('.x') // .x is class you are looking for
if (targetElement) console.log('element with class of x exists')
If an element exists on your page it will return that element, otherwise null is being returned.
Checkout MDN doc
I am trying to add a CSS class to the whole form_row in a twig template from Symfony 4! As you can see from the image, my code right now only adds the class to the input tag, put I need the class to be added to the parent div container.
Below is my code:
{{ form_row(form.firstname, { 'attr' : {'class' : 'first_name'} }) }}
below is an image of the rendered code:
From the documentation of symfony:
attr: A key-value array that will be rendered as HTML attributes on the field.
This means the attributes only get applied to the field.
You could instead wrap the whole div in another div like so:
<div class='first-name'>
{{ form_row(form.firstname) }}
</div>
And then apply the style either to div.first-name or div.first-name > div
Alternatively: Render the whole row yourself
With the following you can render the label and widget yourself:
<div class='first-name'>
{{ form_label(form.firstname) }}
{{ form_widget(form.firstname) }}
</div>
Everytime I insert tag in my main app it always rendering a new line, couldn't it be inline? I want to achieve something like this :
<p>This is a component :<component></component></p>
<!--worked with other html tags-->
Result instead :
This is a component :
component content
Of course I can insert prefix This is a component : as props in the component so it can be inline, at least for displaying, but that's not always I intended to be..
I wonder also where Vue store css template for component.
Thanks community.
Your component isn't rendering on a new line. It is rendering based on the rendering rules for HTML. If your component's root tag is a block element, then it will be rendered on the next line. If it is an inline element, then it will be rendered inline.
console.clear()
const Inline = {
template: `<span>This is inline</span>`
}
const Newline = {
template: `<div>This is on a new line</div>`
}
new Vue({
el: "#app",
components: {
Inline,
Newline
}
})
<script src="https://unpkg.com/vue#2.2.6/dist/vue.js"></script>
<div id="app">
<p>This is an inline component:
<component is="Inline"></component>
</p>
<p>This is a block component:
<component is="Newline"></component>
</p>
</div>
In the above example, the Inline component's root tag is a span. Spans are inline elements. The Newline component's root tag is a div. Divs are block level elements and the text is on the next line.
You could also use display: inline on a div and cause the component to be rendered inline.
console.clear()
const Newline = {
template: `<div style="display: inline">This is on the same line</div>`
}
new Vue({
el: "#app",
components: {
Newline,
}
})
<script src="https://unpkg.com/vue#2.2.6/dist/vue.js"></script>
<div id="app">
<p>This is a block component that displays inline:
<component is="Newline"></component>
</p>
</div>
The HTML rendered by Vue follows all the layout rules of HTML you hand write. There's no magic involved.
I have got two pages. The first one, parent.jade, which contains:
div.header
block header
And the second one, child.jade, contains:
extends main
block prepend header
So, how I can to add a class for header block in my child.jade? I need to have other class naming at the different pages.
Yes, but you must pass a object to jade to be that which is rendering. I.e.
In nodejs
jade.renderFile('child.jade', {
"myIds" : 'FristPage',
"myClass" : [ 'this', 'is', 'cool' ],
})
In your parent.jade
div.warpper( id=myIds, class=myClass )
block content
When render show
<div class="warpper this is cool" id="FristPage">
The block form child.jade
</div>
But it can not do directly from jade or from files jade.
I'm working with Angular directives that looks like this:
<parent>
<children></children>
<children></children>
<children></children>
</parent>
Parent directive has a
template: return "<div><ul></ul><div ng-transclude></div></div>"
And children directives will go inside that ng-transclude div.
My final HTML structure is
<newParent>
<div ng-transclude>
<child></child>
<child></child>
<child></child>
</div>
</newParent>
I wonder if it's possible to remove that ng-transclude div so that the new children are direct children of the new parent. (I have more children, a random number >1).
I have to do so to match an existing template so I cannot change its structure.
I actually have no Fiddles, if you need more information just ask. Thank you!
You can append the content yourself, without using ng-transclude, using the transclude function:
app.directive("parent", function($compile) {
return {
restrict: "EA",
transclude: true,
link: function(scope, element, attrs, ctrls, $transclude) {
$transclude(function(clone, scope) {
element.append(clone);
});
}
};
});
Here's more information about Transclusion.
Without a template, this will add the transcluded elements as only children of the directive. With the template, you'll need to properly place (e.g. insert it into a <div> after <ul>) the content yourself.