I am facing some issues with a lightning carousel that I am building in lwc like it is showing only 5 to 6 images inside the carousel and remaining are not showing up. If there is any limitation for the number of images could you please suggest the best approach or alternatives like HTML slideshow or any other way to build a carousel for 1000's of images inside the carousel.
Here I am loading the images from the parent component.
import { LightningElement, api } from "lwc";
export default class fcxmCarousel extends LightningElement {
#api selectdImage;
#api value;
}
<template>
<div class="slds-m-around_medium">
<div class="container">
<lightning-carousel>
<template for:each={value} for:item="rows">
<lightning-carousel-image width="100%" height="50%" key={imageURL} src = {rows.imageURL}
header={rows.imageName}
description={rows.imageDescription}>
</lightning-carousel-image>
</template>
</lightning-carousel>
</div>
</div>
<!-- </lightning-card> -->
</template>
Yes, we can only show 5-6 images using standard lightning-carousel component, for more details reefer this link https://developer.salesforce.com/docs/component-library/bundle/lightning:carousel
Related
What I want
is to have a Breadcrumb component rendered in the __layout.svelte and using a writable store $breadcrumb to read the data to display. The $breadcrumb data is filled in every route.svelte file with data provided by a loader
The problem
When the page is served (yarn dev) or rendered (yarn build with adapter-static) the breadcrumb has the data from another route and then gets updated when the page is rehydrated. Basically, it looks like the Breadcrumb.svelte component is rendered before the data is loaded in the view hence using the old store value from the previous page.
Rendering the Breadcrumb component from every single route fixes the issue but I would like to keep it in the __layout file.
Any idea on what to do ?
The code
__layout.svelte
<script>
import Breadcrumb from '../components/Breadcrumb.svelte'
</script>
<div class="wrap">
<MainMenu />
<div class="container">
<Breadcrumb />
<slot />
</div>
...
store.js
import { writable } from 'svelte/store';
export const breadcrumb = writable({});
components/Breadcrumb.svelte
<script>
import { breadcrumb } from '$lib/store';
</script>
{#if Object.keys($breadcrumb).length}
<ul class="breadcrumb noprn">
<li>Accueil</li>
{#each Object.entries($breadcrumb) as [label, url] (label)}
<li>
{#if url}
<a href={url}>{label}</a>
{:else}
<h1>{label}</h1>
{/if}
</li>
{/each}
</ul>
{/if}
routes/product/[id].svelte
<script>
export let reference; // << the data comes in here
let product = reference.product;
import { breadcrumb } from '$lib/store';
$breadcrumb = {
Catalogue: '/catalogue',
[reference.category.name]: `/catalogue/${reference.category.slug}`,
[reference.brand.name]: `/catalogue/brands/${reference.brand.id}`,
[product.name]: null
}
</script>
...
I have a simple react app, and im trying to add a simple loading overlay.
I saw the most common usage is react-loading-overlay.
My main app.js structure looks like that, I have a simple menu and a deck.gl map
<div className="container">
<AppMenu/>
<div className="deckgl_map">
<DeckMap/>
</div>
</div>
If I get it correctly, to use the loading overlay, I need to do something like that (using true for testing):
<LoadingOverlay
active={isActive}
spinner
text='Loading your content...'
>
<div className="container">
<AppMenu/>
<div className="deckgl_map">
<DeckMap/>
</div>
</div>
</LoadingOverlay>
But once I do that, my entire app page, instead of filling the whole screen, just takes the top 20% of the screen (and the rest is empty white).
Why wrapping my component with the LoadOverlay component causes the whole page to look weird?
Do I need to "play" with the CSS for the LoadOverlay component?
I'm new to vue.js and am used to React. I'm currently trying to import an SVG logo into my header component but I'm not sure how. In react, I would simply do import Logo from './path; and use Logo wherever I needed it within the current component. This is basically what I'm attempting to do right now but I keep getting errors. Could anyone tell me how this could be done in Vue.js?
<template>
<header class="nav">
<img src={Logo} alt="24G Logo">
</header>
</template>
<script>
import Logo from '../assets/76_logo.svg';
export default {
name: 'Header'
}
</script>
<style lang="scss" scoped>
</style>
Here are three options. The best in my opinion is the third:
Simply input src like in any webpage <img src='../path/to/file.svg' ... though that come with some drawbacks (regardless if it's :src='logoPath' where logoPath is variable containing the same. For a short overview see this stack answer, and for more details see this article from css tricks.
Check out svg-vue-loader. Vue won't automatically import svg without a loader.
Just paste it in! (Open the svg file and copy paste it into the template.) The best option in my opinion, especially when prototyping or for smaller projects. Like so:
<template>
<header class="nav">
<svg ....
</header>
</template>
If that would make it too crowded later on, just make a new component, call it say Logo, and paste svg in there and then import MainLogo component into your header.
No need for svg-loaders. Though loaders are a dev dependency, so not like it would cost you anyway; they would just do the same thing you can do manually.
// in MainLogo.vue
<template>
<svg ....
</template>
// in MainHeader.vue
<template>
<header class="nav">
<MainLogo>
</header>
</template>
<script>
import MainLogo from '../path/to/file.vue'
export default {
components: { MainLogo }
}
</script>
Cheers
After searching and searching, and seeing all the answers were old, I went ahead and tried the newish v-html prop.
The result, success!
<div v-html="avatar" style="width: 100%"></div>
The avatar is a full element that I stored in the database.
No loaders, no imports, just using the built in resources of Vue.js
If you leave out the style, then the svg will not show.
Also, loading the full element enables me to attach a ref prop to the element. Enabling me to access the svg through script.
Hope that helps someone!!
I used this with avataaar's random avatar generator and stored the resulting svg to the database (mongo)
Here is another approach that I used:
<template>
<a href="#"
class="log-link-css-class">
<!-- SVG Icon Start-->
<img alt="alt message" class="your-logo-css-class"
src="#/assets/images/logofilename.svg">
<!-- <SVG Icon End /> -->
</a>
</template>
No import required. Vue automatically converts it to the unique URL.
edit your code
<script>
import Logo from '../assets/76_logo.svg';
export default {
name: 'Header',
data(){
Logo: Logo
}
}
I have a simple app created using CRA v2 that provides a "load more" button after lists of posts. The default posts displayed on the page are generated server-side based on a set of criteria (ie. specific post type, taxonomy terms, etc), and the "load more" button queries an API to display more posts that match the same criteria.
My pages will have an undefined (but >1) number of post lists on a page, and not all of the lists will be nearby each other, so the whole thing can't exist in a single app. I need to be able to render the app more than once per-page and have them operate independently.
Best case scenario, I'd be able to do something like this:
<ul class="posts posts--foo">[first list of posts from the "foo" post type go here]</ul>
<div id="app-root" data-post-type="foo"></div>
<ul class="posts posts--bar">[second list of posts from the "bar" post type go here]</ul>
<div id="app-root" data-post-type="bar"></div>
<script src="main.7a3cc682.js"></script> <!-- built script-->
I realize this won't work as written. Is this possible, and if so what's the best way to make this work?
I was able to find a solution using the answer to this question. Here's what it looks like:
index.js
import React from 'react';
import ReactDOM from 'react-dom';
import render from 'react-dom';
import App from './App';
window.mount = function(id) {
let app = document.getElementById(id);
ReactDOM.render( <WPLoadMore {...(app.dataset)} />, document.getElementById(id) );
}
and then in my HTML:
<script src="build/static/js/main.7a3cc682.js"></script>
<ul class="posts posts--foo"></ul>
<div id="app1" data-post-type="foo"></div>
<script type="text/javascript">mount("app1");</script>
<ul class="posts posts--bar"></ul>
<div id="app2" data-post-type="bar"></div>
<script type="text/javascript">mount("app2");</script>
The only slightly wonky bit about this is that in the index.html in my public directory, I needed to move the mount() outside of the </body> tag so that it loads after all of the React scripts, like so:
</body>
<script type="text/javascript">mount("wplm");</script> <!-- included outside the body so this works in development -->
</html>
Trying to build a one page app, it will have a search div then a results div.
export class AppComponent implements OnInit{
// Div visability.
searchVisible = true;
resultsVisible = false;
}
<div class="container">
<search *ngIf="searchVisible == true"></search>
<results [resultsVisible]="resultsVisible" *ngIf="resultsVisible == true"></results>
</div>
Once results component get data back from the search form, it will switch resultsVisible to true so I am passing resultsVisible from AppComponent to ResultsComponent.
However this is not working atm.
Im not sure if that hows other people do it but I am still having trouble to hide/show the divs correctly.
Can someone please show me an example of how a "one page" app works in Angular 2 with hiding/showing elements.
Thanks
Try using [hidden]. Something like this
<div class="container">
<search [hidden]="!searchVisible"></search>
<results [hidden]="!resultsVisible"></results>
</div>