Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

https://github.com/mdbootstrap/MDB-VSCode-snippets

VS Code snippets for MDB
https://github.com/mdbootstrap/MDB-VSCode-snippets

bootstrap4 snippets

Last synced: about 1 month ago
JSON representation

VS Code snippets for MDB

Host: GitHub
URL: https://github.com/mdbootstrap/MDB-VSCode-snippets
Owner: mdbootstrap
Created: 2019-12-16T09:55:15.000Z (over 4 years ago)
Default Branch: master
Last Pushed: 2020-06-22T07:38:45.000Z (about 4 years ago)
Last Synced: 2024-02-12T04:35:49.023Z (5 months ago)
Topics: bootstrap4, snippets
Homepage: https://mdbootstrap.com/docs/standard/getting-started/vsc-snippets/
Size: 3.04 MB
Stars: 11
Watchers: 6
Forks: 6
Open Issues: 1
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md

Lists

awesome-mdbootstrap - Visual Studio Code snippets - An extension that allows you to add useful snippets of the most popular MDB 5 components to Visual Studio Code. (Useful Links)

README

        # mdbsnippets README

Visual Studio Code extension with MDBootstrap snippets.

## What is MDB-VSCode-snippets extension?

MDB-VSCode-snippets is a MDBootstrap users toolkit for boosting working with MDB products.

With MDB-VSCode-snippets you can use shortcuts instead of writing whole code.

``` 

!mdb-breadcrumb

```

```

  


    Home

    Library

    Data

  


```

