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

finished right panel

Browse source
This commit is contained in:
adan.ulloa 2020-01-09 19:12:20 -06:00 • committed by Adan Ulloa
commit 260ec4b04d
7 changed files with 195 additions and 159 deletions
Download patch file Download diff file Expand all files Collapse all files

33
src/components/UIShell/UIShellRightPanel/ActionComponent.svelte
View file

@ -1,14 +1,35 @@
<script>
// export let action = undefined;
export let type = undefined;
export let icon = undefined;
// export let content = undefined;
export let content = undefined;
export let componentIsActive = undefined;
import { cx } from '../../../lib';
import Icon from '../../Icon/Icon.svelte';
// import { leftPanelActions } from '../constants';
import { slide } from 'svelte/transition';
</script>
<button aria-label={type} class={cx('--header__action')} type="button">
<Icon {...icon} render={icon[0].render} />
</button>
<style>
.component-form {
margin: 1rem;
}
</style>
<div id="right-panel-action-component">
<button
aria-label={type}
class={cx('--header__action', componentIsActive && '--header__action--active')}
type="button">
<Icon {...icon} render={icon[0].render} />
</button>
{#if componentIsActive}
<div
id="right-panel-action-component-form"
class={cx('--header-panel', '--header-panel--expanded')}
transition:slide={{ duration: 200 }}>
<div class="component-form">
<svelte:component this={content} />
</div>
</div>
{/if}
</div>