Dittofi
  • Tutorials
    • Tutorial Index
    • Quick Start
    • Dittofi Essentials
      • Part 1: Frontend terms and concepts
      • Part 2: Backend terms and concepts
      • Part 3: Connecting frontend and backend
      • Part 4: Dittofi app structure
    • Dittofi App Design
      • 🏗️App architecture 101
      • ◼️Backend app development 101
      • 🟪Frontend app development 101
      • 🔰(optional) Web developer beginner series
  • Learn Frontend
    • 👨‍💻Getting Started
      • Welcome to Dittofi
      • Intro to the Dittofi Design Studio (Frontend)
    • 🟩Pages
    • 🟪Elements
      • Types
        • Button Element
        • Div Block Element
        • Form Block Element
        • Link Block Element
        • List Element
        • Modal Box Element
        • Tabs Element
        • Columns Element
        • Image Element
      • Partials
      • Prefabs
      • Custom
    • 🟧Variables
      • Array
      • Checkbox
      • Collection
      • Collection (Custom Model)
      • Collection (System Custom Model)
      • Custom Model
      • Date
      • Datetime
      • File
      • Json
      • Number
      • Number with decimal
      • Model
      • System Custom Model
      • Text
      • UUID
    • 🟨Events
      • 🟨External
        • HTTP Request
        • Run Endpoint
      • 🟨Flow Control
        • Condition
        • Run Action
        • Loop
        • Sleep
      • 🟨Maths
        • Add
        • Divide
        • Modulus
        • Multiply
        • Subtract
      • 🟨Navigation
        • Open Page
      • 🟨Notifications
        • Alert
        • Confirm
      • 🟨Other
        • Copy To Clipboard
        • Run Custom
      • 🟨Text
        • Concat
        • Contains
        • Ends With
        • I Contains
        • I Ends With
        • I Starts With
        • LTrim
        • RTrim
        • Text To Upper
        • Text To Lower
        • Trim
        • Starts With
      • 🟨Variables
        • Set Field
        • Remove Field
      • Validate
    • 🟦CSS Layouts
      • Holy Grail Layout
      • Side Bar Layout
      • Sticky Footer Layout
      • Sticky Header Layout
      • CSS Frameworks
    • 🔲CSS Frameworks
    • Component Libraries
    • Meta Attributes
  • Learn Backend
    • 🖥️Getting Started
      • Intro to Data
      • Intro to APIs
      • Build your first custom API
      • Actions & Events
    • 🟫Back-End Actions
    • 🟩Custom Models
      • 🟩Attributes
        • Array
        • Checkbox
        • Custom Model
        • Collection (Custom Model)
        • Collection (System Custom Model)
        • Date
        • Datetime
        • File
        • Number
        • Number With Decimal
        • Json
        • Text
    • ◼️Data Models
      • Database Fundamentals
        • Database relationships
      • ◼️Columns
        • Attachment
        • Auto Increment
        • Checkbox
        • Date
        • Datetime
        • Duration
        • Email
        • Long text
        • Link to another record field
        • Number
        • Number with decimal
        • Password
        • Phone number
        • Percent
        • Price
        • Rating
        • Single select
        • Single line text
        • URL
    • 🟥Events
      • 🟦Arrays
        • Append
        • Array Pop
        • At
        • Length
        • Prepend
        • Range
      • 🟦Conversions
        • Base64 Encode
        • Base64 Decode
        • Json Decode
        • Json Encode
        • Path Escape
        • Path Unescape
        • Query Escape
        • Query String Parse
        • Query Unescape
        • To Bool
        • To Float
        • To Int
        • To Str
        • Yaml Encode
        • Yaml Decode
      • 🟦Database Requests
        • Create
        • Create Or Update
        • Delete
        • Has Record
        • Read Event
        • Update
      • 🟦External
        • HTTP Request
        • SFTP Download
        • SFTP Upload
      • 🟦Files
        • CSV Reader Event
        • CSV Writer Event
        • File Read
        • File Save
        • File Size
        • File Type
        • JSON Reader
        • PDF Generator
      • 🟦Flow Control
        • Condition
        • Loop
        • Return
        • Run Action
        • Sleep
      • 🟦Notifications
        • Send Mail
        • Connect Websocket
        • Message Websocket
      • 🟦Maths
        • Add
        • Acos
        • Acosh
        • Asin
        • Asinh
        • Atan
        • Atanh
        • Cbrt
        • Ceil
        • Divide
        • Modulus
        • Multiply
        • Subtract
      • 🟦Security
        • Compare Password
        • JWT Decode
        • JWT Encode
        • Login
        • Logout Web User
        • Password Generator
        • Random Number
      • 🟦Time
        • Add Time
        • Day
        • Format Time
        • Minute
        • Nanosecond
        • Parse Time
        • Second
        • Time In
        • Year
        • Year Day
      • 🟦Text
        • Concat
        • Contains
        • Ends With
        • Execute Template
        • I Contains
        • I Ends With
        • I Starts With
        • Starts With
        • LTrim
        • RTrim
        • Replace
        • Regex Find All String
        • Regex Find String
        • Regex Match String
        • Trim
        • Text To Lower
        • Text To Upper
        • Text To Title
        • Url Getarg
      • 🟦Other
        • Assign
        • Run Custom
        • Redirect Web Page Event
        • Render Web Template Event
    • 🟧Variables
      • Array
      • Checkbox
      • Collection
      • Collection (Custom Model)
      • Collection (System Custom Model)
      • Custom Model
      • Date
      • Datetime
      • File
      • Json
      • Number
      • Number with decimal
      • Model
      • System Custom Model
      • Text
      • UUID
    • 🟪Webservices
  • Templates
    • Two sided marketplace template
      • Introduction
        • Part I: Installing and setting up the marketplace template
        • Part II: Understanding what features are included in the marketplace template
        • Part III: Customizing your marketplace frontend without coding
        • Exploring Dittofi's marketplace API
      • Listings
        • How to create a marketplace listing
    • How to build a CRUD app
  • Third Party APIs
    • OAuth 2.0 APIs
      • Introduction To OAuth 2.0
      • Google OAuth 2.0 - PART I
      • Google OAuth 2.0 - PART II
  • Dittofi Admin
    • Your Account
      • Workspace Admin
      • Manage Billing
      • Connect a custom domain
      • How to use a discount code to Dittofi Pro
  • FAQ
    • API Generator
    • How to write custom SQL?
    • Why does my image not display?
    • How can I set up Google Analytics?
    • Exporting and deploying my frontend code
    • What is a partial and what is a prefab?
    • How to set up a basic mulit tenant app on Dittofi
    • How to write a custom endpoint in Dittofi
    • How to integrate Font Awesome into Dittofi
    • How can I set up Dittofi to run on my own private server?
    • How to add roles such as Super Admin, Admin, Manager & User
    • How to prevent duplicate records being added to the database
    • What to do when relation cannot be created because their is violating data in the referenced table
  • Change Logs
    • Dittofi Change Logs
