Template:Modal: Difference between revisions

Browse history interactively

← Older edit Newer edit →

Content deleted Content added

VisualWikitext

Inline

Revision as of 19:04, 12 September 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 16: / Line 16: @@
 <div class="relative bg-white rounded-lg shadow dark:bg-gray-700">
 {{#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|times}}<span class="sr-only">{{{modal close text|Close modal}}}</span></span></div>}}
+<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>}}
 <!-- Modal body -->
 <div class="p-4 md:p-5 space-y-4">
@@ Line 116: / Line 116: @@
 			],
 			"label": "Width of modal"
-		}
+		},
+		"modal-class": {},
+		"close icon": {}
 	},
 	"paramOrder": [
@@ Line 134: / Line 136: @@
 		"transition",
 		"blue button",
-		"width"
+		"width",
+		"modal-class",
+		"close icon"
 	]
 }