BradNut/svelte-library
1
0
Fork 0
mirror of https://github.com/BradNut/svelte-library synced 2025-09-08 17:40:21 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

Creating a basic search filter component.

Browse source
This commit is contained in:
Bradley Shellnut 2021-07-27 13:10:41 -07:00
parent 6a68fd734b
commit 61e9a92311
2 changed files with 29 additions and 6 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

18
src/lib/SearchFilter.svelte Normal file
View file

@ -0,0 +1,18 @@
<script>
export let items;
let search = '';
$: filteredSearch = items.filter((item) => {
return search === '' || item.toLowerCase().indexOf(search.toLowerCase()) !== -1;
});
</script>
<label>
Search Names: <br />
<input bind:value={search} type="text" placeholder="Search" />
</label>
<ul>
{#each filteredSearch as item}
<li>{item}</li>
{/each}
</ul>

17
src/routes/index.svelte
View file

@ -1,12 +1,17 @@
<script> <script>
import BetterAccordion from '$lib/BetterAccordion.svelte'; import SearchFilter from '$lib/SearchFilter.svelte';
import Toggle from '$lib/Toggle.svelte'; // import BetterAccordion from '$lib/BetterAccordion.svelte';
// import Toggle from '$lib/Toggle.svelte';
let isToggled = false; let isToggled = false;
let items = ['scott', 'wes', 'landon', 'courtney', 'lucie', 'brooklyn', 'Samson'];
</script> </script>
<h1>Welcome to Level Up UI</h1> <h1>Welcome to Level Up UI</h1>
<BetterAccordion isOpen={false} buttonText="Do I need a credit card??"> <SearchFilter {items} />
<!-- <BetterAccordion isOpen={false} buttonText="Do I need a credit card??">
<div> <div>
<p> <p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Impedit iure a accusamus harum hic, Lorem ipsum dolor sit amet consectetur adipisicing elit. Impedit iure a accusamus harum hic,
@ -14,10 +19,10 @@
neque possimus! Aperiam, distinctio! neque possimus! Aperiam, distinctio!
</p> </p>
</div> </div>
</BetterAccordion> </BetterAccordion> -->
<Toggle bind:isToggled label="Beta" /> <!-- <Toggle bind:isToggled label="Beta" />
<Toggle bind:isToggled label="Beta" style="--toggleBackgroundColor: red;" /> <Toggle bind:isToggled label="Beta" style="--toggleBackgroundColor: red;" /> -->
{#if isToggled} {#if isToggled}
<h1>I'm toggled</h1> <h1>I'm toggled</h1>