mcp/carbon-components-svelte
1
0
Fork 0
mirror of https://github.com/carbon-design-system/carbon-components-svelte.git synced 2025-09-15 18:31:06 +00:00
Code Issues Projects Releases Packages Wiki Activity

feat(app): define initial routes

Browse source
This commit is contained in:
Eric Liu 2020-01-09 09:47:36 -08:00
commit cb4a367cc1
2 changed files with 26 additions and 39 deletions
Download patch file Download diff file Expand all files Collapse all files

65
palimpsest/src/App.svelte
View file

@ -1,50 +1,37 @@
<script> <script>
import { Router, Link, Route } from 'svelte-routing'; import ComponentLayout from './components/ComponentLayout.svelte';
import copy from 'clipboard-copy'; import ComponentSearch from './containers/ComponentSearch.svelte';
import { Search, Link as CarbonLink, CodeSnippet } from 'carbon-components-svelte'; import Header from './containers/Header.svelte';
import ThemePicker from './components/ThemePicker.svelte'; import Logo from './assets/logo.png';
import Router from 'svelte-spa-router';
let value = '';
$: code = `
search component "${value}"
`.trim();
</script> </script>
<style> <style>
nav {
position: fixed;
top: 2.5rem;
left: 0;
width: 14rem;
height: calc(100% - 2.5rem);
background-color: var(--cds-ui-01);
}
header { header {
display: flex; margin-top: 2.5rem;
align-items: baseline; padding-left: 16rem;
justify-content: space-between;
height: 2.5rem;
padding: 0 1rem;
} }
</style> </style>
<Router> <Router routes={{ '/c/:name': ComponentLayout }} />
<nav>
<Link to="/">Home</Link>
<Link to="about">About</Link>
</nav>
<div>
<Route path="about" component={ThemePicker} />
<Route path="/">Home</Route>
</div>
</Router>
<header> <Header />
<CarbonLink href="https://github.com/IBM/carbon-components-svelte">GitHub</CarbonLink>
<div> <nav>
<ThemePicker /> <ComponentSearch />
</nav>
<header class="bx--grid">
<div class="bx--row">
<img src={Logo} alt="Logo" style="width: 4rem;" />
</div> </div>
</header> </header>
<div style="width: 16rem">
<Search id="search-components" labelText="Components" small bind:value />
</div>
<CodeSnippet
on:click={() => {
copy(code);
}}
{code} />

BIN
palimpsest/src/assets/logo.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 63 KiB