I want to create an output like
Home / Library / Data
Here is my HTML
<div class="st-breadcrumb">
<div class="st-breadcrumb-default"></div>
<div class="st-breadcrumb-item">Home</div>
<div class="st-breadcrumb-item active">Library</div>
<div class="st-breadcrumb-item">Data</div>
</div>
Here is my css in tailwind css
.
st-breadcrumb-item ~ .st-breadcrumb-item:before {
content: '/';
margin: '10px';
}
Did I miss something or I need to have settings somewhere in config?
Try this,
HTML
<div>
<div className={"st-breadcrumb"}>
// "your default div deleted"
<div className={"st-breadcrumb-item"}>Home</div>
<div className={"st-breadcrumb-item active"}>Library</div>
<div className={"st-breadcrumb-item"}>Data</div>
</div>
</div>
CSS
.st-breadcrumb {
display: flex;
flex-direction: row;
}
.st-breadcrumb-item ~ .st-breadcrumb-item::before {
content: "/";
margin: 10px;
}
Tailwind v2.2+ has built-in support for siblings called peer but it works with pseudo-classes not pseudo-elements. Simplest solution will be this structure for Tailwind v2.2 (as it is has support for after) with mode: 'jit' enabled in your config.
<div class="flex">
<div class="after:content-['/'] after:mx-2.5">Home</div>
<div data-separator='/' class="after:content-[attr(data-separator)] after:mx-2.5">Library</div>
<div class="">Data</div>
</div>
// tailwind.config.js
module.export = {
mode: 'jit',
purge: {
content: [
// files to watch
],
},
}
DEMO: https://play.tailwindcss.com/bXQTNZtkMI
For older versions you can use plugins like tailwindcss-pseudo-elements which will add support for before and after. With this plugin you need to extend variants in your config and define content as tw-content-after="/"
<div class="flex">
<div tw-content-after="/" class="after:mx-2.5">Home</div>
<div tw-content-after="/" class="after:mx-2.5">Library</div>
<div class="">Data</div>
</div>
// tailwind.config.js
module.export = {
variants: {
extend: {
margin: ['after'],
},
},
plugins: [
require('tailwindcss-pseudo-elements'),
]
}
Related
I need to apply this line of CSS to my layout:
grid-template-columns: auto 1fr;
Is this something you can't do with Tailwind CSS?
You can extend the utilities using your Tailwind CSS config:
module.exports = {
theme: {
extend: {
gridTemplateColumns: {
'my-columns': 'auto 1fr'
}
}
}
};
<div class="grid grid-cols-my-columns">
</div>
Or you can use arbitrary values if you're only using this layout in one place:
<div class="grid grid-cols-[auto_1fr]">
</div>
There's more details in the documentation.
Let's say we have a third-party CardComponent like this
<Card title="This is a title in the header">This is text in the body</Card>
And this renders in plain HTML
<div class="Card">
<div class="CardHeader"></div>
<div class="CardBody"></div>
</div>
And I'm using css modules for styling (scss in this case).
.customCard {
.CardBody {
color: red;
}
}
And then add the class to Card
import styles from ...
...
<Card className={styles.customCard} ...>...</Card>
Above will not work because it creates a generated class for CardBody like CardBody_sjkdh43. Is there a way to select non generated classnames in modules? Or is this only possible in the old fashion way to use a stylesheet?
Demo SandBox
It's an old question but the answer is :global() selector in css modules.
For more info: Exceptions - CSS Modules
Example the code:
<div class={styles.myClass}>
<SomeComponentWithOwnCss />
</div>
Output:
<div class="myClass_s4jkdh3">
<div class="SomeComponentWithOwnCss"></div>
</div>
And CSS:
.myClass div:global(.SomeComponentWithOwnCss) {
background-color: red;
}
Working example overhere: codesandbox
a small addition to #Closery's answer, you saved my ass man❤️.
you could try this for a more convenient approach with SCSS:
.parent :global {
.non-cssmodule-class {
color: red;
}
}
<div className={styles.parent}>
<div className="non-cssmodule-class" />
</div>
output:
<style>
.filename-parent__7MR41 .non-cssmodule-class { color: red; }
</style>
<div class="filename-parent__7MR41">
<div class="non-cssmodule-class"></div>
</div>
This question already has answers here:
CSS-only masonry layout
(4 answers)
Closed 3 years ago.
I have plenty of Angular mat-cards i.e. uncertain number of cards with images of different sizes.
What i am trying implement is a auto fill and adjustment of such cards depending on the container, something like this.
Now example above is using 4 columns and possible using grid.
Now, how do I implement that with cards? I tried using flex but somehow not able to properly implement it. Here's my worthless try.
<div class="mat-card-container" style="
display: flex;
justify-content: center; /* Add this */
flex-wrap: wrap;
">
<div class="mat-card-holder" style="
margin:0.6em;
width:220px;
" *ngFor="let art of arts.records">
<mat-card class="art-card" >
<mat-card-header>
<mat-card-title>{{ art.TITLE }}</mat-card-title>
<mat-card-subtitle>{{ art.AUTHOR }}</mat-card-subtitle>
</mat-card-header>
<img mat-card-image src="http://localhost/piwigo/{{ art.URL }}" alt="Photo of a Shiba Inu">
<mat-card-content>
{{art.TECHNIQUE}} / {{art.SCHOOL}} / {{art.FORM}} / {{art.TYPE}} / {{art.LOCATION}}
</mat-card-content>
</mat-card>
</div>
</div>
This is giving me this much, but still there are alot of gaps to be covered.
This is only lining them up in columns, how to i dynamically fill and adjust these in container? Assuming if container size changes, cards should rearrange without changing their own css i.e. dimensions. Is my code correct uptill? And how do i fill the gap in between?
To the extend of my knowledge, this layout style you are looking to implement cannot be achieved by css in of itself.
With some help from a javascript helper library, this is easily implemented. As you are using Angular, this is an Angular wrapper to the previous library which will permit to do such a design.
Replying from my phone and can't really reproduce your exact ui, but copying verbatim here their example implementation,
App.module.ts
import { MasonryModule } from '#thisissoon/angular-masonry';
const masonryProviders = [
{ provide: Masonry, useFactory: () => window['Masonry'] },
];
#NgModule({
imports: [MasonryModule.forRoot(masonryProviders)],
})
export class AppModule {}
angular.json
"scripts": [
"../node_modules/masonry-layout/dist/masonry.pkgd.js"
],
app.component.ts
export class AppComponent implements AfterViewInit, OnDestroy {
#ViewChild('grid') public grid: ElementRef;
public masonryInstance: MasonryInstance;
public cards = cards;
constructor(#Inject(Masonry) public masonry) {}
ngAfterViewInit() {
const options: MasonryOptions = {
itemSelector: '.card',
columnWidth: '.card',
gutter: 20,
fitWidth: true,
};
this.masonryInstance = new this.masonry(this.grid.nativeElement, options);
}
layout() {
this.masonryInstance.layout();
}
ngOnDestroy() {
this.masonryInstance.destroy();
}
}
app.component.css
:host {
display: block;
margin-top: 1rem;
}
.grid {
margin: 0 auto;
}
.card {
display: inline-block;
margin-bottom: 1rem;
width: 18rem;
}
app.component.html
<div class="grid" #grid>
<div class="card" *ngFor="let card of cards">
<div class="card-body">
<h5 class="card-title">{{ card.title }}</h5>
<p class="card-text">{{ card.text }}</p>
Go somewhere
</div>
</div>
</div>
I'm using mat-slide-toggle on a settings screen to show various "this or that" options, e.g.:
<div class="row">
<div class="column">
Automatically adjust display to screen
</div>
<div class="column">
<mat-label>Off </mat-label>
<mat-slide-toggle formControlName="autoLayout">On</mat-slide-toggle>
<mat-label> On</mat-label>
</div>
</div>
<div class="row">
<div class="column">
Choose preferred manual layout
</div>
<div class="column">
Landscape <mat-slide-toggle formControlName="portrait"></mat-slide-toggle> Portrait
</div>
</div>
Which looks like this:
Note that the "On" which is part of the mat-slide-toggle is styled slightly differently to the Off/On which are outside of the control.
Is there any way to replicate the internal label, on the left-hand side of the toggle AND the right-hand side, without having to do a load of CSS jiggery-pokery, which I've tried and failed to do already?
Add class mat-slide-toggle-content (which is defined by angular material and applied to the label) to your secondary label and also append following three CSS rules to the label.
vertical-align: top;
display: inline-block;
line-height: 24px; // this is defined in .mat-slide-toggle
In your module:
import { MatSlideToggleModule } from '#angular/material/slide-toggle';
import { MatFormFieldModule } from '#angular/material/form-field';
...
#NgModule({
declarations: [...],
imports: [
...
MatSlideToggleModule,
MatFormFieldModule
],
exports: []
})
In your html:
<div class="container">
<div class="row ">
...
<div class="col ">
<mat-label ngClass="labelBeforeSlide">Off</mat-label>
<mat-slide-toggle>On</mat-slide-toggle>
</div>
...
In your css:
.labelBeforeSlide {
vertical-align: top;
line-height: 24px;
margin-right:0.5rem;
margin-bottom:0.5rem;
}
I have a Vue project in which I'm displaying information about all projects hosted on a GitLab instance, e.g. name, ID, ... and most importantly, associated pipelines and their schedules.
I know how to display all projects (1 project = 1 card) and change their CSS behavior depending on their properties. For instance, the grey cards below correspond to projects with no scheduled pipelines and the blue ones have some pipelines scheduled:
Now I'd like to offer an alternative option to the user by letting them clicking a checkbox for displaying the projects with scheduled pipelines only.
On the page displaying the cards, I added the checkbox:
<template>
<input
type="checkbox"
name="showOnlyScheduled"
value="false"
id="checkbox-style"
v-model="checked"
>
Show only projects that have scheduled pipelines
<div class="row">
<div
class="col-sm-12 col-md-4 col-lg-3"
id="card-grid"
v-for="project in projects"
:key="project.id"
>
<Schedules
:projectName="project.name"
:projectId="project.id"
:projectUrl="project.web_url"
:checkBoxChecked="checked"
></Schedules>
</div>
</div>
</template>
And in the file handling card displaying:
<template>
<div>
<div
class="card card-block"
id="card-style"
:class="{ 'has-no-pipelines': !hasPipelines(), 'has-pipelines': hasPipelines(), 'disable-card': !hasPipelines() && checkBoxChecked}"
>
<div class="card-block">
<h5 class="card-title">
<a
id="title-link"
:href="projectUrl"
target="_blank"
rel="noopener noreferrer"
>{{ projectName }}</a>
</h5>
<div class="card-text">
<div v-if="this.schedules.pipelines.length > 0">
<div v-for="(pipeline,index) in schedules.pipelines" :key="index" id="schedules">
<p>
<a
:href="projectUrl + '/pipeline_schedules'"
id="link-schedules"
target="_blank"
rel="noopener noreferrer"
>Pipeline #{{ pipeline.id }}</a>
- {{ pipeline.description }}
</p>
</div>
</div>
<div v-else id="no-schedules">
<div>
<div>No scheduled pipelines yet.</div>
</div>
</div>
</div>
</div>
</div>
</div>
</template>
<script>
export default {
name: "Schedules",
props: {
projectName: String,
projectId: Number,
projectUrl: String,
checkBoxChecked: {
type: Boolean,
default: false
}
},
data() {
return {
schedules: {}
};
},
mounted() {
this.GitLabAPI.get(
"/projects/" + this.projectId + "/pipeline_schedules",
{},
[this.schedules, "pipelines"]
);
},
methods: {
hasPipelines() {
if (this.schedules.pipelines.length > 0) return true;
else return false;
}
}
};
</script>
<style scoped>
.has-pipelines {
background-color: #1565c0 !important; /* blue */
}
.has-no-pipelines {
background-color: #424242 !important; /* grey */
}
.disable-card {
visibility: hidden;
display: none;
opacity: 0;
}
</style>
This code indeed makes the cards with no scheduled pipelines disappear ... but the cards do not reorganize so to be next to one another:
I guess the cards don't realign because even though I disable some CSS properties, it doesn't make the containers disappear from the DOM.
How can I make the cards realign after I made some of them disappear?