127 lines
27 KiB
Plaintext
127 lines
27 KiB
Plaintext
@{
|
|
ViewData["Title"] = "Tabs3";
|
|
ViewData["SidebarVariant"] = "3";
|
|
}
|
|
@section Styles {
|
|
<link rel="stylesheet" href="/css/style3.css" asp-append-version="true" />
|
|
<link rel="stylesheet" href="/css/tabs-page.css" asp-append-version="true" />
|
|
}
|
|
|
|
<div class="p-4 md:p-6 space-y-6">
|
|
<div class="flex flex-col sm:flex-row sm:items-center justify-between gap-3">
|
|
<div>
|
|
<h1 class="text-2xl md:text-3xl font-bold text-gray-900">Tabs Showcase</h1>
|
|
<p class="text-gray-500 mt-1 text-sm">Comprehensive demo of tab components — horizontal, pill, vertical, card, and advanced animated variants</p>
|
|
</div>
|
|
<div class="flex items-center gap-2">
|
|
<select class="text-sm border border-gray-100 rounded-lg px-3 py-2 bg-white text-gray-600 focus:outline-none focus:ring-2 focus:ring-blue-400">
|
|
<option selected>All Sections</option>
|
|
<option>Underline Tabs</option>
|
|
<option>Pill Tabs</option>
|
|
<option>Vertical Tabs</option>
|
|
<option>Card Tabs</option>
|
|
<option>Animated Tabs</option>
|
|
</select>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="bg-white rounded-xl border border-gray-100 p-5 md:p-6 tp-fade tp-delay-1">
|
|
<div class="flex items-center gap-3 mb-5"><div class="w-10 h-10 rounded-xl flex items-center justify-center shrink-0" style="background:#eef2ff;"><svg class="w-5 h-5 text-blue-600" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 17l3 3 3-3M9 7l3-3 3 3"/></svg></div><div><h3 class="font-bold text-gray-900">Underline Horizontal Tabs</h3><p class="text-xs text-gray-400 mt-0.5">Classic underline indicator with smooth hover transitions — ideal for settings, profiles, and content navigation</p></div></div>
|
|
<div class="border border-gray-100 rounded-xl overflow-hidden">
|
|
<div role="tablist" class="flex border-b border-gray-200 overflow-x-auto px-2" id="tablistU1">
|
|
<button role="tab" aria-selected="true" aria-controls="panelU1-a" id="tabU1-a" class="tp-underline relative px-5 py-3 text-sm font-medium text-gray-500 hover:text-indigo-600 whitespace-nowrap active" onclick="switchTab('U1','a')">Profile</button>
|
|
<button role="tab" aria-selected="false" aria-controls="panelU1-b" id="tabU1-b" class="tp-underline relative px-5 py-3 text-sm font-medium text-gray-500 hover:text-indigo-600 whitespace-nowrap" onclick="switchTab('U1','b')">Account</button>
|
|
<button role="tab" aria-selected="false" aria-controls="panelU1-c" id="tabU1-c" class="tp-underline relative px-5 py-3 text-sm font-medium text-gray-500 hover:text-indigo-600 whitespace-nowrap" onclick="switchTab('U1','c')">Security</button>
|
|
<button role="tab" aria-selected="false" aria-controls="panelU1-d" id="tabU1-d" class="tp-underline relative px-5 py-3 text-sm font-medium text-gray-500 hover:text-indigo-600 whitespace-nowrap" onclick="switchTab('U1','d')">Billing</button>
|
|
</div>
|
|
<div class="p-5">
|
|
<div role="tabpanel" id="panelU1-a" aria-labelledby="tabU1-a" class="tp-content"><div class="space-y-4"><div class="flex items-center gap-4"><div class="w-14 h-14 rounded-full tp-skeleton shrink-0"></div><div class="space-y-2 flex-1"><div class="h-4 w-40 tp-skeleton"></div><div class="h-3 w-56 tp-skeleton"></div></div></div><div class="grid grid-cols-2 gap-4"><div class="space-y-2"><div class="h-3 w-20 tp-skeleton"></div><div class="h-9 w-full tp-skeleton"></div></div><div class="space-y-2"><div class="h-3 w-24 tp-skeleton"></div><div class="h-9 w-full tp-skeleton"></div></div><div class="space-y-2"><div class="h-3 w-16 tp-skeleton"></div><div class="h-9 w-full tp-skeleton"></div></div><div class="space-y-2"><div class="h-3 w-28 tp-skeleton"></div><div class="h-9 w-full tp-skeleton"></div></div></div><div class="flex gap-3 pt-1"><div class="h-9 w-28 tp-skeleton"></div><div class="h-9 w-20 tp-skeleton"></div></div></div></div>
|
|
<div role="tabpanel" id="panelU1-b" aria-labelledby="tabU1-b" class="tp-content hidden"><div class="space-y-4"><div class="h-4 w-48 tp-skeleton"></div><div class="grid grid-cols-2 gap-4"><div class="space-y-2"><div class="h-3 w-16 tp-skeleton"></div><div class="h-9 w-full tp-skeleton"></div></div><div class="space-y-2"><div class="h-3 w-20 tp-skeleton"></div><div class="h-9 w-full tp-skeleton"></div></div></div><div class="flex gap-3"><div class="h-9 w-28 tp-skeleton"></div><div class="h-9 w-20 tp-skeleton"></div></div></div></div>
|
|
<div role="tabpanel" id="panelU1-c" aria-labelledby="tabU1-c" class="tp-content hidden"><div class="space-y-4"><div class="flex items-center justify-between p-3 bg-gray-50 rounded-lg"><div class="space-y-1"><div class="h-4 w-36 tp-skeleton"></div><div class="h-3 w-52 tp-skeleton"></div></div><div class="h-6 w-11 tp-skeleton rounded-full"></div></div><div class="h-3 w-32 tp-skeleton"></div><div class="space-y-3"><div class="h-14 w-full tp-skeleton rounded-lg"></div><div class="h-14 w-full tp-skeleton rounded-lg"></div></div></div></div>
|
|
<div role="tabpanel" id="panelU1-d" aria-labelledby="tabU1-d" class="tp-content hidden"><div class="space-y-4"><div class="flex items-center justify-between"><div class="h-5 w-28 tp-skeleton"></div><div class="h-6 w-24 tp-skeleton rounded-full"></div></div><div class="h-36 w-full tp-skeleton rounded-xl"></div><div class="h-4 w-32 tp-skeleton"></div><div class="h-14 w-full tp-skeleton rounded-lg"></div></div></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="bg-white rounded-xl border border-gray-100 p-5 md:p-6 tp-fade tp-delay-2">
|
|
<div class="flex items-center gap-3 mb-5"><div class="w-10 h-10 rounded-xl flex items-center justify-center shrink-0" style="background:#eef2ff;"><svg class="w-5 h-5 text-blue-600" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 9a2 2 0 012-2h.93a2 2 0 001.664-.89l.812-1.22A2 2 0 0110.07 4h3.86a2 2 0 011.664.89l.812 1.22A2 2 0 0018.07 7H19a2 2 0 012 2v9a2 2 0 01-2 2H5a2 2 0 01-2-2V9z"/></svg></div><div><h3 class="font-bold text-gray-900">Pill Tabs</h3><p class="text-xs text-gray-400 mt-0.5">Capsule-shaped tabs with soft background — modern, clean, and touch-friendly for mobile interfaces</p></div></div>
|
|
<div class="border border-gray-100 rounded-xl overflow-hidden p-4">
|
|
<div role="tablist" class="flex flex-wrap gap-2 bg-gray-100 p-1.5 rounded-xl" id="tablistP1">
|
|
<button role="tab" aria-selected="true" aria-controls="panelP1-a" id="tabP1-a" class="tp-pill flex items-center gap-2 px-4 py-2 text-sm font-medium rounded-lg text-gray-600 active" onclick="switchTab('P1','a')">All Messages</button>
|
|
<button role="tab" aria-selected="false" aria-controls="panelP1-b" id="tabP1-b" class="tp-pill flex items-center gap-2 px-4 py-2 text-sm font-medium rounded-lg text-gray-600" onclick="switchTab('P1','b')">Inbox</button>
|
|
<button role="tab" aria-selected="false" aria-controls="panelP1-c" id="tabP1-c" class="tp-pill flex items-center gap-2 px-4 py-2 text-sm font-medium rounded-lg text-gray-600" onclick="switchTab('P1','c')">Sent</button>
|
|
<button role="tab" aria-selected="false" aria-controls="panelP1-d" id="tabP1-d" class="tp-pill flex items-center gap-2 px-4 py-2 text-sm font-medium rounded-lg text-gray-600" onclick="switchTab('P1','d')">Drafts</button>
|
|
<button role="tab" aria-selected="false" aria-controls="panelP1-e" id="tabP1-e" class="tp-pill flex items-center gap-2 px-4 py-2 text-sm font-medium rounded-lg text-gray-600" onclick="switchTab('P1','e')">Archived</button>
|
|
</div>
|
|
<div class="mt-4 grid grid-cols-1 md:grid-cols-2 gap-4">
|
|
<div role="tabpanel" id="panelP1-a" aria-labelledby="tabP1-a" class="tp-content col-span-full"><div class="space-y-3"><div class="flex items-center gap-3 p-3 bg-gray-50 rounded-lg"><div class="w-8 h-8 rounded-full tp-skeleton shrink-0"></div><div class="flex-1 space-y-1.5"><div class="h-3 w-48 tp-skeleton"></div><div class="h-2.5 w-64 tp-skeleton"></div></div><div class="h-3 w-12 tp-skeleton"></div></div><div class="flex items-center gap-3 p-3 bg-gray-50 rounded-lg"><div class="w-8 h-8 rounded-full tp-skeleton shrink-0"></div><div class="flex-1 space-y-1.5"><div class="h-3 w-40 tp-skeleton"></div><div class="h-2.5 w-56 tp-skeleton"></div></div><div class="h-3 w-12 tp-skeleton"></div></div><div class="flex items-center gap-3 p-3 bg-gray-50 rounded-lg"><div class="w-8 h-8 rounded-full tp-skeleton shrink-0"></div><div class="flex-1 space-y-1.5"><div class="h-3 w-44 tp-skeleton"></div><div class="h-2.5 w-60 tp-skeleton"></div></div><div class="h-3 w-12 tp-skeleton"></div></div></div></div>
|
|
<div role="tabpanel" id="panelP1-b" aria-labelledby="tabP1-b" class="tp-content col-span-full hidden"><div class="space-y-3"><div class="h-14 w-full tp-skeleton rounded-lg"></div><div class="h-14 w-full tp-skeleton rounded-lg"></div></div></div>
|
|
<div role="tabpanel" id="panelP1-c" aria-labelledby="tabP1-c" class="tp-content col-span-full hidden"><div class="space-y-3"><div class="h-14 w-full tp-skeleton rounded-lg"></div><div class="h-14 w-full tp-skeleton rounded-lg"></div><div class="h-14 w-full tp-skeleton rounded-lg"></div></div></div>
|
|
<div role="tabpanel" id="panelP1-d" aria-labelledby="tabP1-d" class="tp-content col-span-full hidden"><div class="space-y-3"><div class="h-14 w-full tp-skeleton rounded-lg"></div><div class="h-14 w-full tp-skeleton rounded-lg"></div></div></div>
|
|
<div role="tabpanel" id="panelP1-e" aria-labelledby="tabP1-e" class="tp-content col-span-full hidden"><div class="space-y-3"><div class="h-14 w-full tp-skeleton rounded-lg"></div></div></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="bg-white rounded-xl border border-gray-100 p-5 md:p-6 tp-fade tp-delay-3">
|
|
<div class="flex items-center gap-3 mb-5"><div class="w-10 h-10 rounded-xl flex items-center justify-center shrink-0" style="background:#eef2ff;"><svg class="w-5 h-5 text-blue-600" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16"/></svg></div><div><h3 class="font-bold text-gray-900">Vertical Tabs</h3><p class="text-xs text-gray-400 mt-0.5">Left-aligned stacked tabs with background highlight — perfect for settings panels and documentation</p></div></div>
|
|
<div class="flex flex-col md:flex-row border border-gray-100 rounded-xl overflow-hidden">
|
|
<div class="md:w-56 shrink-0 border-b md:border-b-0 md:border-r border-gray-100 bg-gray-50/50">
|
|
<div role="tablist" class="flex md:flex-col p-2 gap-1 overflow-x-auto md:overflow-x-visible" id="tablistV1">
|
|
<button role="tab" aria-selected="true" aria-controls="panelV1-a" id="tabV1-a" class="tp-vertical relative px-4 py-2.5 text-sm font-medium rounded-lg text-gray-600 whitespace-nowrap active" onclick="switchTab('V1','a')">General</button>
|
|
<button role="tab" aria-selected="false" aria-controls="panelV1-b" id="tabV1-b" class="tp-vertical relative px-4 py-2.5 text-sm font-medium rounded-lg text-gray-600 whitespace-nowrap" onclick="switchTab('V1','b')">Appearance</button>
|
|
<button role="tab" aria-selected="false" aria-controls="panelV1-c" id="tabV1-c" class="tp-vertical relative px-4 py-2.5 text-sm font-medium rounded-lg text-gray-600 whitespace-nowrap" onclick="switchTab('V1','c')">Privacy</button>
|
|
<button role="tab" aria-selected="false" aria-controls="panelV1-d" id="tabV1-d" class="tp-vertical relative px-4 py-2.5 text-sm font-medium rounded-lg text-gray-600 whitespace-nowrap" onclick="switchTab('V1','d')">Advanced</button>
|
|
</div>
|
|
</div>
|
|
<div class="flex-1 p-5">
|
|
<div role="tabpanel" id="panelV1-a" aria-labelledby="tabV1-a" class="tp-content"><div class="space-y-4"><div class="grid grid-cols-2 gap-4"><div class="space-y-2"><div class="h-3 w-20 tp-skeleton"></div><div class="h-9 w-full tp-skeleton"></div></div><div class="space-y-2"><div class="h-3 w-24 tp-skeleton"></div><div class="h-9 w-full tp-skeleton"></div></div><div class="space-y-2"><div class="h-3 w-16 tp-skeleton"></div><div class="h-9 w-full tp-skeleton"></div></div><div class="space-y-2"><div class="h-3 w-28 tp-skeleton"></div><div class="h-9 w-full tp-skeleton"></div></div></div><div class="flex gap-3"><div class="h-9 w-28 tp-skeleton"></div><div class="h-9 w-20 tp-skeleton"></div></div></div></div>
|
|
<div role="tabpanel" id="panelV1-b" aria-labelledby="tabV1-b" class="tp-content hidden"><div class="space-y-4"><div class="space-y-2"><div class="h-3 w-32 tp-skeleton"></div><div class="h-9 w-full tp-skeleton"></div></div><div class="space-y-2"><div class="h-3 w-24 tp-skeleton"></div><div class="h-9 w-full tp-skeleton"></div></div><div class="flex items-center justify-between p-3 bg-gray-50 rounded-lg"><div class="space-y-1"><div class="h-3 w-28 tp-skeleton"></div><div class="h-2.5 w-40 tp-skeleton"></div></div><div class="h-6 w-11 tp-skeleton rounded-full"></div></div></div></div>
|
|
<div role="tabpanel" id="panelV1-c" aria-labelledby="tabV1-c" class="tp-content hidden"><div class="space-y-4"><div class="flex items-center justify-between p-3 bg-gray-50 rounded-lg"><div class="space-y-1"><div class="h-3 w-32 tp-skeleton"></div><div class="h-2.5 w-44 tp-skeleton"></div></div><div class="h-6 w-11 tp-skeleton rounded-full"></div></div><div class="flex items-center justify-between p-3 bg-gray-50 rounded-lg"><div class="space-y-1"><div class="h-3 w-28 tp-skeleton"></div><div class="h-2.5 w-40 tp-skeleton"></div></div><div class="h-6 w-11 tp-skeleton rounded-full"></div></div></div></div>
|
|
<div role="tabpanel" id="panelV1-d" aria-labelledby="tabV1-d" class="tp-content hidden"><div class="space-y-4"><div class="space-y-2"><div class="h-3 w-28 tp-skeleton"></div><div class="h-9 w-full tp-skeleton"></div></div><div class="space-y-2"><div class="h-3 w-36 tp-skeleton"></div><div class="h-20 w-full tp-skeleton"></div></div><div class="flex gap-3"><div class="h-9 w-28 tp-skeleton"></div><div class="h-9 w-20 tp-skeleton"></div></div></div></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="bg-white rounded-xl border border-gray-100 p-5 md:p-6 tp-fade tp-delay-4">
|
|
<div class="flex items-center gap-3 mb-5"><div class="w-10 h-10 rounded-xl flex items-center justify-center shrink-0" style="background:#eef2ff;"><svg class="w-5 h-5 text-blue-600" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 11H5m14 0a2 2 0 012 2v6a2 2 0 01-2 2H5a2 2 0 01-2-2v-6a2 2 0 012-2m14 0V9a2 2 0 00-2-2M5 11V9a2 2 0 012-2m0 0V5a2 2 0 012-2h6a2 2 0 012 2v2M7 7h10"/></svg></div><div><h3 class="font-bold text-gray-900">Card Tabs</h3><p class="text-xs text-gray-400 mt-0.5">Bordered card-style tabs with icon and metadata — premium look for dashboard and settings navigation</p></div></div>
|
|
<div class="grid grid-cols-1 md:grid-cols-4 gap-4">
|
|
<div role="tablist" class="flex flex-col gap-2 md:col-span-1" id="tablistC1">
|
|
<button role="tab" aria-selected="true" aria-controls="panelC1-a" id="tabC1-a" class="tp-card flex items-center gap-3 w-full text-left p-3.5 rounded-xl border border-transparent active" onclick="switchTab('C1','a')"><div class="w-9 h-9 rounded-lg bg-indigo-100 flex items-center justify-center shrink-0"><svg class="w-4 h-4 text-indigo-600" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z"/></svg></div><div><p class="text-sm font-semibold text-gray-800">Profile</p><p class="text-xs text-gray-400">Personal info</p></div></button>
|
|
<button role="tab" aria-selected="false" aria-controls="panelC1-b" id="tabC1-b" class="tp-card flex items-center gap-3 w-full text-left p-3.5 rounded-xl border border-gray-200" onclick="switchTab('C1','b')"><div class="w-9 h-9 rounded-lg bg-green-100 flex items-center justify-center shrink-0"><svg class="w-4 h-4 text-green-600" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z"/></svg></div><div><p class="text-sm font-semibold text-gray-800">Security</p><p class="text-xs text-gray-400">2FA & sessions</p></div></button>
|
|
<button role="tab" aria-selected="false" aria-controls="panelC1-c" id="tabC1-c" class="tp-card flex items-center gap-3 w-full text-left p-3.5 rounded-xl border border-gray-200" onclick="switchTab('C1','c')"><div class="w-9 h-9 rounded-lg bg-amber-100 flex items-center justify-center shrink-0"><svg class="w-4 h-4 text-amber-600" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 17h5l-1.405-1.405A2.032 2.032 0 0118 14.158V11a6.002 6.002 0 00-4-5.659V5a2 2 0 10-4 0v.341C7.67 6.165 6 8.388 6 11v3.159c0 .538-.214 1.055-.595 1.436L4 17h5m6 0v1a3 3 0 11-6 0v-1m6 0H9"/></svg></div><div><p class="text-sm font-semibold text-gray-800">Notifications</p><p class="text-xs text-gray-400">Alert prefs</p></div></button>
|
|
<button role="tab" aria-selected="false" aria-controls="panelC1-d" id="tabC1-d" class="tp-card flex items-center gap-3 w-full text-left p-3.5 rounded-xl border border-gray-200" onclick="switchTab('C1','d')"><div class="w-9 h-9 rounded-lg bg-rose-100 flex items-center justify-center shrink-0"><svg class="w-4 h-4 text-rose-600" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 10h18M7 15h1m4 0h1m-7 4h12a3 3 0 003-3V8a3 3 0 00-3-3H6a3 3 0 00-3 3v8a3 3 0 003 3z"/></svg></div><div><p class="text-sm font-semibold text-gray-800">Billing</p><p class="text-xs text-gray-400">Plan & payments</p></div></button>
|
|
</div>
|
|
<div class="md:col-span-3 p-5 bg-gray-50 rounded-xl">
|
|
<div role="tabpanel" id="panelC1-a" aria-labelledby="tabC1-a" class="tp-content"><div class="space-y-4"><div class="flex items-center gap-4"><div class="w-14 h-14 rounded-full tp-skeleton shrink-0"></div><div class="space-y-2"><div class="h-4 w-36 tp-skeleton"></div><div class="h-3 w-48 tp-skeleton"></div></div></div><div class="grid grid-cols-2 gap-4"><div class="space-y-2"><div class="h-3 w-20 tp-skeleton"></div><div class="h-9 w-full tp-skeleton"></div></div><div class="space-y-2"><div class="h-3 w-24 tp-skeleton"></div><div class="h-9 w-full tp-skeleton"></div></div></div><div class="flex gap-3"><div class="h-9 w-28 tp-skeleton"></div><div class="h-9 w-20 tp-skeleton"></div></div></div></div>
|
|
<div role="tabpanel" id="panelC1-b" aria-labelledby="tabC1-b" class="tp-content hidden"><div class="space-y-4"><div class="flex items-center justify-between p-4 bg-white rounded-lg border border-gray-200"><div class="space-y-1"><div class="h-4 w-36 tp-skeleton"></div><div class="h-3 w-48 tp-skeleton"></div></div><div class="h-6 w-11 tp-skeleton rounded-full"></div></div><div class="h-3 w-28 tp-skeleton"></div><div class="space-y-3"><div class="h-14 w-full tp-skeleton rounded-lg"></div><div class="h-14 w-full tp-skeleton rounded-lg"></div></div></div></div>
|
|
<div role="tabpanel" id="panelC1-c" aria-labelledby="tabC1-c" class="tp-content hidden"><div class="space-y-4"><div class="space-y-3"><div class="flex items-center justify-between p-4 bg-white rounded-lg border border-gray-200"><div class="space-y-1"><div class="h-3 w-32 tp-skeleton"></div><div class="h-2.5 w-44 tp-skeleton"></div></div><div class="h-6 w-11 tp-skeleton rounded-full"></div></div><div class="flex items-center justify-between p-4 bg-white rounded-lg border border-gray-200"><div class="space-y-1"><div class="h-3 w-28 tp-skeleton"></div><div class="h-2.5 w-40 tp-skeleton"></div></div><div class="h-6 w-11 tp-skeleton rounded-full"></div></div></div></div></div>
|
|
<div role="tabpanel" id="panelC1-d" aria-labelledby="tabC1-d" class="tp-content hidden"><div class="space-y-4"><div class="flex items-center justify-between"><div class="h-4 w-24 tp-skeleton"></div><div class="h-6 w-20 tp-skeleton rounded-full"></div></div><div class="h-36 w-full tp-skeleton rounded-xl"></div><div class="h-4 w-32 tp-skeleton"></div><div class="h-14 w-full tp-skeleton rounded-lg"></div></div></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="bg-white rounded-xl border border-gray-100 p-5 md:p-6 tp-fade tp-delay-5">
|
|
<div class="flex items-center gap-3 mb-5"><div class="w-10 h-10 rounded-xl flex items-center justify-center shrink-0" style="background:#eef2ff;"><svg class="w-5 h-5 text-blue-600" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 10V3L4 14h7v7l9-11h-7z"/></svg></div><div><h3 class="font-bold text-gray-900">Animated Tabs</h3><p class="text-xs text-gray-400 mt-0.5">Smooth slide-in panel transitions with animated badge indicators and status dots</p></div></div>
|
|
<div class="border border-gray-100 rounded-xl overflow-hidden">
|
|
<div class="bg-gray-50 px-4 pt-3 border-b border-gray-200">
|
|
<div role="tablist" class="flex items-end gap-0" id="tablistA1">
|
|
<button role="tab" aria-selected="true" aria-controls="panelA1-a" id="tabA1-a" class="px-5 py-2.5 text-sm font-medium rounded-t-lg active" onclick="switchTabAnimated('A1','a',this)" style="background:white;border:1px solid #e5e7eb;border-bottom:1px solid white;margin-bottom:-1px;color:#1e293b;">Details <span class="inline-flex items-center justify-center w-5 h-5 ml-1.5 text-[10px] font-bold rounded-full bg-indigo-100 text-indigo-700">4</span></button>
|
|
<button role="tab" aria-selected="false" aria-controls="panelA1-b" id="tabA1-b" class="px-5 py-2.5 text-sm font-medium text-gray-500 hover:text-gray-800 rounded-t-lg transition-colors" onclick="switchTabAnimated('A1','b',this)">Activity <span class="inline-flex items-center justify-center w-2 h-2 ml-1.5 rounded-full bg-green-500 status-dot"></span></button>
|
|
<button role="tab" aria-selected="false" aria-controls="panelA1-c" id="tabA1-c" class="px-5 py-2.5 text-sm font-medium text-gray-500 hover:text-gray-800 rounded-t-lg transition-colors" onclick="switchTabAnimated('A1','c',this)">Files <span class="inline-flex items-center justify-center min-w-[18px] h-[18px] px-1 ml-1.5 text-[10px] font-bold rounded-full bg-rose-500 text-white badge-pulse">3</span></button>
|
|
<div class="ml-auto flex items-center gap-1 pb-2 pl-3"><button class="p-1.5 rounded-lg hover:bg-indigo-100 text-gray-400 hover:text-indigo-600 transition-all"><svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v16m8-8H4"/></svg></button><button class="p-1.5 rounded-lg hover:bg-indigo-100 text-gray-400 hover:text-indigo-600 transition-all"><svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15"/></svg></button></div>
|
|
</div>
|
|
</div>
|
|
<div class="p-5">
|
|
<div role="tabpanel" id="panelA1-a" aria-labelledby="tabA1-a" class="tp-panel-enter"><div class="space-y-4"><div class="grid grid-cols-3 gap-4"><div class="space-y-2"><div class="h-3 w-16 tp-skeleton"></div><div class="h-9 w-full tp-skeleton"></div></div><div class="space-y-2"><div class="h-3 w-20 tp-skeleton"></div><div class="h-9 w-full tp-skeleton"></div></div><div class="space-y-2"><div class="h-3 w-14 tp-skeleton"></div><div class="h-9 w-full tp-skeleton"></div></div></div><div class="space-y-2"><div class="h-3 w-24 tp-skeleton"></div><div class="h-20 w-full tp-skeleton"></div></div><div class="flex gap-3"><div class="h-9 w-28 tp-skeleton"></div><div class="h-9 w-20 tp-skeleton"></div></div></div></div>
|
|
<div role="tabpanel" id="panelA1-b" aria-labelledby="tabA1-b" class="hidden"><div class="space-y-3"><div class="flex items-center gap-3 p-3 bg-gray-50 rounded-lg stagger-item"><div class="w-2 h-2 rounded-full bg-blue-500 shrink-0"></div><div class="flex-1 space-y-1"><div class="h-3 w-48 tp-skeleton"></div><div class="h-2.5 w-32 tp-skeleton"></div></div></div><div class="flex items-center gap-3 p-3 bg-gray-50 rounded-lg stagger-item"><div class="w-2 h-2 rounded-full bg-green-500 shrink-0"></div><div class="flex-1 space-y-1"><div class="h-3 w-44 tp-skeleton"></div><div class="h-2.5 w-28 tp-skeleton"></div></div></div><div class="flex items-center gap-3 p-3 bg-gray-50 rounded-lg stagger-item"><div class="w-2 h-2 rounded-full bg-amber-500 shrink-0"></div><div class="flex-1 space-y-1"><div class="h-3 w-52 tp-skeleton"></div><div class="h-2.5 w-36 tp-skeleton"></div></div></div></div></div>
|
|
<div role="tabpanel" id="panelA1-c" aria-labelledby="tabA1-c" class="hidden"><div class="grid grid-cols-2 gap-4"><div class="p-4 border border-gray-200 rounded-lg space-y-2"><div class="w-full h-20 tp-skeleton rounded-lg"></div><div class="h-3 w-32 tp-skeleton"></div><div class="h-2.5 w-24 tp-skeleton"></div></div><div class="p-4 border border-gray-200 rounded-lg space-y-2"><div class="w-full h-20 tp-skeleton rounded-lg"></div><div class="h-3 w-28 tp-skeleton"></div><div class="h-2.5 w-20 tp-skeleton"></div></div></div></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
@section Scripts {
|
|
<script src="/js/tabs.js" asp-append-version="true"></script>
|
|
}
|