Template:Modal: Difference between revisions

Browse history interactively

← Older edit

Content deleted Content added

VisualWikitext

Inline

Latest revision as of 21:58, 12 December 2024

Usage:

Open modal

No description.

Template parameters[Edit template data]
Parameter		Description	Type	Status
Modal content	`content`	no description	Content	required
hide toggle button	`no toggle`	no description	Boolean	suggested
button text	`button text`	no description	String	suggested
modal unique ID (if using multiple modals)	`target`	no description	String	suggested
aditional class button	`aditional class button`	no description	String	suggested
button-color	`button-color`	no description	Unknown	optional
modal header	`modal header`	no description	Unknown	optional
empty header	`empty header`	no description	Unknown	optional
modal close text	`modal close text`	no description	Unknown	optional
accept	`accept`	no description	Unknown	optional
gray button	`gray button`	no description	Unknown	optional
gray button action	`gray button action`	no description	Unknown	optional
gray button class	`gray button class`	no description	Unknown	optional
transition	`transition`	no description Suggested values `yes`	String	suggested
blue button	`blue button`	no description	Unknown	optional
Width of modal	`width`	no description Suggested values `20` `24` `28` `32` `36` `40` `44` `48` `52` `56` `60` `64` `72` `80` `96` `xs` `sm` `md` `lg` `xl` `2xl` `3xl` `4xl` `5xl` `6xl` `7xl` `full` `min` `max` `fit` `prose` `screen-sm` `screen-md` `screen-lg` `screen-xl` `screen-2xl`	String	optional
modal-class	`modal-class`	no description	Unknown	optional
close icon	`close icon`	no description	Unknown	optional

@@ Line 1: / Line 1: @@
 <noinclude>
+Usage:
-{{modal}}
+{{modal|content=<p class="text-base leading-relaxed text-gray-500 dark:text-gray-400">
+With less than a month to go before the European Union enacts new consumer privacy laws for its citizens, companies around the world are updating their terms of service agreements to comply.
+</p>
+<p class="text-base leading-relaxed text-gray-500 dark:text-gray-400">
+The European Union’s General Data Protection Regulation (G.D.P.R.) goes into effect on May 25 and is meant to ensure a common set of data rights in the European Union. It requires organizations to notify users as soon as possible of high-risk data breaches that could personally affect them.
+</p>}}
 </noinclude>
 <includeonly>
+{{#if:{{{no toggle|}}}||<!-- Modal toggle -->
+{{flow button|text={{{button text|Open modal}}}|action=modal|target={{{target|default-modal}}}|class={{{aditional class button|}}}|color-blue={{{button-color|yes}}}|dispaly=inline}} }}<!--
+Main modal --><div id="{{{target|default-modal}}}" tabindex="-1" aria-hidden="true" class="hidden {{#if:{{{transition|}}}|opacity-transition}} overflow-y-auto overflow-x-hidden fixed top-0 right-0 left-0 z-50 justify-center items-center w-full h-full md:inset-0 h-[calc(100%-1rem)] max-h-full transition-all duration-300 ease-in-out">
-<!-- Modal toggle -->
+<div class="relative p-4 w-full max-w-{{{width|2xl}}} max-h-full">
-<span data-modal-target="default-modal" data-modal-toggle="default-modal" class="block text-white bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:outline-none focus:ring-blue-300 font-medium rounded-lg text-sm px-5 py-2.5 text-center dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800 cursor-pointer" type="button">
-Toggle modal
-</span>
-<!-- Main modal -->
-<div id="default-modal" tabindex="-1" aria-hidden="true" class="hidden overflow-y-auto overflow-x-hidden fixed top-0 right-0 left-0 z-50 justify-center items-center w-full md:inset-0 h-[calc(100%-1rem)] max-h-full transition-all duration-300 ease-in-out">
-<div class="relative p-4 w-full max-w-2xl max-h-full">
 <!-- Modal content -->
 <div class="relative bg-white rounded-lg shadow dark:bg-gray-700">
-<!-- Modal header -->
+{{#if: {{{modal header|}}}{{{empty header|}}}|<!-- Modal header -->
-<div class="flex items-center justify-between p-4 md:p-5 border-b rounded-t dark:border-gray-600">
+<div class="flex items-center justify-between p-4 md:p-5 border-b rounded-t dark:border-gray-600 {{{modal-class|}}}">
+<div class="h3 text-xl font-semibold text-gray-900 dark:text-white m-0">{{{modal header|}}}</div><span type="button" class="cursor-pointer text-gray-400 bg-transparent hover:bg-gray-200 hover:text-gray-900 rounded-full text-sm w-8 h-8 ms-auto inline-flex justify-center items-center dark:hover:bg-gray-600 dark:hover:text-white" data-modal-hide="{{{target|default-modal}}}">{{i|{{{close icon|}}}times}}<span class="sr-only">{{{modal close text|Close modal}}}</span></span></div>}}
-<h3 class="text-xl font-semibold text-gray-900 dark:text-white">
-Terms of Service
-</h3>
-<span type="button" class="cursor-pointer text-gray-400 bg-transparent hover:bg-gray-200 hover:text-gray-900 rounded-lg text-sm w-8 h-8 ms-auto inline-flex justify-center items-center dark:hover:bg-gray-600 dark:hover:text-white" data-modal-hide="default-modal">
-{{i|times}}
-<span class="sr-only">Close modal</span>
-</span>
-</div>
 <!-- Modal body -->
 <div class="p-4 md:p-5 space-y-4">
