feat(ui-shell): add Header platform name slot

This commit is contained in:
Eric Liu 2020-08-01 15:46:28 -07:00
commit 62cf3be278
2 changed files with 20 additions and 1 deletions

View file

@ -25,6 +25,7 @@
/**
* Specify the platform name
* Alternatively, use the named slot "platform" (e.g. <span slot="platform">...</span>)
* @type {string} [platformName]
*/
export let platformName = undefined;
@ -50,7 +51,7 @@
<span class:bx--header__name--prefix={true}>{company}</span>
&nbsp;
{/if}
{platformName}
<slot name="platform">{platformName}</slot>
</a>
<slot />
</header>

View file

@ -113,9 +113,27 @@
let isOpen = !true;
</script>
<style>
.platform-name {
display: flex;
align-items: baseline;
}
.platform-name small {
margin-left: 0.5rem;
font-size: 0.625rem;
font-weight: 400;
color: #a8a8a8;
}
</style>
{#if story === 'header'}
<Header {...$$props} company={undefined}>
<SkipToContent />
<span slot="platform" class="platform-name">
Platform Name
<small>1.12.2</small>
</span>
</Header>
{:else if story === 'sidenav'}
<SideNav isOpen={true}>