Skip to content

Span.md

Latest commit

 

History

History
110 lines (79 loc) · 5.13 KB

Span.md

File metadata and controls

110 lines (79 loc) · 5.13 KB

Span

The <span> HTML element represents a generic inline container for phrasing content, which doesn't inherently represent anything. It can be used to group elements for styling purposes (using the class or id attributes), or because they share attribute values, such as lang. It should be used only when no other semantic element is appropriate.

<span> is very much like a <div> element, but <div> is a block-level element whereas a <span> is an inline element.

Basic Usage

Instantiate the Span class using Span::widget().

$span = Span::widget();

Setting Attributes

Use the provided methods to set specific attributes for the a element.

// setting class attribute
$span->class('container');

Or, use the attributes method to set multiple attributes at once.

$span->attributes(['class' => 'container', 'style' => 'background-color: #eee;']);

Adding Content

If you want to include content within the div tag, use the content method.

$span->content('MyContent');

Rendering

Generate the HTML output using the render method, for simple instantiation.

$html = $span->render();

Or, use the magic __toString method.

$html = (string) $span;

Common Use Cases

Below are examples of common use cases:

// adding multiple attributes
$span->class('external')->content('MyContent');

// using data attributes
$span->dataAttributes(['analytics' => 'trackClick']);

Explore additional methods for setting various attributes such as lang, name, style, title, etc.

Attributes

Refer to the Attribute Tests for comprehensive examples.

The following methods are available for setting attributes:

Method Description
attributes() Set multiple attributes at once.
class() Set the class attribute.
content() Set the content within the div element.
dataAttributes() Set multiple data-attributes at once.
id() Set the id attribute.
lang() Set the lang attribute.
name() Set the name attribute.
style() Set the style attribute.
title() Set the title attribute.

Custom methods

Refer to the Custom Methods Tests for comprehensive examples.

The following methods are available for customizing the HTML output:

Method Description
prefix() Add text before the a element.
prefixContainer() Set enabled or disabled for the prefix-container element.
prefixContainerAttributes() Set attributes for the prefix-container element.
prefixContainerClass() Set the class attribute for the prefix-container element.
prefixContainerTag() Set the tag for the prefix-container element.
render() Generates the HTML output.
suffix() Add text after the a element.
suffixContainer() Set enabled or disabled for the suffix-container element.
suffixContainerAttributes() Set attributes for the suffix-container element.
suffixContainerClass() Set the class attribute for the suffix-container element.
suffixContainerTag() Set the tag for the suffix-container element.
template() Set the template for the HTML output.
widget() Instantiates the Span::class.