![Usage](https://github.com/mdbootstrap/MDB-VSCode-snippets/blob/master/image/usage.gif)

### Instalation 

1. Launch Visual Studio Code

2. Go to extensions tab - Ctrl-Shift-X (Windows, Linux) or Cmd-Shift-X (OSX)

3. Search for 'mdbsnippets'

4. Choose the extension

5. Install extension and reload Visual Studio Code

-----------------------------------------------------------------------------------------------------------

## Shortcuts

- [General](#general)

- Components

  - [Alerts](#alerts)

  - [Buttons](#buttons)

  - [Cards](#cards)

  - [Dropdowns](#dropdowns)

  - [Loaders](#loaders)

  - [Panels](#panels)

- Navigation

  - [Breadcrumbs](#breadcrumbs)

  - [Footer](#footer)

  - [Hamburger Menu](#hamburger-menu)

  - [Mega Menu](#mega-menu)

  - [Navs](#navs)

  - [Navbar](#navbar)

  - [Scrollspy](#scrollspy)

  - [Sidenav](#sidenav)

- Forms

  - [Checkbox](#checkbox)

  - [Inputs](#inputs)

  - [Slider](#slider)

  - [Switch](#switch)

- Tables

  - [Basic Tables](#basic-tables)

- Modals

  - [Basic Modals](#basic-modals)

  - [Advanced Modals](#advanced-modals)

- Plugins

  - [iFrame](#iFrame)

  - [Edge Header](#edge-header)

#### General

Name of component | Shortcut

------------ | -------------

MDB HTML Template | !mdb

#### Alerts

Name of component | Shortcut

------------ | -------------

MDB Primary Alert | !mdb-alert-primary

MDB Secondary Alert | !mdb-alert-secondary

MDB Success Alert | !mdb-alert-success

MDB Danger Alert | !mdb-alert-danger

MDB Warning Alert | !mdb-alert-warning

MDB Info Alert | !mdb-alert-info

MDB Light Alert | !mdb-alert-light

MDB Dark Alert | !mdb-alert-dark

#### Buttons

Name of component | Shortcut

------------ | -------------

Primary Btn | !mdb-button-primary

Secondary Btn | !mdb-button-secondary

Succes Btn | !mdb-button-succces

Danger Btn | !mdb-button-danger

Warning Btn | !mdb-button-warning

Info Btn | !mdb-button-info

Light Btn | !mdb-button-light

Dark Btn | !mdb-button-dark

Link Btn | !mdb-button-link

Gradient Peach Btn | !mdb-button-gr-pe

Gradient Blue Btn | !mdb-button-gr-bl

Gradient Aqua Btn | !mdb-button-gr-aq

Outline Primary Btn | !mdb-button-ou-pr

Large Btn | !mdb-button-lg

Small Btn | !mdb-button-sm

Block Btn | !mdb-button-bloc

Checkbox Btn | !mdb-button-check

Radio Btn | !mdb-button-radio

#### Cards

Name of component | Shortcut

------------ | -------------

Basic Card | !mdb-card

#### Dropdowns

Name of component | Shortcut

------------ | -------------

MDB Primary Dropdown | !mdb-dropdown-primary

#### Loaders

Name of component | Shortcut

------------ | -------------

Material Loader | !mdb-loader

Default Loader |  !mdb-loader-df

#### Panels

Name of component | Shortcut

------------ | -------------

Basic Panel | !mdb-panel

#### Breadcrumbs

Name of component | Shortcut

------------ | -------------

Basic Breadcrumb | !mdb-breadcrumb

#### Footer

Name of component | Shortcut

------------ | -------------

Basic Footer | !mdb-footer

#### Hamburger Menu

Name of component | Shortcut

------------ | -------------

Hamburger Menu | !mdb-hamburger-menu

#### Mega Menu

Name of component | Shortcut

------------ | -------------

Mega Menu | !mdb-megamenu

#### Navs

Name of component | Shortcut

------------ | -------------

MDB Nav | !mdb-nav

#### Navbar

Name of component | Shortcut

------------ | -------------

MDB Navbar | !mdb-navbar

#### Scrollspy

Name of component | Shortcut

------------ | -------------

Scrollspy | !mdb-scrollspy

#### Sidenav

Name of component | Shortcut

------------ | -------------

Sidenav | !mdb-side-nav

#### Checkbox

Name of component | Shortcut

------------ | -------------

Material Checkbox | !mdb-checkbox

Default Checkbox | !mdb-checkbox-default

Inline Checkboxes | !mdb-checkbox-inline

#### Inputs

Name of component | Shortcut

------------ | -------------

Material Input | !mdb-input

#### Slider

Name of component | Shortcut

------------ | -------------

Basic Slider | !mdb-slider

#### Switch

Name of component | Shortcut

------------ | -------------

Material Switch | !mdb-switch

#### Basic Modals

Name of component | Shortcut

------------ | -------------

Basic Example | !mdb-modal

#### Advanced Modals

Name of component | Shortcut

------------ | -------------

Modal Cookies | !mdb-modal-cookies

#### Basic Tables

Name of component | Shortcut

------------ | -------------

Basic Example | !mdb-table

Striped Table | !mdb-table-striped

Bordered Table | !mdb-table-bordered

#### IFrame

Name of component | Shortcut

------------ | -------------

YouTube iFrame | !mdb-iFrame-yt

Vimeo iFrame | !mdb-iFrame-vimeo

#### Edge Header

Name of component | Shortcut

------------ | -------------

Edge Header | !mdb-edge-header

-----------------------------------------------------------------------------------------------------------

## Versions

## [1.4.7]

Update template to MDB 4.19.1 version.

## [1.4.6]

Update template to MDB 4.19.0 version.

## [1.4.5]

Update template to MDB 4.18.0 version.

## [1.4.4]

Update template to MDB 4.17.0 version.

### 1.4.3

Update template to MDB 4.16.0 version.

### 1.4.2

Update template to MDB 4.15.0 version.

### 1.4.1

Update template to MDB 4.14.1 version.

### 1.4.0

Update template to MDB 4.14.0 version.

### 1.3.0

New snippets for MDB components and update template to MDB 4.13.0 version.

### 1.2.0

New snippets for MDB components and update template to MDB 4.12.0 version.

### 1.1.0

New snippets for MDB components.

### 1.0.0

Initial release of MDBootstrap-VSCode-snippets.

-----------------------------------------------------------------------------------------------------------

### For more information

- Visit [MDBootstrap Page](https://mdbootstrap.com/).

- Get [MDB FREE](https://mdbootstrap.com/docs/jquery/getting-started/download/).

- Get [MDB PRO](https://mdbootstrap.com/products/jquery-ui-kit/).

**Enjoy!**