Skip to content

Commit

Permalink
fix: saadeghi#1265
Browse files Browse the repository at this point in the history
  • Loading branch information
@saadeghi @ImgBotApp
saadeghi authored and ImgBotApp committed Jun 5, 2023
1 parent 033d7d9 commit 151e6ca
Showing 1 changed file with 17 additions and 17 deletions.
34 changes: 17 additions & 17 deletions src/docs/src/routes/components/modal.svelte.md
View file
Expand Up @@ -17,19 +17,18 @@ data="{[
{ type:'component', class: 'modal-box', desc: 'The content of modal' },
{ type:'component', class: 'modal-action', desc: 'Container for modal buttons' },
{ type:'component', class: 'modal-toggle', desc: 'For checkbox that controls modal' },
{ type:'component', class: 'modal-button', desc: 'For <label> that checks the checkbox to opens/closes modal' },
{ type:'modifier', class: 'modal-open', desc: 'Add/remove this class to open/close the modal using JS' },
{ type:'responsive', class: 'modal-bottom', desc: 'Moves the modal to bottom' },
{ type:'responsive', class: 'modal-middle', desc: 'Moves the modal to middle (default)' },
]}"
/>

<Component title="Modal using label + hidden checkbox" desc='Make sure each modal you use, has a unique ID. In this example, ID is "my-modal".'>
<label for="my-modal" class="btn modal-button">open modal</label>
<label for="my-modal" class="btn">open modal</label>

<pre slot="html" use:replace={{ to: $prefix }}>{
`<!-- The button to open modal -->
<label for="my-modal" class="$$btn $$modal-button">open modal</label>
<label for="my-modal" class="$$btn">open modal</label>

<!-- Put this part before </body> tag -->
<input type="checkbox" id="my-modal" class="$$modal-toggle" />
Expand All @@ -45,7 +44,7 @@ data="{[
}</pre>
<pre slot="react" use:replace={{ to: $prefix }}>{
`{/* The button to open modal */}
<label htmlFor="my-modal" className="$$btn $$modal-button">open modal</label>
<label htmlFor="my-modal" className="$$btn">open modal</label>

{/* Put this part before </body> tag */}
<input type="checkbox" id="my-modal" className="$$modal-toggle" />
Expand Down Expand Up @@ -82,7 +81,8 @@ data="{[
`{/* The button to open modal */}
<a href="#my-modal-2" className="$$btn">open modal</a>

{/* Put this part before </body> tag */}
{/_ Put this part before </body> tag _/}

<div className="$$modal" id="my-modal-2">
<div className="$$modal-box">
<h3 className="font-bold text-lg">Congratulations random Internet user!</h3>
Expand All @@ -96,11 +96,11 @@ data="{[
</Component>

<Component title="Modal using with a close button at corner">
<label for="my-modal-3" class="btn modal-button">open modal</label>
<label for="my-modal-3" class="btn">open modal</label>

<pre slot="html" use:replace={{ to: $prefix }}>{
`<!-- The button to open modal -->
<label for="my-modal-3" class="$$btn $$modal-button">open modal</label>
<label for="my-modal-3" class="$$btn">open modal</label>

<!-- Put this part before </body> tag -->
<input type="checkbox" id="my-modal-3" class="$$modal-toggle" />
Expand All @@ -114,7 +114,7 @@ data="{[
}</pre>
<pre slot="react" use:replace={{ to: $prefix }}>{
`{/* The button to open modal */}
<label htmlFor="my-modal-3" className="$$btn $$modal-button">open modal</label>
<label htmlFor="my-modal-3" className="$$btn">open modal</label>

{/* Put this part before </body> tag */}
<input type="checkbox" id="my-modal-3" className="$$modal-toggle" />
Expand All @@ -129,11 +129,11 @@ data="{[
</Component>

<Component title="Modal that closes when clicked outside" desc="Modal works with a hidden checkbox and labels can toggle the checkbox so we can use a label tag for the whole modal and use another label for modal-box to prevent closing when modal-box is clicked">
<label for="my-modal-4" class="btn modal-button">open modal</label>
<label for="my-modal-4" class="btn">open modal</label>

<pre slot="html" use:replace={{ to: $prefix }}>{
`<!-- The button to open modal -->
<label for="my-modal-4" class="$$btn $$modal-button">open modal</label>
<label for="my-modal-4" class="$$btn">open modal</label>

<!-- Put this part before </body> tag -->
<input type="checkbox" id="my-modal-4" class="$$modal-toggle" />
Expand All @@ -146,7 +146,7 @@ data="{[
}</pre>
<pre slot="react" use:replace={{ to: $prefix }}>{
`{/* The button to open modal */}
<label htmlFor="my-modal-4" className="$$btn $$modal-button">open modal</label>
<label htmlFor="my-modal-4" className="$$btn">open modal</label>

{/* Put this part before </body> tag */}
<input type="checkbox" id="my-modal-4" className="$$modal-toggle" />
Expand All @@ -160,11 +160,11 @@ data="{[
</Component>

<Component title="Modal with custom width" desc="We remove max-width so we can use a custom size">
<label for="my-modal-5" class="btn modal-button">open modal</label>
<label for="my-modal-5" class="btn">open modal</label>

<pre slot="html" use:replace={{ to: $prefix }}>{
`<!-- The button to open modal -->
<label for="my-modal-5" class="$$btn $$modal-button">open modal</label>
<label for="my-modal-5" class="$$btn">open modal</label>

<!-- Put this part before </body> tag -->
<input type="checkbox" id="my-modal-5" class="$$modal-toggle" />
Expand All @@ -180,7 +180,7 @@ data="{[
}</pre>
<pre slot="react" use:replace={{ to: $prefix }}>{
`{/* The button to open modal */}
<label htmlFor="my-modal-5" className="$$btn $$modal-button">open modal</label>
<label htmlFor="my-modal-5" className="$$btn">open modal</label>

{/* Put this part before </body> tag */}
<input type="checkbox" id="my-modal-5" className="$$modal-toggle" />
Expand All @@ -197,11 +197,11 @@ data="{[
</Component>

<Component title="Responsive: Modal goes bottom on mobile screen and goes middle on desktop">
<label for="my-modal-6" class="btn modal-button">open modal</label>
<label for="my-modal-6" class="btn">open modal</label>

<pre slot="html" use:replace={{ to: $prefix }}>{
`<!-- The button to open modal -->
<label for="my-modal-6" class="$$btn $$modal-button">open modal</label>
<label for="my-modal-6" class="$$btn">open modal</label>

<!-- Put this part before </body> tag -->
<input type="checkbox" id="my-modal-6" class="$$modal-toggle" />
Expand All @@ -217,7 +217,7 @@ data="{[
}</pre>
<pre slot="react" use:replace={{ to: $prefix }}>{
`{/* The button to open modal */}
<label htmlFor="my-modal-6" className="$$btn $$modal-button">open modal</label>
<label htmlFor="my-modal-6" className="$$btn">open modal</label>

{/* Put this part before </body> tag */}
<input type="checkbox" id="my-modal-6" className="$$modal-toggle" />
Expand Down

0 comments on commit 151e6ca

Please sign in to comment.