Agile UI
latest
  • Overview of Agile UI
  • Quickstart
  • Core Concepts
  • File structure example & first app
  • Components
    • Core Components
    • Simple components
      • Button
      • Label
      • Text
      • LoremIpsum
      • Header
        • Basic Usage
        • Attributes
        • Icon and Image
      • Icon
      • Image
      • Message
      • Tabs
      • Accordion
      • HelloWorld
    • Interactive components
    • Composite components
  • JavaScript Mapping
  • Advanced Topics
Agile UI
  • Docs »
  • Components »
  • Header
  • Edit on GitHub

Header¶

Can be used for page or section headers.

Based around: https://fomantic-ui.com/elements/header.html.

Demo: https://ui.agiletoolkit.org/demos/header.php

Basic Usage¶

By default header size will depend on where you add it:

Header::addTo($this, ['Hello, Header']);

Attributes¶

property Atk4\Ui\size¶
property Atk4\Ui\subHeader¶

Specify size and sub-header content:

Header::addTo($seg, [
    'H1 header',
    'size' => 1,
    'subHeader' => 'H1 subheader',
]);

// or

Header::addTo($seg, [
    'Small header',
    'size' => 'small',
    'subHeader' => 'small subheader',
]);

Icon and Image¶

property Atk4\Ui\icon¶
property Atk4\Ui\image¶

Header may specify icon or image:

Header::addTo($seg, [
    'Header with icon',
    'icon' => 'settings',
    'subHeader' => 'and with sub-header',
]);

Here you can also specify seed for the image:

$img = $app->cdn['atk'] . '/logo.png';
Header::addTo($seg, [
    'Center-aligned header',
    'aligned' => 'center',
    'image' => [$img, 'class.disabled' => true],
    'subHeader' => 'header with image',
]);
Next Previous

© Copyright 2016-2019, Agile Toolkit Revision cb993ec8.

Built with Sphinx using a theme provided by Read the Docs.
Read the Docs v: latest
Versions
latest
stable
feature-upload-field
feature-upload-field_a
doc-spellcheck
Downloads
pdf
html
epub
On Read the Docs
Project Home
Builds

Free document hosting provided by Read the Docs.