Splide Svelte 在 Svelte 组件中自定义分页或任何 Splide 元素。

huangapple go评论83阅读模式
英文:

Splide Svelte customize pagination or any splide element in svelte component

问题

我正在尝试在我的Svelte应用程序中使用Splide,并且我想要更改分页显示的位置,因为它位于我的图像顶部并且太透明。我正在使用Svelte Splide来实现这个库,并且我尝试按照文档来自定义Splide的元素。

我已经能够在一个css文件中设置我的样式,并成功导入使用。问题是这似乎不是理想的做法,我希望能够从组件文件的styles部分设置样式。

这是我的轮播组件:

<script lang="ts">
	import { Splide, SplideSlide, SplideTrack } from '@splidejs/svelte-splide';
	import type { Options } from '@splidejs/svelte-splide';
	import '@splidejs/svelte-splide/css';
	import './carousel-style.css';

	export let images: string[];

	let splideOptions: Options = {
		type: 'loop',
		perPage: 3,
		focus: 0,
		gap: '1rem',
		padding: '1em',
		breakpoints: {
			640: { perPage: 1, perMove: 1, arrows: false },
			1024: { perPage: 2, perMove: 1 }
		}
	};
</script>

<Splide hasTrack={false} pagination options={splideOptions}>
	<SplideTrack>
		{#each images as image}
			<SplideSlide>
				<img class="m-auto" src={image} alt="Aglo" />
			</SplideSlide>
		{/each}
	</SplideTrack>
	<ul class="splide__pagination" />
</Splide>

<style>
	.splide__pagination__page.is-active {
		background: blue;
	}
	.splide__pagination.splide__pagination__page {
		background-color: black;
	}
</style>

CSS与carousel-style.css中的内容相同。我认为它不起作用的原因是这些类从未在我的组件中声明,这就是为什么如果我尝试将CSS应用于splide__pagination类,它会起作用,但对于它的子元素则不起作用。

英文:

I am trying to use Splide in my Svelte aplication and I want to change where the pagination appears, since it is on top of my images and too transparent. I'm using Svelte Splide to implement this library and I was trying to follow the docs in order to customize elements from the splide.

I was able to set my styles on a css file that I just had to import and it worked. The problem is this does not seem like the ideal way to do it, I want to be able to set styles from the styles section in my component file.

This is my carousel component:

&lt;script lang=&quot;ts&quot;&gt;
	import { Splide, SplideSlide, SplideTrack } from &#39;@splidejs/svelte-splide&#39;;
	import type { Options } from &#39;@splidejs/svelte-splide&#39;;
	import &#39;@splidejs/svelte-splide/css&#39;;
	import &#39;./carousel-style.css&#39;

	export let images: string[];

	let splideOptions: Options = {
		type: &#39;loop&#39;,
		perPage: 3,
		focus: 0,
		gap: &#39;1rem&#39;,
		padding: &#39;1em&#39;,
		breakpoints: {
			640: { perPage: 1, perMove: 1, arrows: false },
			1024: { perPage: 2, perMove: 1 }
		}
	};
&lt;/script&gt;

&lt;Splide hasTrack={false} pagination options={splideOptions}&gt;
	&lt;SplideTrack&gt;
		{#each images as image}
			&lt;SplideSlide&gt;
				&lt;img class=&quot;m-auto&quot; src={image} alt=&quot;Aglo&quot; /&gt;
			&lt;/SplideSlide&gt;
		{/each}
	&lt;/SplideTrack&gt;
	&lt;ul class=&quot;splide__pagination&quot; /&gt;
&lt;/Splide&gt;

&lt;style&gt;
	.splide__pagination__page.is-active {
		background: blue;
	}
	.splide__pagination.splide__pagination__page {
		background-color: black;
	}
&lt;/style&gt;

The css is the same as in carousel-style.css. I think the reazon it's not working is because the classes are never declared on my component, which is why if I try appling css to the class splide__pagination it does work, but for it's children it doesn't.

答案1

得分: 0

我能够通过使用global()选择器来解决这个问题,代码如下:

<style>
	.splide__pagination :global(.splide__pagination__page.is-active) {
		background-color: blue
	}
	.splide__pagination :global(.splide__pagination__page) {
		background-color: black;
	}
</style>
英文:

I was able to do resolve this by using the global() selector like so:

&lt;style&gt;
	.splide__pagination :global(.splide__pagination__page.is-active) {
		background-color: blue
	}
	.splide__pagination :global(.splide__pagination__page) {
		background-color: black;
	}
&lt;/style&gt;

huangapple
  • 本文由 发表于 2023年8月9日 00:13:55
  • 转载请务必保留本文链接:https://go.coder-hub.com/76861413.html
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定