Skip to content

fixed-height-md-tabs #868

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
cycle4passion wants to merge 1 commit into
base: next
Choose a base branch
from
Open

fixed-height-md-tabs #868

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletions docs/src/lib/markdown/components/Tab.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,6 +14,7 @@

const tabsContext = getContext<{
activeTab: number;
hasHeight: boolean;
setActiveTab: (index: number) => void;
registerTab: (label: string | undefined, icon: Component | undefined) => number;
}>('tabs');
Expand Down
39 changes: 37 additions & 2 deletions docs/src/lib/markdown/components/Tabs.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -23,9 +23,10 @@
interface Props extends HTMLAttributes<HTMLDivElement> {
children: Snippet;
key?: string;
height?: string;
}

const { children, key, class: className, ...restProps }: Props = $props();
const { children, key, class: className, height, ...restProps }: Props = $props();

// Use synced state if key is provided, otherwise use local state
let localActiveIndex = $state(0);
Expand Down Expand Up @@ -56,6 +57,9 @@
get activeTab() {
return activeTab;
},
get hasHeight() {
return !!height;
},
setActiveTab: (index: number) => {
if (syncedState) {
syncedState.activeLabel = tabs[index]?.label ?? null;
Expand Down Expand Up @@ -103,7 +107,38 @@
</div>

<!-- Tab content -->
<div class="border rounded-lg rounded-tl-none px-3 py-1 bg-surface-100">
<div
class={cls('border rounded-lg rounded-tl-none px-3 py-1 bg-surface-100', height && 'tabs-has-height overflow-y-scroll')}
style:height={height}
>
{@render children?.()}
</div>
</div>

<style>
.tabs-has-height {
display: flex;
flex-direction: column;
}
:global(.tabs-has-height .tab:not(.hidden)) {
flex: 1;
display: flex;
flex-direction: column;
min-height: 0;
}
/* rehype-pretty-code wraps code blocks in <figure> */
:global(.tabs-has-height .tab:not(.hidden) > figure) {
flex: 1;
display: flex;
flex-direction: column;
min-height: 0;
}
:global(.tabs-has-height .tab:not(.hidden) .pre-block) {
flex: 1;
min-height: 0;
}
:global(.tabs-has-height .tab:not(.hidden) .pre-block > pre) {
flex: 1;
min-height: 0;
}
</style>
2 changes: 1 addition & 1 deletion docs/src/lib/markdown/components/pre.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -49,7 +49,7 @@
</script>

<div
class="relative group rounded-lg outline outline-surface-content/20 dark:outline-surface-content/10 overflow-hidden my-2"
class="pre-block relative group rounded-lg outline outline-surface-content/20 dark:outline-surface-content/10 overflow-hidden my-2 flex flex-col"
>
{#if dataTitle}
<div
Expand Down
4 changes: 2 additions & 2 deletions docs/src/routes/docs/getting-started/+page.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -115,7 +115,7 @@ If you wish to apply darkmode defaults, see the [dark mode](/docs/guides/styles#

or with a single `.css` import, Layerchart [provides](https://github.com/techniq/layerchart/tree/next/packages/layerchart/src/lib/styles) theming conventions for many popular UI frameworks.

:::tabs{key="framework"}
:::tabs{key="framework" height="185px"}

::tab{label="shadcn-svelte" icon="custom-brands:shadcnsvelte"}
```css title="app.css"
Expand Down Expand Up @@ -198,7 +198,7 @@ All set! Now just fire up the dev server and start iterating. Have fun!

Starter [project repos](https://github.com/techniq/layerchart/tree/next/examples) are available for popular UI frameworks.

:::tabs{key="framework"}
:::tabs{key="framework" height="140px"}

::tab{label="shadcn-svelte" icon="custom-brands:shadcnsvelte"}
[shadcn-svelte](https://www.shadcn-svelte.com/)
Expand Down
Loading