NobleUI - HTML Bootstrap 5 Admin Dashboard Template

TinyMCE

Read the Official TinyMCE Documentation for a full list of instructions and other options.

SimpleMDE

Read the Official SimpleMDE Documentation for a full list of instructions and other options.

Ace Editor

Read the Official Ace Editor Documentation for a full list of instructions and other options.

HTML Mode

Special title treatment

With supporting text below as a natural lead-in to additional content.

Go somewhere

Special title treatment

With supporting text below as a natural lead-in to additional content.

Go somewhere

Special title treatment

With supporting text below as a natural lead-in to additional content.

Go somewhere

SCSS Mode

.card {
        position: relative;
        display: flex;
        flex-direction: column;
        min-width: 0; // See https://github.com/twbs/bootstrap/pull/22740#issuecomment-305868106
        word-wrap: break-word;
        background-color: $card-bg;
        background-clip: border-box;
        border: $card-border-width solid $card-border-color;
        @include border-radius($card-border-radius);

> hr {
                margin-right: 0;
                margin-left: 0;
        }

> .list-group:first-child {
                .list-group-item:first-child {
                        @include border-top-radius($card-border-radius);
                }
        }

> .list-group:last-child {
                .list-group-item:last-child {
                        @include border-bottom-radius($card-border-radius);
                }
        }
}

.card-body {
        flex: 1 1 auto;
        padding: $card-spacer-x;
        color: $card-color;
}

.card-title {
        margin-bottom: $card-spacer-y;
}

.card-subtitle {
        margin-top: -$card-spacer-y / 2;
        margin-bottom: 0;
}

.card-text:last-child {
        margin-bottom: 0;
}

.card-link {
        @include hover {
                text-decoration: none;
        }

+ .card-link {
                margin-left: $card-spacer-x;
        }
}

Javascript Mode

class Alert {
        constructor(element) {
                this._element = element
        }

// Getters

static get VERSION() {
                return VERSION
        }

// Public

close(element) {
                let rootElement = this._element
                if (element) {
                        rootElement = this._getRootElement(element)
                }

const customEvent = this._triggerCloseEvent(rootElement)

if (customEvent.isDefaultPrevented()) {
                        return
                }

this._removeElement(rootElement)
        }

dispose() {
                $.removeData(this._element, DATA_KEY)
                this._element = null
        }

// Private

_getRootElement(element) {
                const selector = Util.getSelectorFromElement(element)
                let parent     = false

if (selector) {
                        parent = document.querySelector(selector)
                }

if (!parent) {
                        parent = $(element).closest(`.${ClassName.ALERT}`)[0]
                }

return parent
        }

_triggerCloseEvent(element) {
                const closeEvent = $.Event(Event.CLOSE)

$(element).trigger(closeEvent)
                return closeEvent
        }

_removeElement(element) {
                $(element).removeClass(ClassName.SHOW)

if (!$(element).hasClass(ClassName.FADE)) {
                        this._destroyElement(element)
                        return
                }

const transitionDuration = Util.getTransitionDurationFromElement(element)

$(element)
                        .one(Util.TRANSITION_END, (event) => this._destroyElement(element, event))
                        .emulateTransitionEnd(transitionDuration)
        }

_destroyElement(element) {
                $(element)
                        .detach()
                        .trigger(Event.CLOSED)
                        .remove()
        }

// Static

static _jQueryInterface(config) {
                return this.each(function () {
                        const $element = $(this)
                        let data       = $element.data(DATA_KEY)

if (!data) {
                                data = new Alert(this)
                                $element.data(DATA_KEY, data)
                        }

if (config === 'close') {
                                data[config](this)
                        }
                })
        }

static _handleDismiss(alertInstance) {
                return function (event) {
                        if (event) {
                                event.preventDefault()
                        }

alertInstance.close(this)
                }
        }
}