mirror of
https://github.com/carbon-design-system/carbon-components-svelte.git
synced 2025-09-18 11:36:36 +00:00
0eac2e94da
In v11 [Tabs](https://carbondesignsystem.com/migrating/guide/design/#tabs-breaking) received some additional modifiers. In this commit we only want to make sure that the Svelte v10 tabs still work using v11 styles. This probably needs additional testing.
77 lines
1.7 KiB
TypeScript
77 lines
1.7 KiB
TypeScript
/// <reference types="svelte" />
|
|
import type { SvelteComponentTyped } from "svelte";
|
|
|
|
export interface TabProps
|
|
extends svelte.JSX.HTMLAttributes<HTMLElementTagNameMap["a"]> {
|
|
/**
|
|
* Specify the tab label
|
|
* Alternatively, use the default slot (e.g., <Tab><span>Label</span></Tab>)
|
|
* @default ""
|
|
*/
|
|
label?: string;
|
|
|
|
/**
|
|
* Specify the href attribute
|
|
* @default "#"
|
|
*/
|
|
href?: string;
|
|
|
|
/**
|
|
* Set to `true` to disable the tab
|
|
* @default false
|
|
*/
|
|
disabled?: boolean;
|
|
|
|
/**
|
|
* Specify the tabindex
|
|
* @default "0"
|
|
*/
|
|
tabindex?: string;
|
|
|
|
/**
|
|
* Set an id for the top-level element
|
|
* @default "ccs-" + Math.random().toString(36)
|
|
*/
|
|
id?: string;
|
|
|
|
/**
|
|
* Obtain a reference to the anchor HTML element
|
|
* @default null
|
|
*/
|
|
ref?: null | HTMLAnchorElement;
|
|
|
|
/**
|
|
* SvelteKit attribute to enable data prefetching
|
|
* if a link is hovered over or touched on mobile.
|
|
* @see https://kit.svelte.dev/docs/a-options#sveltekit-prefetch
|
|
* @default false
|
|
*/
|
|
"sveltekit:prefetch"?: boolean;
|
|
|
|
/**
|
|
* SvelteKit attribute to trigger a full page
|
|
* reload after the link is clicked.
|
|
* @see https://kit.svelte.dev/docs/a-options#sveltekit-reload
|
|
* @default false
|
|
*/
|
|
"sveltekit:reload"?: boolean;
|
|
|
|
/**
|
|
* SvelteKit attribute to prevent scrolling
|
|
* after the link is clicked.
|
|
* @see https://kit.svelte.dev/docs/a-options#sveltekit-noscroll
|
|
* @default false
|
|
*/
|
|
"sveltekit:noscroll"?: boolean;
|
|
}
|
|
|
|
export default class Tab extends SvelteComponentTyped<
|
|
TabProps,
|
|
{
|
|
click: WindowEventMap["click"];
|
|
mouseover: WindowEventMap["mouseover"];
|
|
mouseenter: WindowEventMap["mouseenter"];
|
|
mouseleave: WindowEventMap["mouseleave"];
|
|
},
|
|
{ default: {} }
|
|
> {}
|