In styled components the parent selector selects the parent component. In Sass it selects the parent class.
sass: https://sass-lang.com/documentation/style-rules/parent-selector
sc: https://styled-components.com/docs/advanced#referring-to-other-components
Is it possible to use the Sass style parent selectors features working inside a styled components CSS so that the rule selects the parent class and not the fully scoped component selector?
Related
I'm trying to extend a component, but my new marquee.html updates aren't rendering on the page. The dialog updates are okay. Here's what I have:
Parent component
marquee
> _cq_dialog
> clientlibs
_cq_editConfig.xml
.content.xml
marquee.html
Child component
marquee2
> _cq_dialog (All these updates are working.)
.content.xml
marquee.html (None of these updates are rendering.)
Shouldn't any changes in the child component's marquee.html file override the parent file? I've been researching to see if I missed a step and everything seems to be in order, but apparently I'm missing something.
In the child component, the "marquee.html" file should be renamed to "marquee2.html" since the component node is named "marquee2".
I've a tree-view component (which uses a tree-view-item component) and I want to let the user to define the template of the items.
something like this (which would display "Item:" followed by the name in bold) :
<tree-view
[children]="folders"
childrenProperty="children">
<template>Item:<b>{{item.name}}</b></template>
</tree-view>
I can retrieve the TemplateRef using #ContentChild in the TreeView component class and access it from the TreeViewItem component but I've not found how to inject it into the dom of the item.
You can fin a Plunker on my tree-view component here : http://plnkr.co/edit/IMqKV4TrwHoiWfJKHHQn?p=preview
Is there a way to achieve this using Angular 2 ?
After lot of digging, I've found no way to achieve exactly what I wanted.
A workaround is to load (using DynamicComponentLoader) a given component (in input) for each item of the tree.
<tree-view
[children]="folders"
childrenProperty="children"
[itemComponentClass]="itemComponent">
</tree-view>
Where itemComponent is a reference to the class of the component (which have a template).
Not the better way but it's working : http://plnkr.co/edit/96IWGkw3owtUWfuG299V?p=preview
In jsf difference between implicit objects cc and component it says:
cc refers to the top level composite component that is being processed at the time of evaluation.
In a hierarchy of nested composite components, how would I access say the second level parent?
Composite components are inherently naming containers. You can get the namingcontainer's parent as follows:
#{cc.namingContainer.parent}
And its namingcontainer parent as follows:
#{cc.namingContainer.parent.namingContainer.parent}
Etc.
I have a composite component which is composed of other composite components. Now I would like to render only some of the child components within the parent component. From the Java EE tutorial I take it that I should probably bind my child components to some property of the backing bean for my parent component so that I can access their render attribute.
However, the NetBeans IDE does not know about a binding attribute for my composite components. So how am I supposed to do this?
Use case: The parent component is some wizard which should display only one of the child components at a time. Think of it as a poor man's tabbed view. I know there are libraries which provide ready-made components for this, but I do not want to add another dependency.
Netbeans is lying. That attribute is definitely supported on <ui:component>. Just use it and ignore the warning/error in the IDE. Or better, just use the rendered attribute; the need to conditionally render components is not a valid reason to prefer binding over rendered.
I am looking forward to customize the look of tabView component. I need to change the color of tab headers(& if possible, 2 different colors for 2 different headers). I tried to do so by specifying the CSS rules through styleClass attribute for tabView but failed to see desired results.
How I can achieve this ?
3.0.M2 has titleStyle and titleStyleClass attributes for tab component.
http://code.google.com/p/primefaces/issues/detail?id=892
Primefaces components get the look&feel from a css theme. You can either:
Build your own theme with the desired colors with Themeroller,
Change the style classes for your theme manually. Style classes for each Primefaces component are listed in the Primefaces documentation. Since the doc is not free for most recent Primefaces version 2.2 I can only help your with the classes from Primefaces 2.1: .ui-tabs, .ui-tabs-nav, .ui-tabs-panel. Notice that there might be more style classes applying to the tab view inherited from other components. Check html source of the tabView to get all applying classes.
Use the style or styleClasses attribute as described in your answer and overwrite the theme classes with the !important declaration