Table of Contents

HTML and anchors

Tab labels are not limited to plain text. The Text property of a tab accepts a small HTML subset, so you can make a count stand out, emphasise a word, or embed a clickable anchor directly in the label. Anchors raise OnAnchorTabClick, and the Interaction.AutoOpenURL switch decides whether a URL anchor opens in the browser or is left for your code to handle. Use this when a tab needs richer text than a single colour, or an inline action such as a "settings" link.

Formatting tab text

Set a tab's Text to HTML for bold, italic and coloured fragments. The same markup works whether you set it in the Object Inspector or in code.

procedure TForm1.BuildRichTabs;
begin
  TMSFNCTabSet1.BeginUpdate;
  try
    TMSFNCTabSet1.Tabs.Clear;

    // Bold label with a coloured count.
    TMSFNCTabSet1.AddTab('<b>Inbox</b> <font color="#D64541">(12)</font>');

    // A normal label.
    TMSFNCTabSet1.AddTab('Drafts');

    // An inline clickable anchor inside the label.
    TMSFNCTabSet1.AddTab('Account <a href="settings">settings</a>');
  finally
    TMSFNCTabSet1.EndUpdate;
  end;
end;
Tabs with HTML-formatted labels and an inline anchor Tabs with HTML-formatted labels and an inline anchor

Supported tags include <b>, <i>, <u>, <font color="..."> and <a href="...">. Keep labels short — a tab is not a place for a paragraph.

Anchors and clicks

An <a href="value"> fragment renders as a link inside the label. What happens on click depends on Interaction.AutoOpenURL:

  • AutoOpenURL = True (default) — an href that is a URL is opened in the system browser automatically.
  • AutoOpenURL = False — nothing opens automatically; handle OnAnchorTabClick and act on the AAnchor value yourself. This is the right choice for in-app navigation links like settings or details.
procedure TForm1.FormCreate(Sender: TObject);
begin
  // With AutoOpenURL on (default), an href that is a URL opens in the browser.
  // Turn it off when the app should react to the anchor instead.
  TMSFNCTabSet1.Interaction.AutoOpenURL := False;
  TMSFNCTabSet1.OnAnchorTabClick := TMSFNCTabSet1AnchorTabClick;
end;

procedure TForm1.TMSFNCTabSet1AnchorTabClick(Sender: TObject; ATabIndex: Integer;
  AAnchor: String);
begin
  // AAnchor is the href value of the clicked link; ATabIndex is its tab.
  if AAnchor = 'settings' then
    OpenSettings(ATabIndex);
end;
Note

OnAnchorTabClick fires only for clicks that land on an anchor; a click elsewhere on the tab selects it and raises OnChangeTab as usual.

Combining HTML labels and app-handled anchors

Putting it together — build HTML-formatted tabs with an inline anchor and route the clicks through the application instead of the browser:

procedure TForm1.FormCreate(Sender: TObject);
begin
  TMSFNCTabSet1.Interaction.AutoOpenURL := False;
  TMSFNCTabSet1.OnAnchorTabClick := TMSFNCTabSet1AnchorTabClick;

  TMSFNCTabSet1.BeginUpdate;
  try
    TMSFNCTabSet1.Tabs.Clear;
    TMSFNCTabSet1.AddTab('<b>Inbox</b> <font color="#D64541">(12)</font>');
    TMSFNCTabSet1.AddTab('Drafts');
    TMSFNCTabSet1.AddTab('Account <a href="settings">settings</a>');
  finally
    TMSFNCTabSet1.EndUpdate;
  end;
end;

procedure TForm1.TMSFNCTabSet1AnchorTabClick(Sender: TObject; ATabIndex: Integer;
  AAnchor: String);
begin
  if AAnchor = 'settings' then
    OpenSettings(ATabIndex);
end;

Common mistakes

  • Expecting OnAnchorTabClick while AutoOpenURL is on. A URL href is consumed by the auto-open behaviour; set AutoOpenURL := False to handle it yourself.
  • Over-long HTML labels. Rich markup does not change the tab sizing rules — long labels still trim or wrap per TabSize and the tab's Trimming / WordWrapping.

See also