I have following scenario:
app.component.html
<app-card>
This is the card body
</app-card>
card.component.html
<div class="card">
<div class="card-header">
Header
</div>
<div class="card-body">
</div>
</div>
Is there a simple way (like an interpolation) to render the text This is the card body into <div class="card-body">?
Use ng-content:
<div class="card">
<div class="card-header">
Header
</div>
<div class="card-body">
<ng-content></ng-content>
</div>
</div>
in app.component.html file
try below code
<ng-content>
{{ write your property here }}
</ng-content>
Related
I have a ticket component in vue:
<template>
<div class="col-lg-3 col-md-6 col-sm-12 col-xs-12 single-ticket-col">
<div class="single-ticket">
<div type="ticket" class="widget --flex-column">
<div class="top --flex-column">
<div class="ticket-type -bold">{{ product.attributes.name }}</div>
<!-- TODO: Change image url to product's image-->
<img :src="image" alt="Product Image" />
<div class="deetz --flex-row-j!sb">
<div class="event --flex-column">
<div class="date">{{ formatDate(product.attributes.date) }}</div>
<div class="price">€ {{ priceCalculationCheapest(product) }} - € {{ priceCalculationExpensive(product) }} <span>(Inkl. Mwst.)</span></div>
<div v-for="variation in product.attributes.variations">
<div class="variation">
{{variation.name}}
<div v-if="variation.scales.length != 0">
<div v-for="scale in variation.scales">
{{scale.from_amount}} for € {{scale.price_incl_vat}}
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="rip"></div>
<div class="bottom --flex-row-j!sb">
<router-link :to="{name: 'products', params: {id: product.id}}" class="btn button">Auswählen</router-link>
</div>
</div>
</div>
</div>
</template>
And some tickets have extra information, that's why they are not in the same height sometimes as you can see in the picture:
As a main div of the component I defined as all-tickets and I wrote my css like this:
.all-tickets {
display: flex;
width: 100%;
}
.all-tickets .single-ticket-col {
flex: 1;
}
But I am not successful. Could you please help me in this topic how can i make them in the same height?
I am trying to figure out how to display my divs on a single row and change their width.
If the image div doesn't exist, the description div should have width: 100% (or in my case col-12).
How can I change the width?
<div class="d-flex flex-column">
<div *ngFor="let update of updates">
<p class="font-weight-bold">{{update.title}}</p>
<div class="col-9">
<p>{{update.description}}</p>
</div>
<div *ngIf="update.imageUrl" class="col-3">
<img src="{{update.imageUrl}}">
</div>
</div>
</div>
Use ngClass directive and set classes conditionally.
<div class="d-flex flex-column">
<div *ngFor="let update of updates">
<p class="font-weight-bold">{{update.title}}</p>
<div [ngClass]="(update.imageUrl)?'col-9':'col-12'">
<p>{{update.description}}</p>
</div>
<div *ngIf="update.imageUrl" class="col-3">
<img src="{{update.imageUrl}}">
</div>
</div>
</div>
Here is the reference.
I'm trying to make a masonry cards and I'm using bootstrap 4 for this, everything is okay until I add the card-columns class.
My html is:
<div class="wrapper">
<div class="container-fluid">
<div class="col-12">
<div class="row">
<?php echo
'<div class="col-md-2">
<div class="card-columns">
<div class="card">
<img class="card-img-top img-fluid" src="'.$global_url.'uploads/post_thumbnails/'.$row['post_thumbnail'].'" alt="Thumbnail">
<div class="card-body">
<h4 class="card-title">'.$row['post_name'].'</h4>
<p class="card-text">'.short_post($row['post_text'],$rand).' read more..</p>
<p class="card-text">
<small class="text-muted">Author: '.GetProfileNickName($row['post_author']).'</small>
</p>
</div>
</div>
</div>
</div>'; ?>
</div>
</div>
</div>
</div>
I'm using PHP get the information and print it as a card.
Reference for card-columns in Bootstrap.
If you want to restrict cards per column just use a structure as:
.container > .row > .col-xx
Ref:
https://www.codeply.com/go/AP1MpYKY2H/bootstrap-4-card-deck-columns-per-row
If you don't have a problem with restricting per row
.container-fluid > .card-columns > .cards (looped) should be enough.
Thank you
<div class="wrapper">
<div class="container-fluid">
<div class="row">
<div class="col-12">
<?php echo
'<div class="col-md-2">
<div class="card-columns">
<div class="card">
<img class="card-img-top img-fluid" src="'.$global_url.'uploads/post_thumbnails/'.$row['post_thumbnail'].'" alt="Thumbnail">
<div class="card-body">
<h4 class="card-title">'.$row['post_name'].'</h4>
<p class="card-text">'.short_post($row['post_text'],$rand).' read more..</p>
<p class="card-text">
<small class="text-muted">Author: '.GetProfileNickName($row['post_author']).'</small>
</p>
</div>
</div>
</div>
</div>'; ?>
</div>
</div>
</div>
</div>
you have declared the col-12 div before declaring the row
Its because the php function which is printing out the cards have <div class="col-md-2">, and with card-columns its not possible because bootstrap is setting them to responsive eg: 3 columns or 4, I removed the col-md and now everything is okay.
This is your code what you want, You just repeat the "card" class block, if you want to declare different columns style just create a baby change in css, don't need to declare col class in inside of card-columns
column-count: 3; // the count number is your choose, depend what column you want
<div class="card-columns">
<div class="card">
<div class="card-body">
<h4 class="card-title">Card Title</h4>
<p class="card-text">Card text here read more..
</p>
<p class="card-text">
<small class="text-muted">Author: </small>
</p>
</div>
</div>
</div>
I am working on moving chunks of code from being static code within my Views components into actual reusable Components.
I have moved what is called my TrainerCards code into a separate component and the cards used to display nicely as 3 to a row when they were hard coded in my TrainerIndex.vue, but now that they are being passed as a component, they only render as 1 per row, and I don't know why.
TrainerIndex.vue -
<div class="row">
<div class="col-md-4">
<TrainerCards v-for="trainer in orderBy(filterBy(trainers, searchText), sortAttribute, sortAscending)" :key="trainer.id" :trainer="trainer"/>
</div>
</div>
`
TrainerCards.vue -
<template>
<div class="card card-profile">
<div class="card-img-top">
<router-link v-bind:to="'/trainers/' + trainer.id">
<img class="img" :src="(trainer.avatar)" />
</router-link>
</div>
<div class="card-body">
<h4 class="card-title">{{trainer.full_name}}</h4>
<h6 class="card-category">{{trainer.location}}</h6>
<div class="card-footer">
<TrainerTags v-for="tag in trainer.tags" :key="tag.id" :tag="tag"/>
</div>
</div>
</div>
</template>
Any idea on how to get them to display properly?
Your col-md-4 class is what makes them fill 1/3 of the area, but that is now outside your component and not repeating. Move that div inside:
<div class="row">
<TrainerCards v-for="trainer in orderBy(filterBy(trainers, searchText), sortAttribute, sortAscending)" :key="trainer.id" :trainer="trainer"/>
</div>
<template>
<div class="col-md-4">
<div class="card card-profile">
<div class="card-img-top">
<router-link v-bind:to="'/trainers/' + trainer.id">
<img class="img" :src="(trainer.avatar)" />
</router-link>
</div>
<div class="card-body">
<h4 class="card-title">{{trainer.full_name}}</h4>
<h6 class="card-category">{{trainer.location}}</h6>
<div class="card-footer">
<TrainerTags v-for="tag in trainer.tags" :key="tag.id" :tag="tag"/>
</div>
</div>
</div>
</div>
</template>
I'm trying to make my cards (panels) set next to each other and I'm using the templates at mdbootstrap.com.
My code:
<div class="row">
<div class="col-md-12">
<div class="card mdb-color lighten-2 text-center z-depth-2">
<div class="card-body">
<p class="white-text mb-0"> <?php echo convertCurrency("1.00", "POUND", "DOLLAR");
?>.</p>
</div>
</div>
<Br>
<div class="card mdb-color lighten-2 text-center z-depth-2">
<div class="card-body">
<p class="white-text mb-0">btc<i class="fa fa-bitcoin" aria-hidden="true">
</i> = <?php echo $info['rate'];
?></p>
</div>
</div>
</div>
</div>
I tried to give it a class of d-inline but it's not working...
The cards I'm using https://mdbootstrap.com/components/panels/
Just in case someone is looking at this, an easy way to do it is to use the card-deck class. So, for example:
<div class=card-deck>
<!-- First Card -->
<div class="card">
<div class="card-title">Title here</div>
<div class="card-body">Body here</div>
</div>
<!-- Second Card -->
<div class="card">
<div class="card-title">Title here</div>
<div class="card-body">Body here</div>
</div>
</div>
Just remember that all the cards go in the card-deck div. A drawback of this is if you have lets say 6 cards, it'll put all of the cards on the same line instead of breaking them up in multiple lines. Whenever I want cards to be on multiple lines I just use another card-deck. Hope this helps someone, cheers.
One way of doing what you want is to put both cards in two separate columns, each, i.e each box card should be inside a div with class col-md-6.
The following code shows two cards, side by side in desktop browser window size.
<div class="row">
<div class="col-md-6">
<div class="card mdb-color lighten-2 text-center z-depth-2">
<div class="card-body">
<p class="white-text mb-0">واحد جنيه سوداني = <?php echo convertCurrency("1.00", "SDG", "USD")." دولار امريكي";?>.</p>
</div>
</div>
</div>
<div class="col-md-6">
<div class="card mdb-color lighten-2 text-center z-depth-2">
<div class="card-body">
<p class="white-text mb-0">بتكوين <i class="fa fa-bitcoin" aria-hidden="true"></i> = <?php echo $info['rate']." جنيه سوداني";?></p>
</div>
</div>
</div>
</div>