lazarus.fresnel/demo/FragmentSpan/MainUnit.pas

unit MainUnit;

{$mode objfpc}{$H+}

interface

uses
  Classes, SysUtils, Fresnel.Forms, Fresnel.DOM, Fresnel.Controls, Fresnel.Events, FCL.Events;

type

  { TMainForm }

  TMainForm = class(TFresnelForm)
    procedure MainFormCreate(Sender: TObject);
  public
    TextDiv: TDiv;
    Span1: TSpan;
    Label1, Label2: TLabel;
  end;

var
  MainForm: TMainForm;

implementation

{$R *.lfm}

{ TMainForm }

procedure TMainForm.MainFormCreate(Sender: TObject);

  function AddDiv(aName: string; aParent: TFresnelElement): TDiv;
  begin
    Result:=TDiv.Create(Self);
    Result.Name:=aName;
    Result.Parent:=aParent;
  end;

  function AddSpan(aName: string; aParent: TFresnelElement): TSpan;
  begin
    Result:=TSpan.Create(Self);
    Result.Name:=aName;
    Result.Parent:=aParent;
  end;

  function AddLabel(aName, aCaption: string; aParent: TFresnelElement): TLabel;
  begin
    Result:=TLabel.Create(Self);
    Result.Name:=aName;
    Result.Caption:=aCaption;
    Result.Parent:=aParent;
  end;

begin
  Stylesheet.Text:=':root { font-size: 15px; }'+LineEnding
    +'#TextDiv { font-size: 30px; }'+LineEnding
    +'#Span1 { border: 1px solid blue; padding: 2px 5px; background: #888; }'
    +'label { border: 1px solid red; }';

  TextDiv:=AddDiv('TextDiv',Self);
  TextDiv.Style:='width: 50px; margin: 5px;';

  Span1:=AddSpan('Span1',TextDiv);

  Label1:=AddLabel('Label1','Fresnel',Span1);
  Label1.Style:='color: #800;';

  Label2:=AddLabel('Label2','demonstration',Span1);
  Label2.Style:='color: #080;';
end;

end.