Divider
divider.svelteHorizontal rules in DEFAULT, DOUBLE, and GRADIENT variants.
Demo
DEFAULT
DOUBLE
GRADIENT
Usage
001 <script lang="ts">
002 import Divider from '$lib/components/divider.svelte';
003 </script>
004
005 <div class="flex flex-col gap-2">
006 <p>DEFAULT</p>
007 <Divider />
008 <p>DOUBLE</p>
009 <Divider type="DOUBLE" />
010 <p>GRADIENT</p>
011 <Divider type="GRADIENT" />
012 </div>
013
divider.svelte
001 <script lang="ts" module>
002 import type { HTMLAttributes } from 'svelte/elements';
003
004 export type DividerProps = HTMLAttributes<HTMLDivElement> & {
005 ref?: HTMLDivElement | null;
006 type?: 'DEFAULT' | 'DOUBLE' | 'GRADIENT';
007 };
008 </script>
009
010 <script lang="ts">
011 let {
012 class: className,
013 ref = $bindable(null),
014 type = 'DEFAULT',
015 ...restProps
016 }: DividerProps = $props();
017 </script>
018
019 {#if type === 'GRADIENT'}
020 <div class="gradient {className ?? ''}" bind:this={ref} {...restProps}></div>
021 {:else if type === 'DOUBLE'}
022 <div class="divider {className ?? ''}" bind:this={ref} {...restProps}>
023 <div class="line" style="margin-bottom: 2px"></div>
024 <div class="line"></div>
025 </div>
026 {:else}
027 <div class="divider {className ?? ''}" bind:this={ref} {...restProps}>
028 <div class="line"></div>
029 </div>
030 {/if}
031
032 <style>
033 .gradient {
034 background: linear-gradient(to right, transparent, var(--border-default), transparent);
035 height: var(--line);
036 width: 100%;
037 }
038
039 .divider {
040 align-items: center;
041 border: 0;
042 display: flex;
043 flex-direction: column;
044 flex-shrink: 0;
045 height: var(--line);
046 justify-content: center;
047 outline: 0;
048 width: 100%;
049 }
050
051 .line {
052 background: var(--text-primary);
053 display: block;
054 flex-shrink: 0;
055 height: 2px;
056 width: 100%;
057 }
058 </style>
059