Add slot option for AppBar (#151)

* Add slot option for AppBar * Adding slot option for AppBar title * Add slot option for AppBar
techniq · Dec 7, 2023 · 263fad2 · 263fad2 · vercel · Dec 7, 2023
1 parent f5ed56f
commit 263fad2
Show file tree

Hide file tree

Showing 3 changed files with 27 additions and 7 deletions.
diff --git a/.changeset/sweet-pens-change.md b/.changeset/sweet-pens-change.md
@@ -0,0 +1,5 @@
+---
+'svelte-ux': patch
+---
+
+[AppBar] Add slot option for title.
diff --git a/packages/svelte-ux/src/lib/components/AppBar.svelte b/packages/svelte-ux/src/lib/components/AppBar.svelte
@@ -29,13 +29,17 @@
   class={cls('AppBar', 'px-4 flex items-center relative z-50', theme.root, $$restProps.class)}
 >
   <Button icon={mdiMenu} on:click={() => ($showDrawer = !$showDrawer)} class="p-3" />
-  <div class="ml-2 text-lg">
-    {#if typeof title === 'string' || typeof title === 'number'}
-      {title}
-    {:else}
-      <Breadcrumb items={title} class="gap-2" />
-    {/if}
-  </div>
+  {#if $$slots.title}
+    <slot name="title" />
+  {:else}
+    <div class="ml-2 text-lg">
+      {#if typeof title === 'string' || typeof title === 'number'}
+        {title}
+      {:else}
+        <Breadcrumb items={title} class="gap-2" />
+      {/if}
+    </div>
+  {/if}
 
   <slot />
 

diff --git a/packages/svelte-ux/src/routes/docs/components/AppBar/+page.svelte b/packages/svelte-ux/src/routes/docs/components/AppBar/+page.svelte
@@ -4,6 +4,7 @@
   import AppBar from '$lib/components/AppBar.svelte';
   import Button from '$lib/components/Button.svelte';
   import Preview from '$lib/components/Preview.svelte';
+  import ListItem from '$lib/components/ListItem.svelte';
 </script>
 
 <h1>Examples</h1>
@@ -26,6 +27,16 @@
   <AppBar title={['One', 'Two', 'Three']} />
 </Preview>
 
+<h2>Title as slot</h2>
+
+<Preview>
+  <AppBar title="Example (shown in window title)">
+    <div slot="title">
+      <ListItem title="Example" subheading="Subheading" />
+    </div>
+  </AppBar>
+</Preview>
+
 <h2>Actions</h2>
 
 <Preview>