Merge pull request #201 from danielboven/add-text-to-header-action

Option to set text for HeaderAction component
This commit is contained in:
Eric Liu 2020-07-19 05:42:49 -07:00 committed by GitHub
commit 2b42ebf013
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
2 changed files with 25 additions and 2 deletions

View file

@ -2,6 +2,7 @@
export let type = undefined;
export let icon = undefined;
export let isOpen = undefined;
export let text = undefined;
let elRigthPanel = undefined;
@ -18,17 +19,39 @@
}
</script>
<style>
.action-text {
font-size: 16px;
line-height: 20px;
text-decoration: none;
color: #fff;
width: 100%;
padding: 0 1rem;
}
.action-text > span {
margin-left: 0.75rem;
vertical-align: top;
}
</style>
<svelte:window on:mouseup={mouseUp} />
<div>
<button
aria-label={type}
class={cx('--header__action', isOpen && '--header__action--active')}
class:action-text={text}
type="button"
on:click={() => {
isOpen = true;
}}>
<Icon {...icon} />
<slot name="text">
{#if text}
<span>{text}</span>
{/if}
</slot>
</button>
{#if isOpen}
<div