Skip to content

Commit

Permalink
Add tab buttons (viamrobotics#552)
Browse files Browse the repository at this point in the history
  • Loading branch information
micheal-parks authored Aug 6, 2024
1 parent 4d6c6c6 commit c7f9fa0
Show file tree
Hide file tree
Showing 3 changed files with 37 additions and 8 deletions.
2 changes: 1 addition & 1 deletion packages/core/package.json
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
{
"name": "@viamrobotics/prime-core",
"version": "0.0.140",
"version": "0.0.141",
"publishConfig": {
"access": "public"
},
Expand Down
24 changes: 17 additions & 7 deletions packages/core/src/lib/tab.svelte
Original file line number Diff line number Diff line change
Expand Up @@ -17,31 +17,40 @@ A clickable element that allows the user to navigate to another page or area.
import cx from 'classnames';
import type { HTMLAttributes } from 'svelte/elements';
import { CONTEXT_KEY } from './tabs-bar.svelte';
import { getContext } from 'svelte';
import { createEventDispatcher, getContext } from 'svelte';
import type { Writable } from 'svelte/store';
interface $$Props extends HTMLAttributes<HTMLElement> {
href: string;
href?: string;
title: string;
selected?: boolean;
class?: string;
}
/** The tab's href. */
export let href: $$Props['href'];
export let href: $$Props['href'] = undefined;
/** The tab's title. */
export let title: $$Props['title'];
//* The tab's state */
export let selected: $$Props['selected'] = false;
const variant = getContext<Writable<'primary' | 'secondary'>>(CONTEXT_KEY);
let className = '';
export { className as class };
const variant = getContext<Writable<'primary' | 'secondary'>>(CONTEXT_KEY);
const dispatch = createEventDispatcher<{ click: MouseEvent }>();
const onclick = (event: MouseEvent) => {
dispatch('click', event);
};
</script>

<a
<!-- svelte-ignore a11y-no-noninteractive-element-interactions -->
<svelte:element
this={href ? 'a' : 'button'}
role="navigation"
{href}
aria-current={selected ? 'page' : false}
class={cx(
Expand All @@ -55,6 +64,7 @@ export { className as class };
},
className
)}
on:click={onclick}
>
{title}
</a>
</svelte:element>
19 changes: 19 additions & 0 deletions packages/core/src/routes/+page.svelte
Original file line number Diff line number Diff line change
Expand Up @@ -1637,6 +1637,25 @@ const onHoverDelayMsInput = (event: Event) => {
href="#third"
/>
</TabsBar>

<TabsBar
aria-label="Tab example two"
variant="secondary"
>
<Tab
title="The first tab"
selected
on:click={() => console.log('first')}
/>
<Tab
title="The second tab"
on:click={() => console.log('second')}
/>
<Tab
title="The third tab"
on:click={() => console.log('third')}
/>
</TabsBar>
</div>

<!-- Toast Banner -->
Expand Down

0 comments on commit c7f9fa0

Please sign in to comment.