mirror of
https://github.com/carbon-design-system/carbon-components-svelte.git
synced 2025-09-15 18:31:06 +00:00
feat(ui-shell): add Header platform name slot
This commit is contained in:
parent
6645533912
commit
62cf3be278
2 changed files with 20 additions and 1 deletions
|
@ -25,6 +25,7 @@
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* Specify the platform name
|
* Specify the platform name
|
||||||
|
* Alternatively, use the named slot "platform" (e.g. <span slot="platform">...</span>)
|
||||||
* @type {string} [platformName]
|
* @type {string} [platformName]
|
||||||
*/
|
*/
|
||||||
export let platformName = undefined;
|
export let platformName = undefined;
|
||||||
|
@ -50,7 +51,7 @@
|
||||||
<span class:bx--header__name--prefix={true}>{company}</span>
|
<span class:bx--header__name--prefix={true}>{company}</span>
|
||||||
|
|
||||||
{/if}
|
{/if}
|
||||||
{platformName}
|
<slot name="platform">{platformName}</slot>
|
||||||
</a>
|
</a>
|
||||||
<slot />
|
<slot />
|
||||||
</header>
|
</header>
|
||||||
|
|
|
@ -113,9 +113,27 @@
|
||||||
let isOpen = !true;
|
let isOpen = !true;
|
||||||
</script>
|
</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'}
|
{#if story === 'header'}
|
||||||
<Header {...$$props} company={undefined}>
|
<Header {...$$props} company={undefined}>
|
||||||
<SkipToContent />
|
<SkipToContent />
|
||||||
|
<span slot="platform" class="platform-name">
|
||||||
|
Platform Name
|
||||||
|
<small>1.12.2</small>
|
||||||
|
</span>
|
||||||
</Header>
|
</Header>
|
||||||
{:else if story === 'sidenav'}
|
{:else if story === 'sidenav'}
|
||||||
<SideNav isOpen={true}>
|
<SideNav isOpen={true}>
|
||||||
|
|
Loading…
Add table
Add a link
Reference in a new issue