Skip to content

Commit

Permalink
add z-index to dropdown examples
Browse files Browse the repository at this point in the history
  • Loading branch information
@saadeghi
saadeghi committed Jun 20, 2023
1 parent fd4f500 commit 17d1c6d
Show file tree
Hide file tree
Showing 2 changed files with 42 additions and 42 deletions.
64 changes: 32 additions & 32 deletions src/docs/src/routes/components/dropdown/+page.svelte.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -30,15 +30,15 @@ data="{[
<Component title="Dropdown menu using <details> tag" desc="Stays open until gets clicked again. Or you can close it using JS by removing the `open` attribute">
<details class="dropdown mb-32">
<summary class="m-1 btn">open or close</summary>
<ul class="p-2 shadow menu dropdown-content bg-base-100 rounded-box w-52">
<ul class="p-2 shadow menu dropdown-content z-[1] bg-base-100 rounded-box w-52">
<li><a>Item 1</a></li>
<li><a>Item 2</a></li>
</ul>
</details>
<pre slot="html" use:replace={{ to: $prefix }}>{
`<details class="$$dropdown mb-32">
<summary class="m-1 btn">open or close</summary>
<ul class="p-2 shadow $$menu $$dropdown-content bg-base-100 $$rounded-box w-52">
<ul class="p-2 shadow $$menu $$dropdown-content z-[1] bg-base-100 $$rounded-box w-52">
<li><a>Item 1</a></li>
<li><a>Item 2</a></li>
</ul>
Expand All @@ -65,7 +65,7 @@ data="{[
<div class="text-sm mb-4 text-center">Click outside to close</div>
<div class="dropdown mb-32">
<label tabindex="0" class="m-1 btn">Click to open</label>
<ul tabindex="0" class="p-2 shadow menu dropdown-content bg-base-100 rounded-box w-52">
<ul tabindex="0" class="p-2 shadow menu dropdown-content z-[1] bg-base-100 rounded-box w-52">
<li><a>Item 1</a></li>
<li><a>Item 2</a></li>
</ul>
Expand All @@ -74,7 +74,7 @@ data="{[
<pre slot="html" use:replace={{ to: $prefix }}>{
`<div class="$$dropdown">
<label tabindex="0" class="$$btn m-1">Click</label>
<ul tabindex="0" class="$$dropdown-content $$menu p-2 shadow bg-base-100 rounded-box w-52">
<ul tabindex="0" class="$$dropdown-content z-[1] $$menu p-2 shadow bg-base-100 rounded-box w-52">
<li><a>Item 1</a></li>
<li><a>Item 2</a></li>
</ul>
Expand All @@ -87,15 +87,15 @@ data="{[
<Component title="Dropdown / aligns to end">
<div class="dropdown dropdown-end mb-32">
<label tabindex="0" class="m-1 btn">Click</label>
<ul tabindex="0" class="p-2 shadow menu dropdown-content bg-base-100 rounded-box w-52">
<ul tabindex="0" class="p-2 shadow menu dropdown-content z-[1] bg-base-100 rounded-box w-52">
<li><a>Item 1</a></li>
<li><a>Item 2</a></li>
</ul>
</div>
<pre slot="html" use:replace={{ to: $prefix }}>{
`<div class="$$dropdown $$dropdown-end">
<label tabindex="0" class="$$btn m-1">Click</label>
<ul tabindex="0" class="$$dropdown-content $$menu p-2 shadow bg-base-100 rounded-box w-52">
<ul tabindex="0" class="$$dropdown-content z-[1] $$menu p-2 shadow bg-base-100 rounded-box w-52">
<li><a>Item 1</a></li>
<li><a>Item 2</a></li>
</ul>
Expand All @@ -106,15 +106,15 @@ data="{[
<Component title="Dropdown top">
<div class="dropdown dropdown-top mt-32">
<label tabindex="0" class="m-1 btn">Click</label>
<ul tabindex="0" class="p-2 shadow menu dropdown-content bg-base-100 rounded-box w-52">
<ul tabindex="0" class="p-2 shadow menu dropdown-content z-[1] bg-base-100 rounded-box w-52">
<li><a>Item 1</a></li>
<li><a>Item 2</a></li>
</ul>
</div>
<pre slot="html" use:replace={{ to: $prefix }}>{
`<div class="$$dropdown $$dropdown-top">
<label tabindex="0" class="$$btn m-1">Click</label>
<ul tabindex="0" class="$$dropdown-content $$menu p-2 shadow bg-base-100 rounded-box w-52">
<ul tabindex="0" class="$$dropdown-content z-[1] $$menu p-2 shadow bg-base-100 rounded-box w-52">
<li><a>Item 1</a></li>
<li><a>Item 2</a></li>
</ul>
Expand All @@ -125,15 +125,15 @@ data="{[
<Component title="Dropdown top / aligns to end">
<div class="dropdown dropdown-top dropdown-end mt-32">
<label tabindex="0" class="m-1 btn">Click</label>
<ul tabindex="0" class="p-2 shadow menu dropdown-content bg-base-100 rounded-box w-52">
<ul tabindex="0" class="p-2 shadow menu dropdown-content z-[1] bg-base-100 rounded-box w-52">
<li><a>Item 1</a></li>
<li><a>Item 2</a></li>
</ul>
</div>
<pre slot="html" use:replace={{ to: $prefix }}>{
`<div class="$$dropdown $$dropdown-top $$dropdown-end">
<label tabindex="0" class="$$btn m-1">Click</label>
<ul tabindex="0" class="$$dropdown-content $$menu p-2 shadow bg-base-100 rounded-box w-52">
<ul tabindex="0" class="$$dropdown-content z-[1] $$menu p-2 shadow bg-base-100 rounded-box w-52">
<li><a>Item 1</a></li>
<li><a>Item 2</a></li>
</ul>
Expand All @@ -144,15 +144,15 @@ data="{[
<Component title="Dropdown bottom">
<div class="dropdown dropdown-bottom mb-32">
<label tabindex="0" class="m-1 btn">Click</label>
<ul tabindex="0" class="p-2 shadow menu dropdown-content bg-base-100 rounded-box w-52">
<ul tabindex="0" class="p-2 shadow menu dropdown-content z-[1] bg-base-100 rounded-box w-52">
<li><a>Item 1</a></li>
<li><a>Item 2</a></li>
</ul>
</div>
<pre slot="html" use:replace={{ to: $prefix }}>{
`<div class="$$dropdown $$dropdown-bottom">
<label tabindex="0" class="$$btn m-1">Click</label>
<ul tabindex="0" class="$$dropdown-content $$menu p-2 shadow bg-base-100 rounded-box w-52">
<ul tabindex="0" class="$$dropdown-content z-[1] $$menu p-2 shadow bg-base-100 rounded-box w-52">
<li><a>Item 1</a></li>
<li><a>Item 2</a></li>
</ul>
Expand All @@ -163,15 +163,15 @@ data="{[
<Component title="Dropdown bottom / aligns to end">
<div class="dropdown dropdown-bottom dropdown-end mb-32">
<label tabindex="0" class="m-1 btn">Click</label>
<ul tabindex="0" class="p-2 shadow menu dropdown-content bg-base-100 rounded-box w-52">
<ul tabindex="0" class="p-2 shadow menu dropdown-content z-[1] bg-base-100 rounded-box w-52">
<li><a>Item 1</a></li>
<li><a>Item 2</a></li>
</ul>
</div>
<pre slot="html" use:replace={{ to: $prefix }}>{
`<div class="$$dropdown $$dropdown-bottom $$dropdown-end">
<label tabindex="0" class="$$btn m-1">Click</label>
<ul tabindex="0" class="$$dropdown-content $$menu p-2 shadow bg-base-100 rounded-box w-52">
<ul tabindex="0" class="$$dropdown-content z-[1] $$menu p-2 shadow bg-base-100 rounded-box w-52">
<li><a>Item 1</a></li>
<li><a>Item 2</a></li>
</ul>
Expand All @@ -182,15 +182,15 @@ data="{[
<Component title="Dropdown left">
<div class="dropdown dropdown-left mb-16">
<label tabindex="0" class="m-1 btn">Click</label>
<ul tabindex="0" class="p-2 shadow menu dropdown-content bg-base-100 rounded-box w-52">
<ul tabindex="0" class="p-2 shadow menu dropdown-content z-[1] bg-base-100 rounded-box w-52">
<li><a>Item 1</a></li>
<li><a>Item 2</a></li>
</ul>
</div>
<pre slot="html" use:replace={{ to: $prefix }}>{
`<div class="$$dropdown $$dropdown-left">
<label tabindex="0" class="$$btn m-1">Click</label>
<ul tabindex="0" class="$$dropdown-content $$menu p-2 shadow bg-base-100 rounded-box w-52">
<ul tabindex="0" class="$$dropdown-content z-[1] $$menu p-2 shadow bg-base-100 rounded-box w-52">
<li><a>Item 1</a></li>
<li><a>Item 2</a></li>
</ul>
Expand All @@ -201,15 +201,15 @@ data="{[
<Component title="Dropdown left / aligns to end">
<div class="dropdown dropdown-left dropdown-end mt-16">
<label tabindex="0" class="m-1 btn">Click</label>
<ul tabindex="0" class="p-2 shadow menu dropdown-content bg-base-100 rounded-box w-52">
<ul tabindex="0" class="p-2 shadow menu dropdown-content z-[1] bg-base-100 rounded-box w-52">
<li><a>Item 1</a></li>
<li><a>Item 2</a></li>
</ul>
</div>
<pre slot="html" use:replace={{ to: $prefix }}>{
`<div class="$$dropdown $$dropdown-left $$dropdown-end">
<label tabindex="0" class="$$btn m-1">Click</label>
<ul tabindex="0" class="$$dropdown-content $$menu p-2 shadow bg-base-100 rounded-box w-52">
<ul tabindex="0" class="$$dropdown-content z-[1] $$menu p-2 shadow bg-base-100 rounded-box w-52">
<li><a>Item 1</a></li>
<li><a>Item 2</a></li>
</ul>
Expand All @@ -220,15 +220,15 @@ data="{[
<Component title="Dropdown right">
<div class="dropdown dropdown-right mb-16">
<label tabindex="0" class="m-1 btn">Click</label>
<ul tabindex="0" class="p-2 shadow menu dropdown-content bg-base-100 rounded-box w-52">
<ul tabindex="0" class="p-2 shadow menu dropdown-content z-[1] bg-base-100 rounded-box w-52">
<li><a>Item 1</a></li>
<li><a>Item 2</a></li>
</ul>
</div>
<pre slot="html" use:replace={{ to: $prefix }}>{
`<div class="$$dropdown $$dropdown-right">
<label tabindex="0" class="$$btn m-1">Click</label>
<ul tabindex="0" class="$$dropdown-content $$menu p-2 shadow bg-base-100 rounded-box w-52">
<ul tabindex="0" class="$$dropdown-content z-[1] $$menu p-2 shadow bg-base-100 rounded-box w-52">
<li><a>Item 1</a></li>
<li><a>Item 2</a></li>
</ul>
Expand All @@ -239,15 +239,15 @@ data="{[
<Component title="Dropdown right / aligns to end">
<div class="dropdown dropdown-right dropdown-end mt-16">
<label tabindex="0" class="m-1 btn">Click</label>
<ul tabindex="0" class="p-2 shadow menu dropdown-content bg-base-100 rounded-box w-52">
<ul tabindex="0" class="p-2 shadow menu dropdown-content z-[1] bg-base-100 rounded-box w-52">
<li><a>Item 1</a></li>
<li><a>Item 2</a></li>
</ul>
</div>
<pre slot="html" use:replace={{ to: $prefix }}>{
`<div class="$$dropdown $$dropdown-right $$dropdown-end">
<label tabindex="0" class="$$btn m-1">Click</label>
<ul tabindex="0" class="$$dropdown-content $$menu p-2 shadow bg-base-100 rounded-box w-52">
<ul tabindex="0" class="$$dropdown-content z-[1] $$menu p-2 shadow bg-base-100 rounded-box w-52">
<li><a>Item 1</a></li>
<li><a>Item 2</a></li>
</ul>
Expand All @@ -260,15 +260,15 @@ data="{[
<Component title="Dropdown on hover">
<div class="dropdown dropdown-hover mb-32">
<label tabindex="0" class="m-1 btn">Hover</label>
<ul tabindex="0" class="p-2 shadow menu dropdown-content bg-base-100 rounded-box w-52">
<ul tabindex="0" class="p-2 shadow menu dropdown-content z-[1] bg-base-100 rounded-box w-52">
<li><a>Item 1</a></li>
<li><a>Item 2</a></li>
</ul>
</div>
<pre slot="html" use:replace={{ to: $prefix }}>{
`<div class="$$dropdown $$dropdown-hover">
<label tabindex="0" class="$$btn m-1">Hover</label>
<ul tabindex="0" class="$$dropdown-content $$menu p-2 shadow bg-base-100 rounded-box w-52">
<ul tabindex="0" class="$$dropdown-content z-[1] $$menu p-2 shadow bg-base-100 rounded-box w-52">
<li><a>Item 1</a></li>
<li><a>Item 2</a></li>
</ul>
Expand All @@ -281,15 +281,15 @@ data="{[
<Component title="Force open">
<div class="dropdown dropdown-open mb-32">
<label tabindex="0" class="m-1 btn">Button</label>
<ul tabindex="0" class="p-2 shadow menu dropdown-content bg-base-100 rounded-box w-52">
<ul tabindex="0" class="p-2 shadow menu dropdown-content z-[1] bg-base-100 rounded-box w-52">
<li><a>Item 1</a></li>
<li><a>Item 2</a></li>
</ul>
</div>
<pre slot="html" use:replace={{ to: $prefix }}>{
`<div class="$$dropdown $$dropdown-open">
<label tabindex="0" class="$$btn m-1">Button</label>
<ul tabindex="0" class="$$dropdown-content $$menu p-2 shadow bg-base-100 rounded-box w-52">
<ul tabindex="0" class="$$dropdown-content z-[1] $$menu p-2 shadow bg-base-100 rounded-box w-52">
<li><a>Item 1</a></li>
<li><a>Item 2</a></li>
</ul>
Expand All @@ -302,7 +302,7 @@ data="{[
<Component title="Card as dropdown">
<div class="dropdown mb-32">
<label tabindex="0" class="m-1 btn">Click</label>
<div tabindex="0" class="w-64 p-2 shadow card card-compact dropdown-content bg-primary text-primary-content">
<div tabindex="0" class="w-64 p-2 shadow card card-compact dropdown-content z-[1] bg-primary text-primary-content">
<div class="card-body">
<h3 class="card-title">Card title!</h3>
<p>you can use any element as a dropdown.</p>
Expand All @@ -312,7 +312,7 @@ data="{[
<pre slot="html" use:replace={{ to: $prefix }}>{
`<div class="$$dropdown">
<label tabindex="0" class="$$btn m-1">Click</label>
<div tabindex="0" class="$$dropdown-content $$card $$card-compact w-64 p-2 shadow bg-primary text-primary-content">
<div tabindex="0" class="$$dropdown-content z-[1] $$card $$card-compact w-64 p-2 shadow bg-primary text-primary-content">
<div class="$$card-body">
<h3 class="$$card-title">Card title!</h3>
<p>you can use any element as a dropdown.</p>
Expand All @@ -332,7 +332,7 @@ data="{[
<a class="btn btn-ghost rounded-btn">Button</a>
<div class="dropdown dropdown-end">
<label tabindex="0" class="btn btn-ghost rounded-btn">Dropdown</label>
<ul tabindex="0" class="p-2 shadow menu dropdown-content bg-base-100 rounded-box w-52 mt-4">
<ul tabindex="0" class="p-2 shadow menu dropdown-content z-[1] bg-base-100 rounded-box w-52 mt-4">
<li><a>Item 1</a></li>
<li><a>Item 2</a></li>
</ul>
Expand All @@ -350,7 +350,7 @@ data="{[
<a class="$$btn $$btn-ghost rounded-btn">Button</a>
<div class="$$dropdown $$dropdown-end">
<label tabindex="0" class="$$btn $$btn-ghost rounded-btn">Dropdown</label>
<ul tabindex="0" class="$$menu $$dropdown-content p-2 shadow bg-base-100 rounded-box w-52 mt-4">
<ul tabindex="0" class="$$menu $$dropdown-content z-[1] p-2 shadow bg-base-100 rounded-box w-52 mt-4">
<li><a>Item 1</a></li>
<li><a>Item 2</a></li>
</ul>
Expand All @@ -368,7 +368,7 @@ data="{[
<label tabindex="0" class="btn btn-circle btn-ghost btn-xs text-info">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" class="w-4 h-4 stroke-current"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path></svg>
</label>
<div tabindex="0" class="shadow card compact dropdown-content bg-base-100 rounded-box w-64">
<div tabindex="0" class="shadow card compact dropdown-content z-[1] bg-base-100 rounded-box w-64">
<div class="card-body">
<h2 class="card-title">You needed more info?</h2>
<p>Here is a description!</p>
Expand All @@ -382,7 +382,7 @@ data="{[
<label tabindex="0" class="$$btn $$btn-circle $$btn-ghost $$btn-xs text-info">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" class="w-4 h-4 stroke-current"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path></svg>
</label>
<div tabindex="0" class="$$card $$compact $$dropdown-content shadow bg-base-100 rounded-box w-64">
<div tabindex="0" class="$$card $$compact $$dropdown-content z-[1] shadow bg-base-100 rounded-box w-64">
<div class="$$card-body">
<h2 class="$$card-title">You needed more info?</h2>
<p>Here is a description!</p>
Expand Down
20 changes: 10 additions & 10 deletions src/docs/src/routes/components/navbar/+page.svelte.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -153,7 +153,7 @@ data="{[
<img src="/images/stock/photo-1534528741775-53994a69daeb.jpg" />
</div>
</label>
<ul tabindex="0" class="mt-3 p-2 shadow menu menu-sm dropdown-content bg-base-100 rounded-box w-52">
<ul tabindex="0" class="mt-3 z-[1] p-2 shadow menu menu-sm dropdown-content bg-base-100 rounded-box w-52">
<li>
<a class="justify-between">
Profile
Expand Down Expand Up @@ -181,7 +181,7 @@ data="{[
<img src="/images/stock/photo-1534528741775-53994a69daeb.jpg" />
</div>
</label>
<ul tabindex="0" class="mt-3 p-2 shadow menu menu-sm dropdown-content bg-base-100 rounded-box w-52">
<ul tabindex="0" class="mt-3 z-[1] p-2 shadow menu menu-sm dropdown-content bg-base-100 rounded-box w-52">
<li>
<a class="justify-between">
Profile
Expand Down Expand Up @@ -210,7 +210,7 @@ data="{[
<span class="badge badge-sm indicator-item">8</span>
</div>
</label>
<div tabindex="0" class="mt-3 card card-compact w-52 dropdown-content bg-base-100 shadow">
<div tabindex="0" class="mt-3 z-[1] card card-compact w-52 dropdown-content bg-base-100 shadow">
<div class="card-body">
<span class="font-bold text-lg">8 Items</span>
<span class="text-info">Subtotal: $999</span>
Expand All @@ -226,7 +226,7 @@ data="{[
<img src="/images/stock/photo-1534528741775-53994a69daeb.jpg" />
</div>
</label>
<ul tabindex="0" class="mt-3 p-2 shadow menu menu-sm dropdown-content bg-base-100 rounded-box w-52">
<ul tabindex="0" class="mt-3 z-[1] p-2 shadow menu menu-sm dropdown-content bg-base-100 rounded-box w-52">
<li>
<a class="justify-between">
Profile
Expand All @@ -252,7 +252,7 @@ data="{[
<span class="$$badge $$badge-sm $$indicator-item">8</span>
</div>
</label>
<div tabindex="0" class="mt-3 $$card $$card-compact $$dropdown-content w-52 bg-base-100 shadow">
<div tabindex="0" class="mt-3 z-[1] $$card $$card-compact $$dropdown-content w-52 bg-base-100 shadow">
<div class="$$card-body">
<span class="font-bold text-lg">8 Items</span>
<span class="text-info">Subtotal: $999</span>
Expand All @@ -268,7 +268,7 @@ data="{[
<img src="/images/stock/photo-1534528741775-53994a69daeb.jpg" />
</div>
</label>
<ul tabindex="0" class="$$menu $$menu-sm $$dropdown-content mt-3 p-2 shadow bg-base-100 rounded-box w-52">
<ul tabindex="0" class="$$menu $$menu-sm $$dropdown-content mt-3 z-[1] p-2 shadow bg-base-100 rounded-box w-52">
<li>
<a class="justify-between">
Profile
Expand All @@ -291,7 +291,7 @@ data="{[
<label tabindex="0" class="btn btn-ghost btn-circle">
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h7" /></svg>
</label>
<ul tabindex="0" class="mt-3 p-2 shadow menu menu-sm dropdown-content bg-base-100 rounded-box w-52">
<ul tabindex="0" class="mt-3 z-[1] p-2 shadow menu menu-sm dropdown-content bg-base-100 rounded-box w-52">
<li><a>Homepage</a></li>
<li><a>Portfolio</a></li>
<li><a>About</a></li>
Expand Down Expand Up @@ -320,7 +320,7 @@ data="{[
<label tabindex="0" class="$$btn $$btn-ghost $$btn-circle">
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h7" /></svg>
</label>
<ul tabindex="0" class="$$menu $$menu-sm $$dropdown-content mt-3 p-2 shadow bg-base-100 rounded-box w-52">
<ul tabindex="0" class="$$menu $$menu-sm $$dropdown-content mt-3 z-[1] p-2 shadow bg-base-100 rounded-box w-52">
<li><a>Homepage</a></li>
<li><a>Portfolio</a></li>
<li><a>About</a></li>
Expand Down Expand Up @@ -352,7 +352,7 @@ data="{[
<label tabindex="0" class="btn btn-ghost lg:hidden">
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h8m-8 6h16" /></svg>
</label>
<ul tabindex="0" class="mt-3 p-2 shadow menu menu-sm dropdown-content bg-base-100 rounded-box w-52">
<ul tabindex="0" class="mt-3 z-[1] p-2 shadow menu menu-sm dropdown-content bg-base-100 rounded-box w-52">
<li><a>Item 1</a></li>
<li>
<a>Parent</a>
Expand Down Expand Up @@ -392,7 +392,7 @@ data="{[
<label tabindex="0" class="$$btn $$btn-ghost lg:hidden">
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h8m-8 6h16" /></svg>
</label>
<ul tabindex="0" class="$$menu $$menu-sm $$dropdown-content mt-3 p-2 shadow bg-base-100 rounded-box w-52">
<ul tabindex="0" class="$$menu $$menu-sm $$dropdown-content mt-3 z-[1] p-2 shadow bg-base-100 rounded-box w-52">
<li><a>Item 1</a></li>
<li>
<a>Parent</a>
Expand Down

0 comments on commit 17d1c6d

Please sign in to comment.