mirror of
https://github.com/carbon-design-system/carbon-components-svelte.git
synced 2025-09-16 19:01:05 +00:00
parent
a5e98de4a7
commit
925bfba548
11 changed files with 7242 additions and 0 deletions
50
palimpsest/src/App.svelte
Normal file
50
palimpsest/src/App.svelte
Normal file
|
@ -0,0 +1,50 @@
|
|||
<script>
|
||||
import { Router, Link, Route } from 'svelte-routing';
|
||||
import copy from 'clipboard-copy';
|
||||
import { Search, Link as CarbonLink, CodeSnippet } from 'carbon-components-svelte';
|
||||
import ThemePicker from './components/ThemePicker.svelte';
|
||||
|
||||
let value = '';
|
||||
|
||||
$: code = `
|
||||
search component "${value}"
|
||||
`.trim();
|
||||
</script>
|
||||
|
||||
<style>
|
||||
header {
|
||||
display: flex;
|
||||
align-items: baseline;
|
||||
justify-content: space-between;
|
||||
height: 2.5rem;
|
||||
padding: 0 1rem;
|
||||
}
|
||||
</style>
|
||||
|
||||
<Router>
|
||||
<nav>
|
||||
<Link to="/">Home</Link>
|
||||
<Link to="about">About</Link>
|
||||
</nav>
|
||||
<div>
|
||||
<Route path="about" component={ThemePicker} />
|
||||
<Route path="/">Home</Route>
|
||||
</div>
|
||||
</Router>
|
||||
|
||||
<header>
|
||||
<CarbonLink href="https://github.com/IBM/carbon-components-svelte">GitHub</CarbonLink>
|
||||
<div>
|
||||
<ThemePicker />
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<div style="width: 16rem">
|
||||
<Search id="search-components" labelText="Components" small bind:value />
|
||||
</div>
|
||||
|
||||
<CodeSnippet
|
||||
on:click={() => {
|
||||
copy(code);
|
||||
}}
|
||||
{code} />
|
Loading…
Add table
Add a link
Reference in a new issue