Powered by GitBook
On this page
  • Adding Tabs
  • Common Tab Layouts
  • Editing Tab Names
  • Adding new tabs
  • Adding content to your tab
  • Styling tabs

Was this helpful?

  1. Learn Frontend
  2. Elements
  3. Types

Tabs Element

An overview of the Tab component

PreviousModal Box ElementNextColumns Element

Last updated 3 years ago

Was this helpful?

The tab component allows you to create highly responsive user experiences. Content can be layered inside of tabs, so that users can quickly flip between different views within your website or web app.

In this tutorial we will cover:

  • Adding tabs

  • Common tab layouts

  • Editing tab names

  • Adding new tabs

  • Adding content to your tabs

  • Styling tabs

Adding Tabs

To add a tab component to the canvas, first find the Tab component in the components panel.

It is possible to add the link block either through (1) by selecting the list component & dragging & dropping it onto the canvas or (2) using the arrow buttons at the top of the components panel.

Common Tab Layouts

The two most common tab layouts are:

  1. Horizontal tab layouts across the top of the screen

  2. Vertical tab layouts down the left hand side of the screen

Check out some examples of these tab layouts in action.

Building a horizontal tab layout

To build a horizontal tab layout, simply pull the tab layout onto the page.

Building a vertical tab layout

To build a vertical tab layout, first select the TabList component, that makes up part of the overall tab component. Next, set the TabList Layout to vertical.

Second, select the Tabs component & set the Tab Layout to Horizontal.

Next, you can select the Tabs component & set its height to 100%. This has the effect of setting the Tab List component to the height of the page.

You can now select the tab list & add colors to that list.

Next, select the individual Tabs & head over to the Properties Panel. From inside here, you can remove the Tabs default background color.

Ditto Tip: If you want to multi select components on the page, hold down Ctrl on Windows & Command on Mac while clicking on different components.

Next, we create a Tab class, set the typography Lato, the font weight to extra bold & the font color to #edebe9.

Editing Tab Names

To edit a tab name, double click on the "span" element that is in the center of the tab, select the text & start to edit it.

Adding new tabs

To add a new tab (A) select the Tabs component > (B) use the settings either on the page or under properties panel to add a new tab > (C) make sure that the tab is styled consistently.

Notice, adding a tab this way adds more than just the tabs component. It also adds the Tab Content, Tab Panel & Div Block components.

An alternative way to add tabs is to use the clone or copy & paste feature. This is NOT RECOMMENDED, because it will only copy & paste or clone the individual tab component.

Adding content to your tab

When you add a new tab to the page, you can see that the Tab is comprised of Tab Content, a Tab Panel & a Div Block. All of these components are stacked on top of each other.

To add content to the tab, you can place it inside either the Tab Panel or any children elements to the Tab Panel. For example, the Div Block.

Ditto tip: you can control the height of your tab content from inside the styles panel. Set height to 100vh, where vh stands for vertical height. This will make your tab content component take up the entire vertical height of the device.

Styling tabs

To style your tabs, you need to first select the Tab component. These come with default styling as below.

You are able to remove the default styles using the properties panel on the right hand side of the screen.

Next, you can add a background color to your tabs. The best way to do this is to select the Tab List component that your Tabs are inside of & to change this color.

Finally, you can pick your typography, color of the text inside the tabs, add classes & other items like hover effects.

🟪
Horizontal tab layout: Data, Analytics, Pulse & Admin
Vertical tab layout: Overview, Keywords, Groups etc.
Horizontal tab layout example: Tour, Features, Pricing
Vertical tab layout example: Home, Search, Your songs etc.