Agile UI
latest
  • Overview of Agile UI
  • Quickstart
  • Core Concepts
  • Components
    • Core Components
    • Simple components
      • Button
      • Label
      • Text
      • LoremIpsum
      • Header
        • Basic Usage
        • Attributes
        • Icon and Image
      • Icon
      • Image
      • Message
      • Tabs
      • 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: http://semantic-ui.com/elements/header.html.

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

Basic Usage¶

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

$this->add(['Header', 'Hello, Header']);

Attributes¶

property atk4\ui\size¶
property atk4\ui\subHeader¶

Specify size and sub-header content:

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

// or

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

Icon and Image¶

property atk4\ui\icon¶
property atk4\ui\image¶

Header may specify icon or image:

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

Here you can also specify seed for the image:

$img = 'https://cdn.rawgit.com/atk4/ui/07208a0af84109f0d6e3553e242720d8aeedb784/public/logo.png';
$seg->add([
    'Header',
    'Center-aligned header',
    'aligned'=>'center',
    'image'=>[$img, 'disabled'],
    'subHeader'=>'header with image'
]);
Next Previous

© Copyright 2016-2017, Agile Toolkit. Revision 5d8de30f.

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

Free document hosting provided by Read the Docs.