TabBar

Introducing the TabBar made with Element:

The pure swift code:

StyleManager.addStyle(css)
let btn1 = SelectTextButton("first",64,24,false,nil,"first")
btn1.setPosition(CGPoint(10,20))
self.addSubview(btn1)

let btn2 = SelectTextButton("second",64,24,true,nil,"second")
btn2.setPosition(CGPoint(74,20))
self.addSubview(btn2)

let btn3 = SelectTextButton("third",64,24,false,nil,"third")
btn3.setPosition(CGPoint(138,20))
self.addSubview(btn3)

addSubview(SelectGroup([btn1,btn2,btn3],btn2));/*We add the SelectGroup to the view, even though it isnt visible its needed for picking up Events etc*/

The css:

/*TextButton*/
#tabBarSection SelectTextButton{
	float:left;
	width:64px;
	height:20px;
	fill:<ButtonBase>;
	line:grey7;
	line-offset-type:outside;
	line-alpha:1;
	line-thickness:1px;
	drop-shadow:none;
	margin-bottom:20px;
}
#tabBarSection SelectTextButton Text{
	float:left;
	clear:none;
	width:100%;
	height:20px;
	margin-top:0px;
	autoSize:left;
	font:<DefaultFont>;
	size:12px;
	align:center;
	color:black;
	wordWrap,embedFonts:true;
	selectable,mouseEnabled:false;
}
#tabBarSection SelectTextButton#first{
	corner-radius:4px 0px 4px 0px;
	clear:left;
}
#tabBarSection SelectTextButton#second{
	corner-radius:0px;
	line-offset-type-right,line-offset-type-left:inside;
}
#tabBarSection SelectTextButton#third{
	corner-radius:0px 4px 0px 4px;
}
#tabBarSection SelectTextButton:selected{
	fill:<ButtonBase:selected>;
	drop-shadow:<InsetShadow>;
}
#tabBarSection SelectTextButton:selected Text{
	color:white;
}