Element - Standard Element

Standard elements are the basic HTML building blocks available in CApp. Each element maps directly to an HTML tag and can be added to any parent element (including CApp itself).

All standard elements share a common set of methods inherited from CElement, plus tag-specific methods where applicable.

Available Elements

Every addXxx() method accepts an optional $id parameter. If omitted, a unique ID is auto-generated.

Common Methods

All standard elements inherit these methods from CElement:

Content

$div = $app->addDiv();
$div->add('Text or HTML content');
$div->add($anotherElement);

CSS Classes

$div->addClass('container mt-3 text-center');
$div->removeClass('mt-3');
$classes = $div->getClasses();

Attributes

$div->setAttr('data-id', '42');
$div->setAttr('style', 'color: red;');
$div->removeAttr('style');
$value = $div->getAttr('data-id');

// Set multiple attributes from array
$div->setAttrFromArray([
    'data-id' => '42',
    'data-name' => 'test',
]);

Custom CSS

$div->customCss('background-color', '#f5f5f5');
$div->customCss('padding', '20px');

Visibility

$div->setVisibility(false);  // hide element
$div->setVisibility(true);   // show element

Container Elements

Div

The most commonly used container element:

$div = $app->addDiv('my-container');
$div->addClass('card p-3');
$div->add('Content inside the div');

Span

Inline container:

$span = $app->addSpan();
$span->addClass('badge badge-primary');
$span->add('New');

Paragraph

$p = $app->addP();
$p->add('This is a paragraph of text.');

Blockquote

$quote = $app->addBlockquote();
$quote->addClass('blockquote');
$quote->add('To be or not to be.');

Link and Button

Anchor (A)

$a = $app->addA();
$a->setHref(c::url('user/profile'));
$a->setTarget('_blank');
$a->addClass('btn btn-primary');
$a->add('View Profile');

Specific methods:

Button

$btn = $app->addButton();
$btn->addClass('btn btn-success');
$btn->setAttr('type', 'submit');
$btn->add('Save');

Headings

$app->addH1()->add('Main Title');
$app->addH2()->add('Section Title');
$app->addH3()->add('Subsection');
$app->addH4()->add('Sub-subsection');
$app->addH5()->add('Minor Heading');
$app->addH6()->add('Smallest Heading');

Lists

Unordered List

$ul = $app->addUl();
$ul->addClass('list-group');
$ul->addLi()->add('First item');
$ul->addLi()->add('Second item');
$ul->addLi()->add('Third item');

Ordered List

$ol = $app->addOl();
$ol->addLi()->add('Step one');
$ol->addLi()->add('Step two');
$ol->addLi()->add('Step three');

Table

Build an HTML table structure manually:

$table = $app->addTable();
$table->addClass('table table-striped');

$tr = $table->addTr();
$tr->addTd()->add('Name');
$tr->addTd()->add('Email');

$tr2 = $table->addTr();
$tr2->addTd()->add('John');
$tr2->addTd()->add('john@example.com');

Note: This is the raw HTML <table> element. For data tables with sorting, pagination, and AJAX support, use the CElement_Component_DataTable component instead. See Element - Table.

Image

$img = $app->addImg();
$img->setSrc(c::media('img/logo.png'));
$img->setAlt('Company Logo');
$img->addClass('img-fluid');

Specific methods:

Iframe

$iframe = $app->addIframe();
$iframe->setSrc('https://example.com');
$iframe->setAttr('width', '100%');
$iframe->setAttr('height', '500');
$iframe->setAttr('frameborder', '0');

Code and Preformatted

// Inline code
$code = $app->addCode();
$code->add('$variable = "hello";');

// Preformatted block
$pre = $app->addPre();
$pre->add('Line 1\nLine 2\nLine 3');

// Combined
$pre = $app->addPre();
$code = $pre->addCode();
$code->add(htmlspecialchars('<?php echo "Hello"; ?>'));

Keyboard Input

$app->addKbd()->add('Ctrl+C');

Canvas

$canvas = $app->addCanvas('my-chart');
$canvas->setAttr('width', '400');
$canvas->setAttr('height', '300');

Self-Closing Elements

These elements don't have content:

// Line break
$app->addBr();

// Horizontal rule
$app->addHr();

Label

$label = $app->addLabel();
$label->setAttr('for', 'email-input');
$label->add('Email Address');

Nesting Elements

All elements can contain child elements, allowing you to build complex layouts:

$card = $app->addDiv()->addClass('card');
$header = $card->addDiv()->addClass('card-header');
$header->addH5()->add('Card Title');

$body = $card->addDiv()->addClass('card-body');
$body->addP()->add('Card content goes here.');

$footer = $card->addDiv()->addClass('card-footer');
$link = $footer->addA();
$link->setHref('#');
$link->addClass('btn btn-sm btn-primary');
$link->add('Read More');

Dynamic Element Creation

You can also create elements dynamically by tag name using addElement():

$element = $app->addElement('div', 'my-id');
$element->addClass('custom');
$element->add('Dynamic element');

This is useful when the element type is determined at runtime.