MaterialKit is now on CocoaPods under the name MK.
Make a call to action with a Floating Action Button.
var button: FabButton = FabButton()
button.setTitle("+", forState: .Normal)
button.titleLabel!.font = UIFont(name: "Arial", size: 32)
view.addSubview(button)
Layout.size(view, child: button, width: 60, height: 60)Use a Raised Button to capture attention.
var button: RaisedButton = RaisedButton()
button.setTitle("Raised", forState: .Normal)
view.addSubview(button)
Layout.size(view, child: button, width: 200, height: 60)Keep it simple and elegant with a Flat Button.
var button: RaisedButton = RaisedButton()
button.setTitle("Flat", forState: .Normal)
view.addSubview(button)
Layout.size(view, child: button, width: 200, height: 60)Easily make cards with fully customizable components.
var card: BasicCard = BasicCard()
// add a title
card.titleLabel = UILabel()
card.titleLabel!.text = "Card Title"
// add a body of text
card.detailTextLabel = UILabel()
card.detailTextLabel!.text = "I am a very simple card. I am good at containing small bits of information. I am convenient because I require little markup to use effectively."
// add a divider for buttons
card.divider = UIView()
// add a couple buttons
var cancelButton: FlatButton = FlatButton()
cancelButton.pulseColor = MaterialTheme.blueGrey.darken3
cancelButton.setTitle("Cancel", forState: .Normal)
cancelButton.setTitleColor(MaterialTheme.yellow.darken3, forState: .Normal)
var okButton: FlatButton = FlatButton()
okButton.pulseColor = MaterialTheme.blueGrey.darken3
okButton.setTitle("Okay", forState: .Normal)
okButton.setTitleColor(MaterialTheme.yellow.darken3, forState: .Normal)
card.buttons = [cancelButton, okButton]
view.addSubview(card)
view.addConstraints(Layout.constraint("H:|-(pad)-[child]-(pad)-|", options: nil, metrics: ["pad": 20], views: ["child": card]))
view.addConstraints(Layout.constraint("V:|-(pad)-[child]", options: nil, metrics: ["pad": 100], views: ["child": card]))Add photos with an Image Card.
var card: ImageCard = ImageCard()
card.imageView = UIImageView(image: UIImage(named: "photo.jpg"))
view.addSubview(card)
Layout.size(view, child: card, width: 300, height: 175)Allow the Image Card to really shine by adding a title, some details, and buttons.
var card: ImageCard = ImageCard()
card.imageView = UIImageView(image: UIImage(named: "photo.jpg"))
// add a title
card.titleLabel = UILabel()
card.titleLabel!.text = "Card Title"
// add a body of text
card.detailTextLabel = UILabel()
card.detailTextLabel!.text = "I am a very simple card. I am good at containing small bits of information. I am convenient because I require little markup to use effectively."
// add a divider for buttons
card.divider = UIView()
// add a couple buttons
var cancelButton: FlatButton = FlatButton()
cancelButton.pulseColor = MaterialTheme.blueGrey.darken3
cancelButton.setTitle("Cancel", forState: .Normal)
cancelButton.setTitleColor(MaterialTheme.yellow.darken3, forState: .Normal)
var okButton: FlatButton = FlatButton()
okButton.pulseColor = MaterialTheme.blueGrey.darken3
okButton.setTitle("Okay", forState: .Normal)
okButton.setTitleColor(MaterialTheme.yellow.darken3, forState: .Normal)
card.buttons = [cancelButton, okButton]
view.addSubview(card)
view.addConstraints(Layout.constraint("H:|-(pad)-[child]-(pad)-|", options: nil, metrics: ["pad": 20], views: ["child": card]))
view.addConstraints(Layout.constraint("V:|-(pad)-[child]", options: nil, metrics: ["pad": 100], views: ["child": card]))Add a sleek Side Navigation to give your users a wonderful experience.
func application(application: UIApplication, didFinishLaunchingWithOptions launchOptions: [NSObject: AnyObject]?) -> Bool {
sideNav = SideNavController(mainViewController: MainViewController(), leftViewController: LeftViewController(), rightViewController: RightViewController())
sideNav!.delegate = self
window = UIWindow(frame: UIScreen.mainScreen().bounds)
window!.rootViewController = sideNav
window!.makeKeyAndVisible()
return true
}Beautify your app with color. All Material Design color palettes are supported.
var button: RaisedButton = RaisedButton()
button.setTitle("Raised", forState: .Normal)
button.setTitleColor(MaterialTheme.blue.darken3, forState: .Normal)
button.backgroundColor = MaterialTheme.yellow.darken3
button.pulseColor = MaterialTheme.blueGrey.color
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent