Jump to content

Material Design components


Recommended Posts

  • Moderators

Google last year made a js-library public called Material Design Light.

 

"Material Design Lite lets you add a Material Design look and feel to your websites. It doesn’t rely on any JavaScript frameworks and aims to optimize for cross-device use, gracefully degrade in older browsers, and offer an experience that is immediately accessible."

 

There are some nice components in there (http://www.getmdl.io/components/index.html) and I converted a couple to regular SMS components. At this stage Buttons, CheckBoxes, Spinners and ToolTips.

 

A MDL-spinner tryout is available on http://www.lynkfs.com/components/MDL/spinner/index.html which also features MDL-checkboxes to manipulate spinner options and a MDL-button

 

The component code for the spinner is

unit MDLSpinner;
 
interface
 
uses
  System.Types, SmartCL.System, SmartCL.Components;
 
type
  TW3CustomHTMLElement = class(TW3CustomControl);
 
  TMDLSpinner = class(TW3CustomHTMLElement)
  private
    function  GetMono: Boolean;
    procedure SetMono(Mono: Boolean);
    function  GetActive: Boolean;
    procedure SetActive(Active: Boolean);
  protected
    function makeElementTagObj: THandle; override;
    procedure Resize; override;
    Options : Array [0..3] of String =
      ['mdl-spinner ',
       'mdl-js-spinner ',
       'mdl-spinner--single-color ',
       'is-active'];
    Selections : Array [0..3] of Boolean = [true,true,false,true];
    RunClass  : String;
  public
    Procedure Show;
    property Mono: Boolean read getMono write setMono;
    property Active: Boolean read getActive write SetActive;
  end;
 
implementation
 
//###########################################################################
// TMDLSpinner
//###########################################################################
 
function TMDLSpinner.makeElementTagObj: THandle;
begin
  Result := w3_createHtmlElement('div');
end;
 
procedure TMDLSpinner.SetMono(Mono: boolean);
begin
  Selections[2] := Mono;
end;
 
function  TMDLSpinner.GetMono: Boolean;
begin
  Result := Selections[2];
end;
 
procedure TMDLSpinner.SetActive(Active: boolean);
begin
  Selections[3] := Active;
end;
 
function  TMDLSpinner.GetActive: Boolean;
begin
  Result := Selections[3];
end;
 
procedure TMDLSpinner.Show;
begin
  Self.CSSClasses.Clear;
  Self.CSSClasses.RemoveByName('TW3SpinnerElement');
  RunClass := Options[0] + Options[1];
  If Selections[2] = true then RunClass := RunClass + Options[2];
  If Selections[3] = true then RunClass := RunClass + Options[3];
  If Selections[3] = true then RunClass := RunClass + ' is-upgraded';
  Self.CSSClasses.Add(RunClass);
end;
 
procedure TMDLSpinner.Resize;
begin
  inherited;
  (* Canvas requires attributes to match element bounds *)
  w3_setAttrib(Handle, 'width', w3_getStyle(Handle, 'width'));
  w3_setAttrib(Handle, 'height', w3_getStyle(Handle, 'height'));
  Show;
end;
 
end.
 

If of interest I'll be happy to share the other components code

 

.

Link to post
Share on other sites
  • Moderators

There are 4 MDL components, so far

 

simple demos

www.lynkfs.com/components/MDL/spinner

www.lynkfs.com/components/MDL/button

www.lynkfs.com/components/MDL/checkbox

www.lynkfs.com/components/MDL/tooltip

 

code :

www.lynkfs.com/components/MDL/spinner/SpinnerDev.sproj

www.lynkfs.com/components/MDL/button/ButtonDev.sproj

www.lynkfs.com/components/MDL/checkbox/CheckboxDev.sproj

www.lynkfs.com/components/MDL/tooltip/ToolTipDev.sproj

 

proofs of concept really

see also previous post http://forums.smartmobilestudio.com/index.php?/topic/3960-searchbar-component-for-sms/?hl=framework7

Link to post
Share on other sites

Cool! Nice work! WIll you make a package with these controls?

 

Also, just a tip:

If you inherit from TW3CustomControl instead you can cut the code in half.

 

TW3CustomControl creates a DIV by default, so you dont need to override makeElementTagObj()

 

 

Also, the code in the resize event only applies to TW3GraphicControl, if its  a pure DIV you dont need it.

It actually has no impact since you are basically doing width:=width and height:=height.

 

To make the control display itself correctly when its ready in the DOM, use the class helper for TControlHandle

 

procedure TMyControl.InitializeObject;

begin

  inherited;

  Handle.ReadyExecute( procedure ()

    begin

      show;

    end);

end;

 

Keep up the cool work!!

 

Link to post
Share on other sites
  • 3 weeks later...

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
×
  • Create New...