Nondeterministic Polynomial Munchies

    @smarthtmlelements/smart-bootstrap

    4.6.0 • Public • Published

    Material Design Bootstrap Web Components | FREETweet

    Installation

    npm install @smarthtmlelemnets/smart-bootstrap

    CSS

    Copy-paste the stylesheet into your before all othernpm stylesheets to load our CSS.

    <link rel="stylesheet" href="src/styles/smart.bootstrap.css">

    or

    import 'src/styles/smart.bootstrap.css';

    Javascript

    <script src="src/smart.element.js"></script>
    <script src="src/smart.bootstrap.js"></script>

    or

    import 'src/smart.element.js'
    import 'src/smart.bootstrap.js'

    Overview

    The package extends Bootstrap by adding Material Design and CSS3 Variables for Styling.

    The Boostrap components are rewritten from scratch and are built as Web Components by using the Smart Framework.

    The Bootstrap SCSS is rewritten with CSS3 Variables and Material Design is added.

    Components

    Material Design Bootstrap

    Demo ↗

    Material Design Bootstrap Button Web Component

    Material Design Buttons

    <bootstrap-button style-mode="primary">Primary</bootstrap-button>
    <bootstrap-button style-mode="secondary">Secondary</bootstrap-button>
    <bootstrap-button style-mode="success">Success</bootstrap-button>
    <bootstrap-button style-mode="danger">Danger</bootstrap-button>
    <bootstrap-button style-mode="warning">Warning</bootstrap-button>
    <bootstrap-button style-mode="info">Info</bootstrap-button>
    <bootstrap-button style-mode="light">Light</bootstrap-button>
    <bootstrap-button style-mode="dark">Dark</bootstrap-button>
    <bootstrap-button style-mode="link">Link</bootstrap-button>

    Material Design Bootstrap CheckBox Web Component

    Material Design Forms

    <bootstrap-check-box checked>Checked</bootstrap-check-box>
    <bootstrap-check-box>Unchecked</bootstrap-check-box>

    Material Design Bootstrap Radio Button Web Component

    <bootstrap-radio-button checked> Active</bootstrap-radio-button>
    <bootstrap-radio-button>Radio</bootstrap-radio-button>
    <bootstrap-radio-button>Radio</bootstrap-radio-button>

    Material Design Bootstrap DropDown Web Component

    Material Design Dropdown

    <bootstrap-drop-down label="Dropdown button">
        <a class="dropdown-item" href="#">Action</a>
        <a class="dropdown-item" href="#">Another action</a>
        <a class="dropdown-item" href="#">Something else here</a>
    </bootstrap-drop-down>

    Material Design Bootstrap Split Button Web Component

    <bootstrap-split-button label="Dropdown button">
        <a class="dropdown-item" href="#">Action</a>
        <a class="dropdown-item" href="#">Another action</a>
        <a class="dropdown-item" href="#">Something else here</a>
    </bootstrap-split-button>

    Material Design Bootstrap Input Group Web Component

    Material Design Bootstrap InputGroup

    <bootstrap-input-group class="mb-3">
        <span class="input-group-text" id="basic-addon1">@</span>
        <input type="text" class="form-control" placeholder="Username" aria-label="Username"
            aria-describedby="basic-addon1">
    </bootstrap-input-group>
    <bootstrap-input-group class="mb-3">
        <input type="text" class="form-control" placeholder="Recipient's username"
            aria-label="Recipient's username" aria-describedby="basic-addon2">
        <span class="input-group-text" id="basic-addon2">@example.com</span>
    </bootstrap-input-group>
    <label for="basic-url">Your vanity URL</label>
    <bootstrap-input-group class="mb-3">
        <span class="input-group-text" id="basic-addon3">https://example.com/users/</span>
    </bootstrap-input-group>
    <bootstrap-input-group class="mb-3">
        <span class="input-group-text">$</span>
        <input type="text" class="form-control" aria-label="Amount (to the nearest dollar)">
        <span class="input-group-text">.00</span>
    </bootstrap-input-group>
    <bootstrap-input-group>
        <span class="input-group-text">With textarea</span>
        <textarea class="form-control" aria-label="With textarea"></textarea>
    </bootstrap-input-group>

    Material Design Bootstrap Modal Web Component

    Material Design Bootstrap Modal

    <bootstrap-modal id="exampleModalLive" class="fade">
        <div class="modal-header">
            <h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                <span aria-hidden="true">&times;</span>
            </button>
        </div>
        <div class="modal-body">
            <p>Modal body text goes here.</p>
        </div>
        <div class="modal-footer">
            <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
            <button type="button" class="btn btn-primary">Save changes</button>
        </div>
    </bootstrap-modal>

    Material Design Bootstrap Tabs Web Component

    Material Design Bootstrap abs

    <bootstrap-tabs style-mode="warning" role="tablist">
        <a class="nav-link active" id="home-tab" data-toggle="tab" href="#home13" role="tab"
            aria-controls="home13" aria-selected="true">Home</a>
        <a class="nav-link" id="profile-tab" data-toggle="tab" href="#profile13" role="tab"
            aria-controls="profile13" aria-selected="false">Profile</a>
        <a class="nav-link" id="contact-tab" data-toggle="tab" href="#contact13" role="tab"
            aria-controls="contact13" aria-selected="false">Contact</a>
    </bootstrap-tabs>
    <div class="tab-content" id="myTabContent">
        <div class="tab-pane fade show active" id="home13" role="tabpanel" aria-labelledby="home-tab">
            Content 1
        </div>
        <div class="tab-pane fade" id="profile13" role="tabpanel" aria-labelledby="profile-tab">
            Content 2
        </div>
        <div class="tab-pane fade" id="contact13" role="tabpanel" aria-labelledby="contact-tab">
            Content 3
        </div>
    </div>

    Material Design Bootstrap Input Web Component

    Material Design Bootstrap input

    <bootstrap-input placeholder="Primary" style-mode="primary"></bootstrap-input>

    Material Design Bootstrap TextArea Web Component

    Material Design Bootstrap Textarea

    <bootstrap-textarea placeholder="Primary" style-mode="primary"></bootstrap-textarea>

    Material Design Bootstrap Range Web Component

    Material Design Bootstrap Range

    <bootstrap-range></bootstrap-range>

    Material Design Progress Web Component

    Material Design Bootstrap Progress

    <bootstrap-progress></bootstrap-progress>
    Material Design Circular Progress Web Component
    <bootstrap-circular></bootstrap-circular>

    Material Design File Input Web Component

    Material Design Bootstrap File Input

    <bootstrap-file-input></bootstrap-file-input>

    Material Design Bootstrap Switch Button Web Component

    Material Design Bootstrap Switch Button

    <bootstrap-switch-button></bootstrap-switch-button>

    The file structure

    • src/

      Javascript files.

    • src/styles/

    License

    Apache License 2.0

    Install

    npm i @smarthtmlelements/smart-bootstrap

    DownloadsWeekly Downloads

    10

    Version

    4.6.0

    License

    Apache-2.0

    Unpacked Size

    830 kB

    Total Files

    81

    Last publish

    Collaborators

    • bmarkov
    • smartcustomelements