This slider is perfect, but I don't know how to add text beneath like this.
I would like to add text like on the screen, how can I do it?
Code:
imgCollection: Array<object> = [
{
image: 'https://cdn.sunbasket.com/b335a7ad-5bc6-4c87-a901-1baf17409c84#800.jpg',
thumbImage: 'https://cdn.sunbasket.com/b335a7ad-5bc6-4c87-a901-1baf17409c84#800.jpg',
}, {
image: 'https://cdn.sunbasket.com/5b21932c-a190-48cf-978d-4370c9a5eb3d#800.jpg',
thumbImage: 'https://cdn.sunbasket.com/5b21932c-a190-48cf-978d-4370c9a5eb3d#800.jpg',
}, {
image: 'https://cdn.sunbasket.com/c197a0e6-95ab-48f5-89c9-b73282a2fefc#800.jpg',
thumbImage: 'https://cdn.sunbasket.com/c197a0e6-95ab-48f5-89c9-b73282a2fefc#800.jpg',
}, {
image: 'https://cdn.sunbasket.com/b31be723-af77-4f48-bbf2-b9c01c5c82ef#800.jpg',
thumbImage: 'https://cdn.sunbasket.com/b31be723-af77-4f48-bbf2-b9c01c5c82ef#800.jpg',
}, {
image: 'https://cdn.sunbasket.com/68d4023b-5d9d-459b-bfcd-9e8b7a6f1b21#800.jpg',
thumbImage: 'https://cdn.sunbasket.com/68d4023b-5d9d-459b-bfcd-9e8b7a6f1b21#800.jpg',
}, {
image: 'https://cdn.sunbasket.com/4d0c21ba-2e63-4ed7-b7d4-15964ee1785d#800.jpg',
thumbImage: 'https://cdn.sunbasket.com/4d0c21ba-2e63-4ed7-b7d4-15964ee1785d#800.jpg',
}];}
HTML:
class="slider"
[infinite]="true"
[imageSize]="{width: '360px', height: 239, space: 30}"
[autoSlide]="false"></ng-image-slider>```
Related
l have this image above
l am trying to find a solution to make this image clickable for reservation position seat.
simple array :
seats: any=[
{
id:1,
selected:false,
price:50,
},
{
id:2,
selected:false,
price:35,
},
{
id:3,
selected:false,
price:35,
},
{
id:4,
selected:false,
price:35,
},
{
id:5,
selected:false,
price:35,
},
{
id:6,
selected:false,
price:35,
},
{
id:7,
selected:false,
price:35,
},
]
html code :
<div class="main_back">
</div>
css :
.main_back{
background-image: url('../../../assets/seat.jpg');
background-color: #ffffff;
height: 50%;
width: 250px;
background-position: center;
background-repeat: no-repeat;
display: block;
margin: auto;
}
If i use CSS and ngfor i will not get the current position layer for each seat, if the seat is booked or not when hovering on seats like red or green color .
using position absolute or relative .
any solution?
I suggested you the "seats" was .svg (and remove the seats from the image), so we can to have an array of object with almost this properties: x,y,selected and ocupped
seats=[{x:10,y:10,selected:true,ocupped:true},
{x:130,y:10,selected:true,ocupped:false},
....
]
A simple .html like
<div class="car">
<svg
class="seat"
(click)="!seat.ocupped && seat.selected = !seat.selected"
[class.ocupped]="seat.ocupped"
[class.selected]="seat.selected"
*ngFor="let seat of seats"
[style.top.px]="seat.y"
[style.left.px]="seat.x"
>
<!--replace with a beauty seat-->
<rect width="50" height="50" rx="5" ry="5" />
</svg>
</div>
See the property "ocupped" makes "not selectable" the seat
And a .css like
.car{
position:relative;
width:200px;
height:300px;
....
}
.seat{
position:absolute;
fill:silver;
}
.seat:hover:not(.ocupped) {
opacity:.5;
cursor:pointer
}
.seat.selected{
fill: lightsteelblue;
}
.seat.ocupped{
fill: #DA4567;
}
make the trick. See an ugly stackblitz
NOTE:I don't like the path you use in the background. I'm pretty sure that the background should be
background-image: url('assets/seat.jpg');
think that in production (and in develop) the .index.html and the .css is in the folder "dist" and the assets are in the folder "dist/assets"
if you have a set of car images that are not going to change more often and are definite some how, you can rely on seat positions on each images based Image Map elements to make them interactive. example here: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/map
basically you need to get coordinates of seats and then you can add any interaction you need to so with seats/
I have a quick question about BootstrapVue carousel:
How can I target the HTML tag inside the b-carousel-slide component to change things like font size and so on?
I know that you can change the HTML tag by using the text-tag prop (see my code example).
Would be great if this one's easy to solve or at least someone points me to the respective section in the documentation.
<template>
<div>
<b-carousel
id="carousel"
:interval="3000"
controls
fade
indicators
background="#ababab"
img-width="1024"
img-height="480"
>
<b-carousel-slide
v-for="item in services"
:key="item.title"
:caption="item.title"
:text="item.description"
text-tag="p"
:img-src="require(`../assets/images/${item.image}`)"
></b-carousel-slide>
</b-carousel>
</div>
</template>
<script>
export default {
name: 'Carousel',
data() {
return {
services: [
{
title: 'Title',
description:
'Text',
image: 'picture.jpg',
},
{
title: 'Title',
description: `Text`,
image: 'picture.jpg',
},
{
title: 'Title',
description: `Text`,
image: 'picture.jpg',
},
{
title: 'Title',
description: `Text`,
image: 'picture.jpg',
},
],
};
},
};
</script>
<style scoped>
p {
color: 'red';
}
</style>
The issue you're facing is trying to target a sub-component inside a scoped style tag.
To do this, you will need to use deep selectors.
Either of these should work.
<style scoped>
/deep/ p {
color: 'red';
}
>>> p {
color: 'red';
}
::v-deep p {
color: 'red';
}
</style>
I have created Ionic 3 side menu project. Now I need to Set gradient background color to the entire Side-menu.It seems straightforward task.But it is not working.Any idea, please?
app.html
<ion-menu [content]="content">
<ion-content class="background-gradient">
<ion-list no-lines>
<button menuClose ion-item *ngFor="let p of pages" (click)="openPage(p)" class="border-none" outline>
<ion-icon [name]="p.icon" item-left></ion-icon> {{p.title}}
</button>
</ion-list>
</ion-content>
</ion-menu>
app.component.ts
#Component({
templateUrl: 'app.html'
})
export class MyApp {
#ViewChild(Nav) nav: Nav;
rootPage: any = HomePage;
pages: Array<{ title: string, component: any, icon: string }>;
constructor(public platform: Platform, public statusBar: StatusBar, public splashScreen: SplashScreen) {
this.initializeApp();
// used for an example of ngFor and navigation
this.pages = [
{ title: 'Home', component: HomePage, icon: 'game-controller-b' },
{ title: 'Activity', component: '', icon: 'browsers' },
{ title: 'Contacts', component: '', icon: 'play' },
{ title: 'Add Project', component: '', icon: 'settings' },
{ title: 'Settings', component: '', icon: 'settings' }
];
}
app.scss
.background-gradient {
background: -webkit-linear-gradient(-55deg, #50a2a7 35%, #e9b44c 100%);
}
.border-none {
border: none;
}
It looks like this now:
Q: Can you tell me how to add gradient background color to the menu items too? i.e. entire side menu. I have tried many ways.But no luck yet :(
adding a transparent background for the menu items solves this:
.border-none{
border: none;
background: transparent;
}
I'm trying to create a simple Webix form, but there's a problem: when adding a button (regardless or its position - inside the form or out of it), the whole form is squeezed to the button width. Here's my code:
webix.ui({
container:"form",
rows:[
{ view:"form", elements:[
{ view:"text", label:"Name" },
{ view:"text", label:"Email" },
{ view:"text", label:"Password" }
] },
{ view:"button", autowidth:true, value:"Submit" }
]
});
http://webix.com/snippet/89628ea1
Wondering how it can be fixed? Thanks.
You must add the property width in the form.
{
container:"form", width:300,
rows:[
{ view:"form", elements:[
{ view:"text", label:"Name" },
{ view:"text", label:"Email" },
{ view:"text", label:"Password" }
] },
{ view:"button", autowidth:true, value:"Submit" }
]
}
I've a little problem with my extjs 4.2 MVC app with grid and image transparency:
this is my grid:
Ext.define('XProject.view.message.inbox.Grid', {
extend: 'Ext.grid.Panel',
alias: 'widget.inboxgrid',
store: 'message.Inbox',
requires: [
'Ext.ux.grid.FiltersFeature' ,
'XMailweb.view.message.inbox.CtxMenu'
],
viewConfig: {
getRowClass: function (record, rowIndex, rowParams, store) {
if ((record.get('Flags') & 2 )== 0) {
return "boldFont";
}
if (record.get('Err_Id') != 0) {
return "redFont";
}
}
},
selType: 'checkboxmodel',
selModel: {
checkOnly: false,
injectCheckbox: 0
},
features : [{
ftype: 'filters',
autoReload: false,
encode:true,
paramPrefix : 'Filter'
}],
columns: [{
xtype: 'gridcolumn',
cls: 'attach',
width: 18,
dataIndex: 'Files_Num',
menuDisabled: true,
sortable:false,
text: 'Attachment',
renderer: function(value, metaData, record ){
if (value >= 1){
metaData.css = 'attach';
}
return '';
}
}]
})
other columns are omitted.
My css role is :
.attach {
background:transparent url('../icons/attach.png') no-repeat center left !important;
text-indent: -250px;
}
my attach.png is transparent, but when grid is rendered (with alternate row background color) appear with white background.
This is my transparent image:
And my rendered grid:
Why does not have transparent background (all css images in grid)?
I try with firefox and iexplorer, but result it's the same.
Any ideas?
Background:transparent overide the background color.
Use :
.attach,.attach .x-column-header-over{
background-image:url('../icons/attach.png') !important;
background-position:center left;
background-repeat:no-repeat ;
}
Between :
background:transparent url('../icons/attach.png') no-repeat center left !important;
http://jsfiddle.net/Xpe9V/521/