Namespace: theme

Drupal.theme(func, …Additional) → {string|object|HTMLElement|jQuery}

Generates the themed representation of a Drupal object.

All requests for themed output must go through this function. It examines the request and routes it to the appropriate theme function. If the current theme does not provide an override function, the generic theme function is called.

Parameters:
Name Type Attributes Description
func function

The name of the theme function to call.

Additional args <repeatable>

arguments to pass along to the theme function.

Source:
Returns:

Any data the theme function returns. This could be a plain HTML string, but also a complex object.

Type
string | object | HTMLElement | jQuery
Example

To retrieve the HTML for text that should be emphasized and displayed as a placeholder inside a sentence.

Drupal.theme('placeholder', text);

Methods

(static) ajaxProgressBar($element) → {string}

Provide a wrapper for the AJAX progress bar element.

Parameters:
Name Type Description
$element jQuery

Progress bar element.

Source:
Returns:

The HTML markup for the progress bar.

Type
string

(static) ajaxProgressBar($element) → {string}

Override the default ajaxProgressBar for backwards compatibility.

Parameters:
Name Type Description
$element jQuery

Progress bar element.

Source:
Returns:

The HTML markup for the progress bar.

Type
string

(static) ajaxProgressIndicatorFullscreen() → {string}

An animated progress throbber and container element for AJAX operations.

Source:
Returns:

The HTML markup for the throbber.

Type
string

(static) ajaxProgressIndicatorFullscreen() → {string}

Theme override of the ajax progress indicator for full screen.

Source:
Returns:

The HTML markup for the throbber.

Type
string

(static) ajaxProgressMessage(message) → {string}

Formats text accompanying the AJAX progress throbber.

Parameters:
Name Type Description
message string

The message shown on the UI.

Source:
Returns:

The HTML markup for the throbber.

Type
string

(static) ajaxProgressMessage(message) → {string}

Theme override of the ajax progress message.

Parameters:
Name Type Description
message string

The message shown on the UI.

Source:
Returns:

The HTML markup for the throbber.

Type
string

(static) ajaxProgressThrobber(messageopt) → {string}

An animated progress throbber and container element for AJAX operations.

Parameters:
Name Type Attributes Description
message string <optional>

(optional) The message shown on the UI.

Source:
Returns:

The HTML markup for the throbber.

Type
string

(static) ajaxProgressThrobber(message) → {string}

Theme override of the ajax progress indicator.

Parameters:
Name Type Description
message string

The message shown on the UI.

Source:
Returns:

The HTML markup for the throbber.

Type
string

(static) ajaxWrapperMultipleRootElements($elements)

Provide a wrapper for multiple root elements via Ajax.

Parameters:
Name Type Description
$elements jQuery

Response elements after parsing.

Deprecated:
  • in drupal:8.6.0 and is removed from drupal:10.0.0. Use data with desired wrapper.
Source:
See:
To Do:
  • Add deprecation warning after it is possible. For more information see: https://www.drupal.org/project/drupal/issues/2973400

(static) ajaxWrapperNewContent($newContent, ajax, response)

Provide a wrapper for new content via Ajax.

Wrap the inserted markup when inserting multiple root elements with an ajax effect.

Parameters:
Name Type Description
$newContent jQuery

Response elements after parsing.

ajax Drupal.Ajax

Drupal.Ajax object created by Drupal.ajax.

response object

The response from the Ajax request.

Deprecated:
  • in drupal:8.6.0 and is removed from drupal:10.0.0. Use data with desired wrapper.
Source:
See:
To Do:
  • Add deprecation warning after it is possible. For more information see: https://www.drupal.org/project/drupal/issues/2973400

(static) checkbox() → {string}

Theme function for a checkbox.

Source:
Returns:

The HTML markup for the checkbox.

Type
string

(static) checkbox() → {string}

Constructs a checkbox input element.

Source:
Returns:

A string representing a DOM fragment.

Type
string

(static) checkbox() → {string}

Constructs a checkbox input element.

Source:
Returns:

A string representing a DOM fragment.

Type
string

(static) ckeditorButtonGroupNameForm() → {string}

Themes a form for changing the title of a CKEditor button group.

Source:
Returns:

A HTML string for the form for the title of a CKEditor button group.

Type
string

(static) ckeditorButtonGroupNamesToggle() → {string}

Themes a button that will toggle the button group names in active config.

Source:
Returns:

A HTML string for the button to toggle group names.

Type
string

(static) ckeditorNewButtonGroup() → {string}

Themes a button that will prompt the user to name a new button group.

Source:
Returns:

A HTML string for the button to create a name for a new button group.

Type
string

(static) ckeditorRow() → {string}

Themes a blank CKEditor row.

Source:
Returns:

A HTML string for a CKEditor row.

Type
string

(static) ckeditorToolbarGroup() → {string}

Themes a blank CKEditor button group.

Source:
Returns:

A HTML string for a CKEditor button group.

Type
string

(static) contextualTrigger() → {string}

A trigger is an interactive element often bound to a click handler.

Source:
Returns:

A string representing a DOM fragment.

Type
string

(static) dateHelp(dateDesc) → {string}

Theme function for no-native-datepicker date input help text.

Parameters:
Name Type Description
dateDesc string

The help text.

Source:
Returns:

The HTML markup for the help text.

Type
string

(static) dateTimeHelp(dateId, timeId, dateDesc, timeDesc) → {string}

Theme function for no-native-datepicker date+time inputs help text.

Parameters:
Name Type Description
dateId string

The date input aria-describedby value.

timeId string

The time input aria-describedby value.

dateDesc string

The date help text.

timeDesc string

The time help text.

Source:
Returns:

The HTML markup for the help text.

Type
string

(static) detailsSummarizedContentText(textopt) → {string}

Formats the summarized details content text.

Parameters:
Name Type Attributes Description
text string | null <optional>

(optional) The summarized content text displayed in the summary.

Source:
Returns:

The formatted summarized content text.

Type
string

(static) detailsSummarizedContentText(textopt) → {string}

Theme override of summarized details content text.

Parameters:
Name Type Attributes Description
text string | null <optional>

(optional) The summarized content displayed in the summary.

Source:
Returns:

The formatted summarized content text.

Type
string

(static) detailsSummarizedContentWrapper() → {string}

The element containing a wrapper for summarized details content.

Source:
Returns:

The markup for the element that will contain the summarized content.

Type
string

(static) detailsSummarizedContentWrapper() → {string}

Theme override providing a wrapper for summarized details content.

Source:
Returns:

The markup for the element that will contain the summarized content.

Type
string

(static) dropbuttonToggle(options) → {string}

A toggle is an interactive element often bound to a click handler.

Parameters:
Name Type Description
options object

Options object.

Properties
Name Type Attributes Description
title string <optional>

The button text.

Source:
Returns:

A string representing a DOM fragment.

Type
string

(static) dropbuttonToggle(options) → {string}

Overrides the dropbutton toggle markup.

We have to keep the 'dropbutton-toggle' CSS class because the dropbutton JS operates with that one.

Parameters:
Name Type Description
options object

Options object.

Properties
Name Type Attributes Description
title string <optional>

The button text.

Source:
Returns:

A string representing a DOM fragment.

Type
string

(static) filterFilterHTMLUpdateMessage(tags) → {string}

Theme function for the filter_html update message.

Parameters:
Name Type Description
tags Array

An array of the new tags that are to be allowed.

Source:
Returns:

The corresponding HTML.

Type
string

(static) layoutBuilderPrependContentPreviewPlaceholderLabel(contentPreviewPlaceholderText) → {string}

Creates content preview placeholder label markup.

Parameters:
Name Type Description
contentPreviewPlaceholderText string

The text content of the placeholder label

Source:
Returns:

A HTML string of the placeholder label.

Type
string

(static) localeTranslateChangedMarker() → {string}

Creates markup for a changed translation marker.

Source:
Returns:

Markup for the marker.