+{{{content|}}}
-<p class="text-base leading-relaxed text-gray-500 dark:text-gray-400">
-With less than a month to go before the European Union enacts new consumer privacy laws for its citizens, companies around the world are updating their terms of service agreements to comply.
-</p>
-<p class="text-base leading-relaxed text-gray-500 dark:text-gray-400">
-The European Union’s General Data Protection Regulation (G.D.P.R.) goes into effect on May 25 and is meant to ensure a common set of data rights in the European Union. It requires organizations to notify users as soon as possible of high-risk data breaches that could personally affect them.
-</p>
 </div>
-<!-- Modal footer -->
+{{#if:{{{gray button|}}}{{{blue button|}}}<!-- Modal footer -->
 <div class="flex items-center p-4 md:p-5 border-t border-gray-200 rounded-b dark:border-gray-600">
-<span data-modal-hide="default-modal" type="button" class="cursor-pointer text-white bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:outline-none focus:ring-blue-300 font-medium rounded-lg text-sm px-5 py-2.5 text-center dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800">I accept</span>
+<span data-modal-hide="{{{target|default-modal}}}" type="button" class="cursor-pointer text-white bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:outline-none focus:ring-blue-300 font-medium rounded-lg text-sm px-5 py-2.5 text-center dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800">{{{{blue button|Accept}}}</span>
+{{flow button|text={{{gray button|}}}|link={{{gray button action|}}}|class={{{gray button class|}}}}}
-<span data-modal-hide="default-modal" type="button" class="cursor-pointer py-2.5 px-5 ms-3 text-sm font-medium text-gray-900 focus:outline-none bg-white rounded-lg border border-gray-200 hover:bg-gray-100 hover:text-blue-700 focus:z-10 focus:ring-4 focus:ring-gray-100 dark:focus:ring-gray-700 dark:bg-gray-800 dark:text-gray-400 dark:border-gray-600 dark:hover:text-white dark:hover:bg-gray-700">Decline</span>
-</div>
+</div>|}}
 </div>
 </div>
 </div>
 </includeonly>
+<noinclude>
+<templatedata>
+{
+	"params": {
+		"no toggle": {
+			"label": "hide toggle button",
+			"type": "boolean",
+			"suggested": true
+		},
+		"button text": {
+			"type": "string",
+			"suggested": true
+		},
+		"target": {
+			"label": "modal unique ID (if using multiple modals)",
+			"type": "string",
+			"suggested": true
+		},
+		"aditional class button": {
+			"type": "string",
+			"suggested": true
+		},
+		"button-color": {},
+		"modal header": {},
+		"empty header": {},
+		"modal close text": {},
+		"content": {
+			"label": "Modal content",
+			"type": "content",
+			"required": true,
+			"suggested": true
+		},
+		"accept": {},
+		"gray button": {},
+		"gray button action": {},
+		"gray button class": {},
+		"transition": {
+			"type": "string",
+			"suggestedvalues": [
+				"yes"
+			],
+			"suggested": true
+		},
+		"blue button": {},
+		"width": {
+			"type": "string",
+			"suggestedvalues": [
+				"20",
+				"24",
+				"28",
+				"32",
+				"36",
+				"40",
+				"44",
+				"48",
+				"52",
+				"56",
+				"60",
+				"64",
+				"72",
+				"80",
+				"96",
+				"xs",
+				"sm",
+				"md",
+				"lg",
+				"xl",
+				"2xl",
+				"3xl",
+				"4xl",
+				"5xl",
+				"6xl",
+				"7xl",
+				"full",
+				"min",
+				"max",
+				"fit",
+				"prose",
+				"screen-sm",
+				"screen-md",
+				"screen-lg",
+				"screen-xl",
+				"screen-2xl"
+			],
+			"label": "Width of modal"
+		},
+		"modal-class": {},
+		"close icon": {}
+	},
+	"paramOrder": [
+		"content",
+		"no toggle",
+		"button text",
+		"target",
+		"aditional class button",
+		"button-color",
+		"modal header",
+		"empty header",
+		"modal close text",
+		"accept",
+		"gray button",
+		"gray button action",
+		"gray button class",
+		"transition",
+		"blue button",
+		"width",
+		"modal-class",
+		"close icon"
+	]
+}
+</templatedata>
+</noinclude>[[Category:Lisa]]
+[[Category:Flowbite]]