TabBarModule

TabBarModule is a module for the prototyping tool Framer. It makes it super easy to set up a tab bar navigation.

Created by Petter Nilsson
petter.pro / @petterheterjag

Features:

• It looks just like the default iOS tab bar (with background blur out of the box).
• But it's very easy to customize.
• It automatically shows the view/screen associated with the selected tab.
• It has support for tinting icons (that means you can transform a transparent PNG with a black icon into any color you want by setting a property).
• You can add badges to tab bar items.

Only works in Framer Studio/Chrome/Safari.

Examples

Basic

App store (with scrollComponents)

Customized

Basic usage

Download tabBarModule.coffee and put it in the /modules folder of your Framer project. Then add this line at the top of your project in Framer Studio.

tabBarModule = require "tabBarModule"

Then to create the tab bar you do this:

tabBar = tabBarModule.tabBar
	Explore: {icon: "images/explore.png", selectedIcon: "images/explore-selected.png", view: exploreView}
	Featured: {icon: "images/featured.png", selectedIcon: "images/featured-selected", view: featuredView}
	Search: {icon: "images/search.png", selectedIcon: "images/search-selected.png", view: searchView}

Functions

tabBarModule.tabBar(items object)

Creates the tab bar.

icon Path to icon (required)
selectedIcon Path to icon to use when selected (optional)
view Layer to show when item is selected (optional)

tabBar = tabBarModule.tabBar
    Explore: {icon: "images/explore.png", selectedIcon: "images/explore-selected.png", view: exploreView}
    Featured: {icon: "images/featured.png", selectedIcon: "images/featured-selected", view: featuredView}
    Search: {icon: "images/search.png", selectedIcon: "images/search-selected.png", view: searchView}

tabBar.setSelected(name string)

Sets selected tab item from the key (name) used when creating it

tabBar.setSelected("Explore")

tabBar.setBadgeValue(name string, value number)

Adds a badge to the tab item if value is a number > 0 and removes the badge if null

tabBar.setBadgeValue("Explore", 2)

tabBar.getItemFromName(name string)

Returns a tab bar item if names matches

tabBar.getItemFromName("Explore")

Events

"tabBarDidSwitch" (name string)

Triggers when the tab bar switches selected tab

tabBar.on "tabBarDidSwitch", (name) ->
	print name

Change styling

To change the default look, change these defaults before you create the tabBar. Like this:

tabBarModule.defaults.tintColor = "#FEC200"

defaults.screenWidth number
defaults.screenHeight number
defaults.barHeight number
defaults.labelOffset number
defaults.iconOffset number
defaults.tintColor string
defaults.tintColorUnselected string
defaults.blur number
defaults.opacity number
defaults.borderShadow string
defaults.backgroundColor string
defaults.showLabels Boolean
defaults.labelTextStyle object
defaults.badgeTextStyle object