Type
string

(static) localeTranslateChangedWarning() → {string}

Creates markup for the translation changed warning.

Source:
Returns:

Markup for the warning.

Type
string

(static) mediaEmbedEditButton() → {string}

Themes the edit button for a media embed.

Source:
Returns:

An HTML string to insert in the CKEditor.

Type
string

(static) mediaEmbedPreviewError() → {string}

Themes the error displayed when the media embed preview fails.

Source:
See:
  • media-embed-error.html.twig
Returns:

A string representing a DOM fragment.

Type
string

(static) mediaEmbedPreviewError(error) → {string}

Themes the error displayed when the media embed preview fails.

Parameters:
Name Type Description
error string

The error message to display

Source:
See:
  • media-embed-error.html.twig
Returns:

A string representing a DOM fragment.

Type
string

(static) mediaEmbedPreviewError(error) → {string}

Themes the error displayed when the media embed preview fails.

Parameters:
Name Type Description
error string

The error message to display

Source:
See:
  • media-embed-error.html.twig
Returns:

A string representing a DOM fragment.

Type
string

(static) mediaEmbedPreviewError(error) → {string}

Themes the error displayed when the media embed preview fails.

Parameters:
Name Type Description
error string

The error message to display

Source:
See:
  • media-embed-error.html.twig
Returns:

A string representing a DOM fragment.

Type
string

(static) mediaEmbedPreviewError(error) → {string}

Themes the error displayed when the media embed preview fails.

Parameters:
Name Type Description
error string

The error message to display

Source:
See:
  • media-embed-error.html.twig
Returns:

A string representing a DOM fragment.

Type
string

(static) mediaLibrarySelectionCount() → {string}

Theme function for the selection count.

Source:
Returns:

The corresponding HTML.

Type
string

(static) message(message, options) → {HTMLElement}

Theme function for a message.

Parameters:
Name Type Description
message object

The message object.

Properties
Name Type Description
text string

The message text.

options object

The message context.

Properties
Name Type Description
type string

The message type.

id string

ID of the message, for reference.

Source:
Returns:

A DOM Node.

Type
HTMLElement

(static) message(message, options) → {HTMLElement}

Overrides message theme function.

Parameters:
Name Type Description
message object

The message object.

Properties
Name Type Description
text string

The message text.

options object

The message context.

Properties
Name Type Description
type string

The message type.

id string

ID of the message, for reference.

Source:
Returns:

A DOM Node.

Type
HTMLElement

(static) message(message, options) → {HTMLElement}

Overrides message theme function.

Parameters:
Name Type Description
message object

The message object.

Properties
Name Type Description
text string

The message text.

options object

The message context.

Properties
Name Type Description
type string

The message type.

id string

ID of the message, for reference.

Source:
Returns:

A DOM Node.

Type
HTMLElement

(static) nodePreviewModal() → {string}

Theme function for node preview modal.

Source:
Returns:

Markup for the node preview modal.

Type
string

(static) passwordConfirmMessage(passwordSettings) → {string}

Constructs a password confirm message element.

Parameters:
Name Type Description
passwordSettings object

An object containing password related settings and translated text to display.

Properties
Name Type Description
confirmTitle string

The translated confirm description that labels the actual confirm text.

Source:
Returns:

Markup for the password confirm message.

Type
string

(static) passwordConfirmMessage(passwordSettings) → {string}

Constructs a password confirm message element.

Parameters:
Name Type Description
passwordSettings object

An object containing password related settings and translated text to display.

Properties
Name Type Description
confirmTitle string

The translated confirm description that labels the actual confirm text.

Source:
Returns:

Markup for the password confirm message.

Type
string

(static) passwordConfirmMessage(passwordSettings) → {string}

Constructs a password confirm message element.

Parameters:
Name Type Description
passwordSettings object

An object containing password related settings and translated text to display.

Properties
Name Type Description
confirmTitle string

The translated confirm description that labels the actual confirm text.

Source:
Returns:

Markup for the password confirm message.

Type
string

