nodes-vapor / bootstrap

A Leaf wrapper for Bootstrap 🍃

Bootstrap 🍃

This package wraps Bootstrap elements into convenient Leaf-Tags.

Installation

Add Bootstrap to the package dependencies (in your Package.swift file):

dependencies: [
    ...,
    .package(url: "https://github.com/nodes-vapor/bootstrap.git", from: "4.0.0")
]

as well as to your target (e.g. "App"):

targets: [
    ...
    .target(
        name: "App",
        dependencies: [... "Bootstrap" ...]
    ),
    ...
]

Getting started 🚀

First import Bootstrap and Leaf inside your configure.swift

import Bootstrap
import Leaf

Adding the Leaf tags

In order to render the Bootstrap elements, you will need to add the Bootstrap Leaf tags:

public func configure(_ config: inout Config, _ env: inout Environment, _ services: inout Services) throws {
    services.register { _ -> LeafTagConfig in
        var tags = LeafTagConfig.default()
        tags.useBootstrapLeafTags()
        return tags
    }
}

Supported tags

• Alert
• Badge
• Button
• Button Group
• Button Toolbar
• Input
• Breadcrumb
• Textarea

Alert

#bs:alert() { alert text }

Badge

#bs:badge(type?, classExtras?, attributes?) { badge text }

Button

#bs:button(type?, classExtras?, attributes?) { btn text }

Button Group

#bs:buttonGroup(isVertical, classExtras?, Aria?) { }

#bs:buttonGroup(false, "btn-group-sm") {
    #bs:button() { First Option }
    #bs:button("danger") { Second Option}
    #bs:button() { Third Option}
}

Button Toolbar

#bs:buttonToolbar(classExtras?, Aria?) { }

#bs:buttonToolbar() {
    #bs:button() { First Option }
    #bs:button("danger") { Second Option}
    #bs:button() { Third Option}
}

Input

#bs:input(type?, classExtras?, attributes?)

Breadcrumb

#bs:breadcrumb(classExtras?, attributes?) {
  #bs:breadcrumbItem(classExtras?, attributes?) { <a href="/"> Home </a> }
  #bs:breadcrumbItem(classExtras?, attributes?) { Profile }
}

Textarea

#bs:textArea(classExtras?, attributes?, value?)

Card

#bs:card(title?, classExtras?, attributes?) { <card body> }

or

#bs:card:outer(title?, classExtras?, attributes?) {
	#bs:card:header(classExtras?, attributes?) { <card header, if more than a simple string should be rendered> }
	#bs:card:body(classExtras?, attributes?) { <card contents> }
	#bs:card:footer(classExtras?, attributes?) { <card footer> }
}

🏆 Credits

This package is developed and maintained by the Vapor team at Nodes.

📄 License

This package is open-sourced software licensed under the MIT license