Mirrors/tabler
1
0
Fork 0
mirror of https://github.com/tabler/tabler.git synced 2026-08-29 13:21:29 +04:00
Code Issues Projects Releases Wiki Activity

Restructure shared Astro sources and import aliases (#2737)

Browse Source
This commit is contained in:
Paweł Kuna
2026-07-30 23:58:48 +02:00
committed by GitHub
parent 0f8dcb0a3c
commit ad2ed849dd
492 changed files with 1469 additions and 1714 deletions
Download Patch File Download Diff File Expand all files Collapse all files
shared/components/cards/TabsCard.astro
+96
View File
@@ -0,0 +1,96 @@
---
import Icon from '@ui/Icon.astro';
import DropdownMenu from '@ui/DropdownMenu.astro';
interface Props {
id: string;
icons?: boolean;
/** hide-text param; not exercised on tabs.html, ported 1:1 from the Liquid source */
hideText?: boolean;
reverse?: boolean;
justified?: boolean;
activity?: boolean;
disabled?: boolean;
dropdown?: boolean;
settings?: boolean;
animation?: boolean;
}
const {
id,
icons,
hideText,
reverse = false,
justified,
activity,
disabled,
dropdown,
settings,
animation,
} = Astro.props;
const iconClass = hideText ? undefined : 'me-2';
const navClass = `nav nav-tabs card-header-tabs${reverse ? ' flex-row-reverse' : ''}${justified ? ' nav-fill' : ''}`;
const paneClass = `tab-pane${animation ? ' fade' : ''}`;
---
<div class="card">
<div class="card-header">
<ul class={navClass} data-bs-toggle="tabs">
<li class="nav-item">
<a href={`#tabs-home-${id}`} class="nav-link active" data-bs-toggle="tab">{icons && <Icon name="home" class={iconClass} />}{!hideText && 'Home'}</a>
</li>
<li class="nav-item">
<a href={`#tabs-profile-${id}`} class="nav-link" data-bs-toggle="tab">{icons && <Icon name="user" class={iconClass} />}{!hideText && 'Profile'}</a>
</li>
{activity && (
<li class="nav-item">
<a href={`#tabs-activity-${id}`} class="nav-link" data-bs-toggle="tab">{icons && <Icon name="activity" class={iconClass} />}{!hideText && 'Activity'}</a>
</li>
)}
{disabled && (
<li class="nav-item">
<a href={`#tabs-activity-${id}`} class="nav-link disabled" data-bs-toggle="tab">{icons && <Icon name="x" class={iconClass} />}{!hideText && 'Disabled'}</a>
</li>
)}
{dropdown && (
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" data-bs-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown</a>
<DropdownMenu />
</li>
)}
{settings && (
<li class={`nav-item ${reverse ? 'me-auto' : 'ms-auto'}`}>
<a href={`#tabs-settings-${id}`} class="nav-link" title="Settings" data-bs-toggle="tab"><Icon name="settings" /></a>
</li>
)}
</ul>
</div>
<div class="card-body">
<div class="tab-content">
<div class={`${paneClass} active show`} id={`tabs-home-${id}`}>
<h4>Home tab</h4>
<div>Cursus turpis vestibulum, dui in pharetra vulputate id sed non turpis ultricies fringilla at sed facilisis lacus pellentesque purus nibh</div>
</div>
<div class={paneClass} id={`tabs-profile-${id}`}>
<h4>Profile tab</h4>
<div>Fringilla egestas nunc quis tellus diam rhoncus ultricies tristique enim at diam, sem nunc amet, pellentesque id egestas velit sed</div>
</div>
{settings && (
<div class={paneClass} id={`tabs-settings-${id}`}>
<h4>Settings tab</h4>
<div>Donec ac vitae diam amet vel leo egestas consequat rhoncus in luctus amet, facilisi sit mauris accumsan nibh habitant senectus</div>
</div>
)}
{activity && (
<div class={paneClass} id={`tabs-activity-${id}`}>
<h4>Activity tab</h4>
<div>Donec ac vitae diam amet vel leo egestas consequat rhoncus in luctus amet, facilisi sit mauris accumsan nibh habitant senectus</div>
</div>
)}
</div>
</div>
</div>