(static) passwordConfirmMessage() → {string}

Constructs a password confirm message element

Source:
Returns:

A string representing a DOM fragment.

Type
string

(static) passwordConfirmMessage(passwordSettings) → {string}

Constructs a password confirm message element.

Parameters:
Name Type Description
passwordSettings object

An object containing password related settings and translated text to display.

Properties
Name Type Description
confirmTitle string

The translated confirm description that labels the actual confirm text.

Source:
Returns:

Markup for the password confirm message.

Type
string

(static) passwordStrength(passwordSettings) → {string}

Constructs a password strength message.

Parameters:
Name Type Description
passwordSettings object

An object containing password related settings and translated text to display.

Properties
Name Type Description
strengthTitle string

The title that precedes the strength text.

Source:
Returns:

Markup for password strength message.

Type
string

(static) passwordStrength(passwordSettings) → {string}

Constructs a password strength message.

Parameters:
Name Type Description
passwordSettings object

An object containing password related settings and translated text to display.

Properties
Name Type Description
strengthTitle string

The title that precedes the strength text.

Source:
Returns:

Markup for password strength message.

Type
string

(static) passwordStrength(passwordSettings) → {string}

Constructs a password strength message.

Parameters:
Name Type Description
passwordSettings object

An object containing password related settings and translated text to display.

Properties
Name Type Description
strengthTitle string

The title that precedes the strength text.

Source:
Returns:

Markup for the password strength indicator.

Type
string

(static) passwordStrength(passwordSettings) → {string}

Constructs a password strength message.

Parameters:
Name Type Description
passwordSettings object

An object containing password related settings and translated text to display.

Properties
Name Type Description
strengthTitle string

The title that precedes the strength text.

Source:
Returns:

Markup for password strength message.

Type
string

(static) passwordStrength(passwordSettings) → {string}

Constructs a password strength message.

Parameters:
Name Type Description
passwordSettings object

An object containing password related settings and translated text to display.

Properties
Name Type Description
strengthTitle string

The title that precedes the strength text.

Source:
Returns:

Markup for password strength message.

Type
string

(static) passwordSuggestions(passwordSettings, tips) → {string}

Constructs password suggestions tips.

Parameters:
Name Type Description
passwordSettings object

An object containing password related settings and translated text to display.

Properties
Name Type Description
hasWeaknesses string

The title that precedes tips.

tips Array.<string>

Array containing the tips.

Source:
Returns:

Markup for password suggestions.

Type
string

(static) passwordSuggestions(passwordSettings, tips) → {string}

Constructs password suggestions tips.

Parameters:
Name Type Description
passwordSettings object

An object containing password related settings and translated text to display.

Properties
Name Type Description
hasWeaknesses string

The title that precedes tips.

tips Array.<string>

Array containing the tips.

Source:
Returns:

Markup for password suggestions.

Type
string

(static) passwordSuggestions(passwordSettings, tips) → {string}

Constructs password suggestions tips.

Parameters:
Name Type Description
passwordSettings object

An object containing password related settings and translated tex t to display.

Properties
Name Type Description
hasWeaknesses string

The title that precedes tips.

tips Array.<string>

Array containing the tips.

Source:
Returns:

Markup for the password suggestions.

Type
string

(static) placeholder(str) → {string}

Formats text for emphasized display in a placeholder inside a sentence.

Parameters:
Name Type Description
str string

The text to format (plain-text).

Source:
Returns:

The formatted text (html).

Type
string

(static) progressBar(id) → {string}

Theme function for the progress bar.

Parameters:
Name Type Description
id string

The id for the progress bar.

Source:
Returns:

The HTML for the progress bar.

Type
string

(static) quickeditBackstage(settings) → {string}

Theme function for a "backstage" for the Quick Edit module.

Parameters:
Name Type Description
settings object

Settings object used to construct the markup.

Properties
Name Type Description
id string

The id to apply to the backstage.

Source:
Returns:

The corresponding HTML.

Type
string

(static) quickeditButtons(settings) → {string}

