I wanna ask something about pseudo-element using tailwind, so before going through into my main problem I wanna show my code using CSS
.text-location {
display: flex;
gap: 1.625rem;
}
.text-location::after {
content: url('image/arrow-down-icon.svg'); <= example image
display: inline-block;
width: 100%;
height: 100%;
}
and the result is like this:
it's working and nothing something wrong when I used in CSS, but when I'm going through using tailwind the content is not showing anything, any wrong with my code? Or I must do something different what I have been made? I hope anyone can help and tell me where I made the mistake...Thank you before and have a nice day, bellow my code:
<label class="font-poppins text-sm font-light leading-[0.875rem] text-[#969696] flex gap-[1.625rem] after:content-[url('image/arrow-down-icon.svg')] after:inline-block after:h-full after:w-full">Location</label>
And the result:
You can use item-center class here and use text-black to make them look similar. You have to use custom fonts as popins is not supported by default.
You can refer here
Below is my code
https://play.tailwindcss.com/0wks3noHUe
You can define your content in the tailwind.config.js
theme: {
extend: {
content: {
'arrowDownIcon': 'url("../src/arrow-down-icon.svg")',
'arrowUpIcon': 'url("../src/arrow-up-icon.svg")',
},
fontSize: {
...
You can render it using the following className. Make sure to include an inline-block and width.
<label className="after:content-arrowDownIcon after:inline-block after:w-8">Learn More</label>
You can also apply a hover state like this hover:after:content-arrowUpIcon
<label className="hover:after:content-arrowUpIcon after:content-arrowDownIcon after:content-arrowBlack after:inline-block after:w-8">Learn More</label>
Related
I want to use content variable with in-line styles in react, but I dont know how to do this ?
CSS3
.right::after, button::after {
content: var(--content);
display: block;
position: absolute;
white-space: nowrap;
padding: 40px 40px;
pointer-events:none;
}
React Component
return (
<Button
{...configButton}
style={{'--content': "Login" }}
>
<div class="left"></div>
Login
<div class="right"></div>
{children}
</Button>
);
Ok the solution to this problem is quite simple, It made me think for a while.
The css variable that you provided works indeed.
But when it comes to the content of a psudo element then you should provide the value with a pair of quotes and it will work fine.
<Button
{...configButton}
style={{'--content': "'Login'" }}
>
change the "Login" into "'Login'" and this should work fine.
thank you.
It should work.
Are you passing style to the actual rendered element in Button component?
Is the CSS aplied?
div:after {
content: var(--test-var);
}
<div style="--test-var: 'Test'"></div>
In Ionic, the ion-title component has the content encapsulated in an extra div within its shadow-dom.
This div has the class .toolbar-title set. How can i select this div via scss-selector to change its overflow behavior?
I tried:
.toolbar-title { ... }
ion-title .toolbar-title
ion-title::shadow .toolbar-title { ... }
ion-title::shadow(div) { ... }
and a lot other combinations including :host & ::ng-deep selectors.
And, yes i know , ::shadow and ng-deep is deprectaded.
I also know that ionic has introduced css-variables for this purposes, but unfortunatley not for the overflow attribute.
THX in advance!
The concept of shadowDOM is you can't touch its content with CSS from the outside.
It is an open shadowDOM, so you can change it with JavaScript.
document.querySelector("ion-title")
.shadowRoot
.querySelector(".toolbar-title")
.style
.overflow = "initial";
Ionic v6 allows you to target and modify shadowDOM contents with CSS. See https://ionicframework.com/docs/theming/css-shadow-parts
However, the element you want to select inside the shadowDOM needs to expose a part attribute. For instance the ion-select element:
<ion-select>
#shadow-root
<div part="placeholder" class="select-text select-placeholder"></div>
<div part="icon" class="select-icon"></div>
</ion-select>
You can select the placeholder element with:
ion-select::part(placeholder) {
color: blue;
opacity: 1;
}
Unfortunately, the ion-title element does not expose any shadow parts. You need to wrap the contents of ion-title in a container to be able to modify them:
<ion-title>
<div class="content">
<img src="..." />
Hello World!
</div>
</ion-title>
CSS:
.content {
display: flex;
align-items: center;
}
StackBlitz example: https://stackblitz.com/edit/ionic-title-modification-8a1qst
Question is not clear but I'll break it down. In angular we can write isolated css for styling. It works pretty well for native html elements. But unlike react, angular wrap our html with custom elements like <app-card>...</app-card>. When I write css for those wrapper elements, it doesn't work .
If I have a post list like
<div class="post-list">
<app-card [post]="post" *ngFor="let post of posts"></app-card>
</div>
If I write css to apply some vertical gap between app-card components in PostListComponent. Well nothing happens.
.post-list app-card:not(:last-child) {
margin-bottom: 2rem;
}
How can I make it work? Or with angular logic, how can I apply vertical gap between angular components
Just add display: block; on your app-card component & it will work as expected.
.post-list app-card {
display: block;
}
.post-list app-card:not(:last-child) {
margin-bottom: 2rem;
}
<div class="post-list">
<app-card>Card 1</app-card>
<app-card>Card 2</app-card>
<app-card>Card 3</app-card>
</div>
You can define encapsulation: ViewEncapsulation.None in your Component like this:
#Component({
selector: 'foo',
template: './foo.component.html',
styleUrls: ['./foo.component.scss'],
encapsulation: ViewEncapsulation.None
})
export class FooComponent { }
Which will treat your .css as the same if you were putting it in the global scope.
To be more accurate, it won't append .fooComponent to each css rule in foo.component.scss.
You can make the iteration in div tag then add your class
<div class="post-list">
<div class="post" *ngFor="let post of posts">
<app-card [post]="post"></app-card>
</div>
</div>
And in your css
.post-list .post:not(:last-child) {
margin-bottom: 2rem;
}
There is no reason it shouldn't work. Just tried to put in some of your code here. https://stackblitz.com/edit/angular-scss-demo-icqrye
app.component.html
<div class="post-list">
<app-new *ngFor="let item of [1,2,3,4]"></app-new>
</div>
styles.scss
.post-list app-new:not(:last-child) p {
margin-top: 2rem;
color: green;
}
And it works perfectly. Are you looking for something else?
And if you want to add the style (margins) to the component directly, you will first need to set the display of the component to block/flex as per requirement.
.post-list app-new:not(:last-child) {
display: flex;
}
I'm trying to modify the css color picker of a module, in order to adapt it to my website (align it to center).
Here's the code of the color picker:
#Component({
selector: 'color-circle',
template: `
<div
class="circle-picker {{ className }}"
[style.width.px]="width"
[style.margin-right.px]="-circleSpacing"
[style.margin-bottom.px]="-circleSpacing"
>
<color-circle-swatch
*ngFor="let color of colors"
[circleSize]="circleSize"
[circleSpacing]="circleSpacing"
[color]="color"
[focus]="isActive(color)"
(onClick)="handleBlockChange($event)"
(onSwatchHover)="onSwatchHover.emit($event)"
></color-circle-swatch>
</div>
`,
styles: [
`
.circle-picker {
display: flex;
flex-wrap: wrap;
}
`,
],
I'm using justify-content: center to the class circle-picker to align it, but nothing happens, so I don't really know if I'm able to do it.
Here's how I use the selector:
<color-circle [colors]="colors" [color]="productForm.get('color')?.value" (onChange)="onColorChanged($event)" width="190px" circleSize="34" circleSpacing="18"></color-circle>
When I inspect the code with the browser, I can make it, but with the CSS file nothing works.
Could anyone help?
This is what I want:
This is what I have:
Author of the color picker:
https://github.com/scttcper/ngx-color
If you want to set style to elements inside your host component. you must use :host
and to change deeper elements you have to use ::ng-deep
Use
:host color-circle ::ng-deep color-circle-swatch{
justify-content: center;
align-items:center
}
May be this two line of code can fix your problem
.color-circle-swatch{
margin: 0 auto;
width:100%;
}
I have a Home component with this inside:
<alert type="info">Hello from ng2-bootstrap</alert>
Inside my home.style.scss, I have this:
:host .alert {
background-color: green;
}
which should change the background color to green, but it does not.
The above css code will produce this style:
[_nghost-wjn-3] .alert[_ngcontent-wjn-3] {
background-color: green;
}
and the final HTML looks like this:
<home _nghost-wjn-3="">
<div _ngcontent-wjn-3="" class="card-container">
<alert _ngcontent-wjn-3="" type="info" ng-reflect-type="info">
<div class="alert alert-info" role="alert" ng-reflect-initial-classes="alert" ng-reflect-ng-class="alert-info">
Hello from ng2-bootstrap Sat Sep 17 2016
</div>
</alert>
</div>
</home>
I don't know what the problem is here, but I think the selector is wrong. I'd like the final selector to be:
[_nghost-wjn-3] .alert
instead of:
[_nghost-wjn-3] .alert[_ngcontent-wjn-3]
Or in other words, why is there no _ngcontent-wjn-3 attribute on <div class="alert">...</div>?
Maybe I'm doing the whole thing wrong. What I'm trying to achieve is to customize the CSS of the individual bootstrap components (<alert> in the code above) as provided by the ng2-bootrap library (https://github.com/valor-software/ng2-bootstrap) inside my custom components (<home> in the code above).
I'm using the default view encapsulation (emulated) in the home component.
How can I do that please?
I figured it out myself. This is what I was looking for:
:host /deep/ .alert {
background-color: green;
}
The above code will produce the following:
[_nghost-wjn-3] .alert {
background-color: green;
}
This way I can modify the default styles of a bootstrap class (.alert, in this case) inside of my component <home>.
Source: https://angular.io/docs/ts/latest/guide/component-styles.html
You need:
[_nghost-wjn-3] alert[_ngcontent-wjn-3]
Instead of:
[_nghost-wjn-3] .alert[_ngcontent-wjn-3]
If you go and check your structure, alert tag has the ngcontent... attribute, not his div child with alert class.