Given the parent component in the following context
1.
<parent>
child
</parent>
<parent>
<child />
</parent>
Is there a way to access the nested element from the definition of the parent component?
The solution is to use slots in parent.
example:
<template>
This is the parent with child: <slot />
</template>
Related
I know that if I have a <slot /> inside my component, I can then insert content from the HTML, but I don't understand how this works.
For example:
render() {
return(
<div>
<slot />
</div>
)
}
Now, inside my HTML, I can do this:
<my-card>test</my-card>
and "test" will be inserted as a content.
However, if the <slot /> is nested inside other child-elements inside my component, the "test" text is still inserted even if it's not inside those particular elements. How does that work?
For example:
render() {
return(
<div>
<button><slot /></button>
<select>
<option value="one"><slot /></option>
</select>
<p><slot /></p>
</div>
)
}
Now, in my HTML, if I do this:
<my-card>test</my-card>
The text "test" is inserted inside the <slot /> inside the button. But what if I want to add text inside the <option> <slot />? How do I do that?
If I only have one <slot /> inside <option> for example, how do I insert text inside of it from my HTML?
As mentioned in the comments, you can only have a single unnamed slot. Any additional slots have to have a name:
<slot name="outside" />
To add an element inside a named slot you can use the slot attribute:
<my-card>
<span slot="outside">test</span>
</my-card>
See also Stencil's documentation on slots.
I have a web component in my handlebar template that has its own context e.g., this object person{name: "singh"} only exists within <mycompnent></mycomponent>.
I use \{{person.name}} to escape the default handlebar root context and use the local context inside the web component. This works <mycompnent>\{{person.name}}</mycomponent>.
However, I am not able to determine how to use this inside an if expression. My attempts like below all are resulting in error.
<mycompnent>{{#if \person.name }}<p>Good</p>{{/if}}</mycompnent>
<mycompnent>{{#if (\person.name) }}<p>Good</p>{{/if}}</mycompnent>
<mycompnent>{{#if \(person.name) }}<p>Good</p>{{/if}}</mycompnent>
Full code block
<!-- This prints the root -->
{{JSONstringify #root}}
<ul>
{{#each #root.data.items as |item|}}
<li>
<!-- mycomponent exposes a object named person inside the template-->
<mycomponent id="{{item.ID}}">
<template>
<!-- This prints out the item object -->
{{JSONstringify .}}
<!-- This prints out the person object -->
\{{person}}
<!-- This print out the person name if it is set -->
<p>\{{person.displayName}}</p>
<!-- This results in error -->
{{#if (\person.displayName) }}<p>\{{person.displayName}}</p>{{/if}}
</template>
</mycomponent>
</li>
{{/each}}
</ul>
If I have:
<Container maxWidth='lg'>
<Grid container spacing={3}>
<Grid item xs={12} md={6} >
<Image src="/img/undraw_programming_2svr.png" color='transparent' aspectRatio={1041 / 554} />
</Grid>
<SomeElement />
</Container>
How can I have SomeElement expand to full width?
First, A few things that were already mentioned, Your grid tagging is wrong and I understand that it's a mistake and probably not essential to your question.
The answer to your question is no, the point of the container is to stop SomeElement from expanding. A simple fix, however, would be to stop the container, render SomeElement, and then start a new container.
<Container>
...
</Container>
<SomeElement />
<Container>
...
I am transforming some simple XML document into XForms and I am trying to add some style to the final result. I am using the XSLTForms implementation and I am pointing to a local CSS file (Twitter's bootstrap). So the XML file looks like that:
<structure>
<part class="Container" id="container">
<part class="Button" id="b1"/>
</part>
</structure>
<style>
<property part-name="b1" name="label">Submit</property>
</style>
My XSLT that transforms these parts to XForms document:
<xsl:key name="buttonLabels" match="property[#name='label']" use="#part-name"/>
<xsl:template match="part[#class='Button']"><!-- [key('buttonActions', #id)]-->
<xsl:element name="xf:trigger">
<xsl:attribute name="id">
<xsl:value-of select="#id | #size | #style"/>
</xsl:attribute>
<xsl:element name="xf:label">
<xsl:value-of select="key('buttonLabels', #id)"/>
</xsl:element>
</xsl:element>
</xsl:template>
<xsl:template match="part[#class='Container']">
<xsl:element name="div">
<xsl:attribute name="class">container</xsl:attribute>
<xsl:apply-templates/>
</xsl:element>
</xsl:template>
Now, this produces: (which is fine for what I need currently)
<div class="container">
<xf:trigger id="b1">
<xf:label>Submit</xf:label>
</xf:trigger>
</div>
But I'd like to add some style rules to this <xf:trigger>. The thing is that when it gets transformed into html elements, the structure is
|_span
|_span
|_button
|_span (for the label)
So I am not sure how to make the XSLT transformation, so that it inserts let's say class="btn-danger" attribute into the <button> tag.
In other words, I need to get something like that in the final Html: (currently I get it, but without the class="btn-danger" in the button tag)
<span id="b1">
<span>
<button type="button" class="btn-danger">
<span id="xsltforms-mainform-label-2_6_2_4_3_" class="xforms-label">Submit</span>
</button>
</span>
</span>
Besides, I tried with adding an <xsl:attribute name="class">btn-danger</xsl:attribute> in the template for the xf:trigger, but that inserts the attribute at the first span element.
Any ideas? Thanks in advance!
UPDATE:
The XSLT responsible for transforming the xforms:trigger element to html elements can be found on this link - http://bpaste.net/show/c42CtcIcjbsI6GFGWK2q/
But I don't want to edit the XSLTForms implementation, but rather find a workaround, so that I can specify the style of my buttons from my XML file.
For example:
<structure>
<part class="Container" id="container">
<part class="Button" id="b1"/>
</part>
</structure>
<style>
<property part-name="b1" name="label">Submit</property>
<property part-name="b1" name="style">btn-danger</property>
</style>
So here, I am matching the part-name and saying that I want the button with id="b1" to have css style rules for btn-danger for example. But if I have another button and there is no style rule for it, it should have default appearance. Hope that's clear.
You cannot add a class attribute directly to the button element generated by XSLTForms.
But instead of it, you can define a CSS rule that applies to it this way:
#myclass button {
color: red;
}
and use the class in the trigger:
<xf:trigger class="myclass >
The same for every XForms control. Just take a look to the browser inspector to see the generated controls.
I need to map a collection of components with compass (using XML mapping)... Is there any way to achieve this?
Thanks in advance for any suggestions.
Example classes:
class ClassA {
private Set<ClassB> bs;
// ... getBs/setBs ...
}
class ClassB {}
Example mapping:
<class name="com.package.ClassA" alias="classA">
<!-- no idea how I can map Set<ClassB> in here... can I? -->
</class>
<class name="com.package.ClassB" alias="classB">
</class>
Yeah, just found out how to do this, the mapping is simple - you just apply the alias to the collection component/reference. Obviously all the rest is done implicitely.
<class name="com.package.ClassA" alias="classA">
<component name="bs" ref-alias="classB" />
</class>
<class name="com.package.ClassB" alias="classB">
</class>