Theme function for buttons of the Quick Edit module.

Can be used for the buttons both in the toolbar toolgroups and in the modal.

Parameters:
Name Type Description
settings object

Settings object used to construct the markup.

Properties
Name Type Description
buttons Array
  • String type: the type of the button (defaults to 'button')
  • Array classes: the classes of the button.
  • String label: the label of the button.
Source:
Returns:

The corresponding HTML.

Type
string

(static) quickeditEntityToolbar(settings) → {string}

Theme function for a toolbar container of the Quick Edit module.

Parameters:
Name Type Description
settings object

Settings object used to construct the markup.

Properties
Name Type Description
id string

the id to apply to the backstage.

Source:
Returns:

The corresponding HTML.

Type
string

(static) quickeditEntityToolbarFence() → {string}

Element defining a containing box for the placement of the entity toolbar.

Source:
Returns:

The corresponding HTML.

Type
string

(static) quickeditEntityToolbarLabel(settings) → {string}

Theme function for a toolbar container of the Quick Edit module.

Parameters:
Name Type Description
settings object

Settings object used to construct the markup.

Properties
Name Type Description
entityLabel string

The title of the active entity.

fieldLabel string

The label of the highlighted or active field.

Source:
Returns:

The corresponding HTML.

Type
string

(static) quickeditFieldToolbar(settings) → {string}

Theme function for a toolbar container of the Quick Edit module.

Parameters:
Name Type Description
settings object

Settings object used to construct the markup.

Properties
Name Type Description
id string

The id to apply to the toolbar container.

Source:
Returns:

The corresponding HTML.

Type
string

(static) quickeditFormContainer(settings) → {string}

Theme function for a form container of the Quick Edit module.

Parameters:
Name Type Description
settings object

Settings object used to construct the markup.

Properties
Name Type Description
id string

The id to apply to the toolbar container.

loadingMsg string

The message to show while loading.

Source:
Returns:

The corresponding HTML.

Type
string

(static) quickeditImageDropzone(settings) → {string}

Theme function for the dropzone element of the Image module's in-place editor.

Parameters:
Name Type Description
settings object

Settings object used to construct the markup.

Properties
Name Type Description
state string

State of the upload.

text string

Text to display inline with the dropzone element.

Source:
Returns:

The corresponding HTML.

Type
string

(static) quickeditImageErrors(settings) → {string}

Theme function for validation errors of the Image in-place editor.

Parameters:
Name Type Description
settings object

Settings object used to construct the markup.

Properties
Name Type Description
errors string

Already escaped HTML representing error messages.

Source:
Returns:

The corresponding HTML.

Type
string

(static) quickeditImageToolbar(settings) → {string}

Theme function for the toolbar of the Image module's in-place editor.

Parameters:
Name Type Description
settings object

Settings object used to construct the markup.

Properties
Name Type Description
alt_field bool

Whether or not the "Alt" field is enabled for this field.

alt_field_required bool

Whether or not the "Alt" field is required for this field.

alt string

The current value for the "Alt" field.

title_field bool

Whether or not the "Title" field is enabled for this field.

title_field_required bool

Whether or not the "Title" field is required for this field.

title string

The current value for the "Title" field.

Source:
Returns:

The corresponding HTML.

Type
string

(static) quickeditToolgroup(settings) → {string}

Theme function for a toolbar toolgroup of the Quick Edit module.

Parameters:
Name Type Description
settings object

Settings object used to construct the markup.

Properties
Name Type Attributes Description
id string <optional>

The id of the toolgroup.

classes string

The class of the toolgroup.

buttons Array

See Drupal.theme.quickeditButtons.

Source:
Returns:

The corresponding HTML.

Type
string

(static) tableDragCellContentWrapper() → {string}

Constructs the wrapper for the initial content of the drag cell.

Source:
Returns:

A string representing a DOM fragment.

Type
string

(static) tableDragCellItemsWrapper() → {string}

Constructs the wrapper for the whole table drag cell.

Source:
Returns:

A string representing a DOM fragment.

