I am working on a web component library with StencilJS, and I have a problem using the CSS + Selector. I have a Breadcrumb web component, which will contain multiple breadcrumb items (web component as well). Every Breadcrumb item after the first item should add > smybol with ::before. Therefore I use the CSS + selector
df-breadcrumb.tsx
export class DFBreadcrumb {
render() {
return <ol class="breadcrumb">
<slot></slot>
</ol>
;
}
}
df-breadcrumb-item.tsx
export class DFBreadcrumbItem {
/**
* Link
*/
#Prop() link: string;
render() {
return this.link ? <li class="breadcrumb-item"><a href={this.link}><slot></slot></a></li> :
<li class="breadcrumb-item"><slot></slot></li>
;
}
}
test.html
<df-breadcrumb>
<df-breadcrumb-item link="#">Start</df-breadcrumb-item>
<df-breadcrumb-item link="#">Library</df-breadcrumb-item>
<df-breadcrumb-item>Item</df-breadcrumb-item>
</df-breadcrumb>
my css rule
.breadcrumb-item+.breadcrumb-item:before {
display: inline-block;
padding-right: .5rem;
color: #6c757d;
content: ">";
}
expected output: Start > Library > Item
current output: Start Library Item
I think this is not working cause Stencil ecapsulates my li tags and their direct parent is not the ol. I read something about using the :host() pseudo class, but could not got it working. Also I have set shadow: falsein my components.
You're right, the problem is the df-breadcrumb-item element.
A simple alternative would be to apply your CSS to the df-breadcrumb-item elements:
df-breadcrumb-item + df-breadcrumb-item:before {
display: inline-block;
color: #6c757d;
content: ">";
}
Alternatively you could add the arrow to the .breadcrumb-item element inside the df-breadcrumb-item component, either depending on a property or by manually checking if the #Element() is the last node.
Related
I understand that in order to style elements from the ShadowDOM, the shadowDOM itself has to "know"
the element, thus be declared inside of it.
It works well for regular web components but i haven't found an answer to it weather it's the same for an extended
native element.
For example, I wanted to know if the code I wrote is the best way, i.e. the external p acting as container, or am i creating a redundant p element.
JavaScript:
class P_example extends HTMLParagraphElement {
constructor() {
super();
this.attachShadow({ mode: "open" });
this.shadowRoot.innerHTML = `
<style>
p{
background-color: orangered;
width: max-content;
}
</style>
<p><slot>Some default</slot></p>
`;
this.shadowRoot.append();
}
connectedCallback() {
//add styling class to the p element
}
}
customElements.define("omer-p", P_example, { extends: "p" });
HTML:
<p is="omer-p">Some sample text</p>
I am new to css and i would like to know if css can be applied to the properties of tag?
For example in the below code i would like to see entry.count and "files" in blue color.
code
render() {
return(
<div className="AppL" id="AppList">
{this.createApplicationList()}
</div>);
}
createApplicationList() {
var guiResult = [];
for (var key in this.state.AppName) {
var entry = this.state.AppName[key];
guiResult.push(
<Collapsible trigger={entry.AppName + "\t" + "\t" + entry.Count + " files"} className="AppList" transitionTime ="10">
</Collapsible>);
};
return guiResult;
}
my scss for this component
.AppList{
color: black;
border-bottom: 1px solid #00a886;
padding-top:10px;
padding-bottom:10px;
}
.Collapsible .Collapsible__trigger {
color: blue;
}
.Collapsible selects all elements with the Collapsible class. Collapsible_trigger does the same for the Collapsible__trigger class. Together, the rule selects all .Collapsible__trigger elements within .Collapsible elements, and styles them with blue text.
This is based purely on your provided HTML code. The JavaScript appears to be irrelevant.
.Collapsible .Collapsible__trigger.is-closed also works and is more specific. Depends on your use-case.
I'm diving into React and I found a little problem managing active class names when using CSS modules.
Suppose I want to develop a Tabs React component. I would like to apply an active class to the current list item. The tab headers is built by the following component:
import React, { Component } from 'react';
import styles from './Tabs.scss';
export default class TabHeader extends Component {
render() {
let activeTabIndex = this.props.activeTabIndex;
return (
<ul className={styles['tabs-header']}>
{
this.props.data.map((item, index) => {
return (
<li key={index}>
<a className={(index === activeTabIndex) ? 'active' : ''} href="#">
<span>{item.header}</span>
</a>
</li>
)
})
}
</ul>
);
}
}
As you can see, I conditionally added the class active to the interested list item. The stylesheet code is Tabs.scss:
.tabs-header {
display: table;
width: 100%;
list-style-type: none;
& li {
display: table-cell;
text-align: center;
color: #ECF0F1;
cursor: pointer;
a {
display: block;
padding: 15px;
background: #212F3D;
transition: all .2s ease-in;
transform: skew(-40deg);
&:hover {
background: #2471A3;
color: #F7F9F9;
}
& span {
display: block;
transform: skew(40deg);
}
&.active {
background: #2471A3;
}
}
}
}
With this setup, the active item is not using the active css code. How can I solve the problem?
EDIT: the prop activeTabIndex (integer greater than or equal to zero) is correctly working. If I inspect the elements, I can see the class active being added to the active item list, but it is not pointing to the class defined in Tabs.scss. Just to point this out, when using className={styles['tabs-header']} in the ul element, this is going to be converted to Tabs__tabs-header__2LSPG.
I’d need to try it out to be confident of this, but I think you should be using styles.active instead of 'active’.
this should work<a
className={${index === activeTabIndex && css.active}}
href="#"
{item.header}
Your condition would leave an empty space in a class name because of the condition:
(index === activeTabIndex) ? 'active' : ''
Instead you can do a short-circuit evaluation:
<a className={(index === activeTabIndex) && styles['active']} href="#">
<span>{item.header}</span>
</a>
All about CSS modules in React:
For a className with the dash use: style["upper-level"]
Single word className: style.active
To combine a multiple classNames use: style["upper-level"] + " " + style.active
import style from "./style.module.css";
...
className={
menuOpened
? style["upper-level"] + " " + style.active
: style["upper-level"]
}
I'm using CSS modules and by far everything was working great.
We started to use external UI library along with our own one, so I'm writing components like this:
<div className={styles['my-component']}>
<ExternalUIComponent />
</div>
Assuming that the ExternalUIComponent has its own class that in the final CSS file looks like this external-ui-component, how can I make adjust this component styling from my css file? The below example does not work:
.my-component {
font-size: 1em;
}
.my-component .external-ui-component {
padding: 16px;
// Some other styling adjustments here
}
Please do not use inline styles as someone else suggested. Stay away from inline styles as much as you can because they can cause unnecessary re-renders.
You should use global instead.
.my-component {
:global {
.external-ui-component {
padding: 16px;
// Some other styling adjustments here
}
}
}
https://github.com/css-modules/css-modules#usage-with-preprocessors
Also, I recommend using camel case style names which is the preferred way for css-modules.
So your class name would be : .myComponent { ... }
And you can use it in your code as
<div className={ styles.myComponent } >
If you wanted to add more styles , you can use the array.join(' ') syntax.
<div className={ [ styles.myComponent, styles.anotherStyle ].join(' ') } >
This is cleaner!
Here's a shorter form in pure CSS (i.e. no preprocessor needed):
.my-component :global .external-ui-component {
// ...
}
Did you try inline styles for that component ?
https://reactjs.org/docs/dom-elements.html#style
const divStyle = {
color: 'blue',
backgroundImage: 'url(' + imgUrl + ')',
};
function HelloWorldComponent() {
return <div style={divStyle}>Hello World!</div>;
}
For my UI-Grid I've created conditional formatting with the following row template in the $scope.gridOptions object:
rowTemplate: '<div ng-class="{\'recruiter-row-active\':row.entity.activePositions!=0, ' +
'\'recruiter-row-passive\':(row.entity.activePositions==0 && row.entity.passivePositions !=0),' +
'\'recruiter-row-free\':(row.entity.activePositions==0 && row.entity.passivePositions==0)}">' +
'<div ng-repeat="(colRenderIndex, col) in colContainer.renderedColumns track by col.colDef.name" ' +
'class="ui-grid-cell" ng-class="{ \'ui-grid-row-header-cell\': col.isRowHeader }" ui-grid-cell></div></div>'
The classes look like this:
.ui-grid-row .recruiter-row-active {
background-color: #ff816b !important;
}
.ui-grid-row .recruiter-row-passive {
background-color: #fcff9d !important;
}
.ui-grid-row .recruiter-row-free {
background-color: #70cc79 !important;
}
The class for the html row in question is "ui-grid-row" and "ng-scope" and the parent element has class "ui-grid-canvas"
I was able to get my conditional formatting to work when I also implemented a
.ui-grid-row .ui-grid-cell {
background-color: inherit !important;
}
However I don't want to affect the other grids in my web app.
How would I get my conditional row formatting to override the default?
You can use scss and wrap your grid with a:
<div view="my-colors">
<!-- your grid element goes here -->
</div>
in the scss file, wrap the styling you want to affect only that view with:
[view="my-colors"] {
.ui-grid-row .ui-grid-cell {
background-color: inherit !important;
}
}