Cross-Platform Tabs Interface Demo

Embarcadero

vor 2 Jahren

Simple Tabs demo coding boot camp | Learn Delphi

Looking to add a tabbed interface to the navigation pages in your cross platform apps? Simple Tabs Demo is the cross-platform solution you need! Single code base and single UI for Android, iOS, macOS, Windows, and Linux makes it easy to get started. Built in Delphi, this app is fast, reliable, and easy to use.

Download the full cross-platform Tabs Interface Demo source code on Github.

This demo is part of over 100 cross-platform demos with everything from camera demos to emoji demos and painting demos.

Inhaltsverzeichnis

What is a tabbed interface in desktop and mobile applications?

A tabbed interface is a graphical user interface element that allows users to open and switch between multiple files or views in a single window. Tabbed interfaces are commonly used in web browsers, text editors, and office applications such as word processors andspreadsheets. In a tabbed interface, each open file or view is represented by a tab, which the user can click on to access the desired content. This allows for easy switching between multiple files or views, and helps to keep the interface organized and uncluttered. Tabbed interfaces are also found in many mobile applications, where they provide a similar function to desktop applications. By allowing users to easily switch between multiple files or views, tabbed interfaces can help improve workflow and productivity.

Screenshot

What does the demo code look like?

unit Unit1;

interface

uses
  System.SysUtils, System.Types, System.UITypes, System.Classes, System.Variants,
  FMX.Types, FMX.Controls, FMX.Forms, FMX.Graphics, FMX.Dialogs, FMX.TabControl,
  FMX.Effects, FMX.Controls.Presentation, FMX.StdCtrls, System.ImageList,
  FMX.ImgList, System.Actions, FMX.ActnList, FMX.Gestures;

type
  TForm1 = class(TForm)
    ToolBar1: TToolBar;
    ShadowEffect4: TShadowEffect;
    MaterialOxfordBlueSB: TStyleBook;
<strong>    TabControl1: TTabControl;
    TabItem1: TTabItem;
    TabItem2: TTabItem;
    TabItem3: TTabItem;</strong>
    Label1: TLabel;
    ImageList1: TImageList;
    Glyph1: TGlyph;
    Glyph2: TGlyph;
    Glyph3: TGlyph;
    GestureManager1: TGestureManager;
    ActionList1: TActionList;
    NextTabAction1: TNextTabAction;
    PreviousTabAction1: TPreviousTabAction;
  private
    { Private declarations }
  public
    { Public declarations }
  end;

var
  Form1: TForm1;

implementation

{$R *.fmx}

end.

unit Unit1;

interface

uses

System.SysUtils, System.Types, System.UITypes, System.Klassen, System.Variants,

FMX.Types, FMX.Controls, FMX.Forms, FMX.Graphics, FMX.Dialogs, FMX.TabControl,

FMX.Effects, FMX.Controls.Presentation, FMX.StdCtrls, System.ImageList,

FMX.ImgList, System.Actions, FMX.ActnList, FMX.Gestures;

type

TForm1 = Klasse(TForm)

ToolBar1: TToolBar;

ShadowEffect4: TShadowEffect;

MaterialOxfordBlueSB: TStyleBook;

<strong> TabControl1: TTabControl;

TabItem1: TTabItem;

TabItem2: TTabItem;

TabItem3: TTabItem;</strong>

Label1: TLabel;

ImageList1: TImageList;

Glyph1: TGlyph;

Glyph2: TGlyph;

Glyph3: TGlyph;

GestureManager1: TGestureManager;

ActionList1: TActionList;

NextTabAction1: TNextTabAction;

PreviousTabAction1: TPreviousTabAction;

private

{ Private declarations }

public

{ Public declarations }

end;

var

Form1: TForm1;

implementation

{$R *.fmx}

end.

Ready to learn how to program cross-platform apps like this?

Sign up for the Coding Boot Camp 2022 to learn to program. Topics include: Games, JavaScript, Web, Python, SQL, Databases, iOS, MacOS, Android, Mobile, Linux, Windows, Desktop, Server, and Arduino.