Type
string

(static) tableDragChangedMarker() → {string}

Source:
Returns:

Markup for the marker.

Type
string

(static) tableDragChangedMarker() → {string}

Source:
Returns:

Markup for the marker.

Type
string

(static) tableDragChangedWarning() → {string}

Source:
Returns:

Markup for the warning.

Type
string

(static) tableDragChangedWarning() → {Array}

Get rid of irritating tabledrag messages.

Source:
Returns:

An array of messages. Always empty array, to get rid of the messages.

Type
Array

(static) tableDragChangedWarning() → {string}

Source:
Returns:

Markup for the warning.

Type
string

(static) tableDragHandle() → {string}

Source:
Returns:

HTML markup for a tableDrag handle.

Type
string

(static) tableDragHandle() → {string}

Constructs the table drag handle.

Source:
Returns:

A string representing a DOM fragment.

Type
string

(static) tableDragIndentation() → {string}

Source:
Returns:

Markup for the indentation.

Type
string

(static) tableDragIndentation() → {string}

Source:
Returns:

Markup for the indentation.

Type
string

(static) tableDragToggle() → {string}

The button for toggling table row weight visibility.

Source:
Returns:

HTML markup for the weight toggle button and its container.

Type
string

(static) tableDragToggle(action, text) → {string}

Constructs the weight column toggle.

The 'tabledrag-toggle-weight' CSS class should be kept since it is used elsewhere as well (e.g. in tests).

Parameters:
Name Type Description
action string

The action the toggle will perform.

text string

The text content of the toggle.

Source:
Returns:

A string representing a DOM fragment.

Type
string

(static) tableDragToggleWrapper() → {string}

Constructs the wrapper of the weight column toggle.

The 'tabledrag-toggle-weight-wrapper' CSS class should be kept since it is used by Views UI and inside off-canvas dialogs.

Source:
Returns:

A string representing a DOM fragment.

Type
string

(static) toggleButtonContent(show) → {string}

The contents of the toggle weight button.

Parameters:
Name Type Description
show boolean

If the table weights are currently displayed.

Source:
Returns:

HTML markup for the weight toggle button content.s

Type
string

(static) toolbarMenuItemToggle(options) → {string}

A toggle is an interactive element often bound to a click handler.

Parameters:
Name Type Description
options object

Options for the button.

Properties
Name Type Description
class string

Class to set on the button.

action string

Action for the button.

text string

Used as label for the button.

Source:
Returns:

A string representing a DOM fragment.

Type
string

(static) toolbarOrientationToggle() → {string}

A toggle is an interactive element often bound to a click handler.

Source:
Returns:

A string representing a DOM fragment.

Type
string

(static) verticalTab(settings) → {object}

Theme function for a vertical tab.

Parameters:
Name Type Description
settings object

An object with the following keys:

Properties
Name Type Description
title string

The name of the tab.

Source:
Returns:

This function has to return an object with at least these keys:

  • item: The root tab jQuery element
  • link: The anchor tag that acts as the clickable area of the tab (jQuery version)
  • summary: The jQuery element that contains the tab summary
Type
object

(static) verticalTab(settings) → {object}

Theme function for a vertical tab.

Parameters:
Name Type Description
settings object

An object with the following keys:

Properties
Name Type Description
title string

The name of the tab.

Source:
Returns:

This function has to return an object with at least these keys:

  • item: The root tab jQuery element
  • link: The anchor tag that acts as the clickable area of the tab (jQuery version)
  • summary: The jQuery element that contains the tab summary
Type
object

(static) verticalTabActiveTabIndicator() → {string}

Themes the active vertical tab menu item message.

Source:
Returns:

A string representing the DOM fragment.

Type
string

(static) verticalTabListWrapper() → {string}

The wrapper of the vertical tab menu items.

Source:
Returns:

A string representing the DOM fragment.

Type
string

(static) verticalTabsWrapper() → {string}

Wrapper of the menu and the panes.

Source:
Returns:

A string representing the DOM fragment.

Type
string