mirror of
https://github.com/carbon-design-system/carbon-components-svelte.git
synced 2025-09-15 10:21:05 +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
|
||||
* 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>
|
||||
|
||||
{/if}
|
||||
{platformName}
|
||||
<slot name="platform">{platformName}</slot>
|
||||
</a>
|
||||
<slot />
|
||||
</header>
|
||||
|
|
|
@ -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}>
|
||||
|
|
Loading…
Add table
Add a link
Reference in a new issue