Dummy
Vue Bootstrap 5 Dummy plugin
Dummy plugin creates placeholder content for accelerated building and testing your frontend templates.
Responsive Dummy plugin built with the latest Bootstrap 5. Plenty of implementation examples such as images, lists, tables, and much more.Note: Read the API tab to find all available options and advanced customization
Create Dummy component for an element by adding directive
v-mdb-dummy
to it. Depending on the base element, different
Dummies will be created. For most of the HTML tags default Dummy is
Text.
To explicitly create specific Dummy add proper directive argument.
Text
Create Dummy Text by adding v-mdb-dummy:text
to element
or simple v-mdb-dummy
to any element that has not have
its own dummy tag. To create text with custom length add key
length
with desired text length to the directive binding.
Change text color with color
key.
- Implicitly generated text:
- Airwoman milstein ca
- Explicitly generated text with 40 characters length:
- Predictated dauk gavin compute beset pse
- Text with custom color:
- Shaksperian nonnobil
Image
Create Dummy Image by using directive on img
element or
adding v-mdb-dummy:img
to element or simple
v-mdb-dummy
to an img
element.
Default
By default Dummy Image is created with size 150x150px and grey background
Size
Change Dummy Image size with
size: "width value, height value" | Number
. Height
value is optional, when omitted square image will be created.
Make Dummy Image inherit full size of its container with
size: '100%,100%'
.
Note: It will only work with container having explicitly set width and height.
Setting size: '100%'
will create square image with
width and height of its container width
Text
Add text to Dummy Image with
text: Boolean | String | Number | Text Dummy Object
attribute.
Colours
Set image background color with color: String
and text
color with text: { color: String }
. Dummy Image only
accepts the color values in hexagonal values.
List
Create Dummy List by adding v-mdb-dummy
to
ul
or ol
elements or
v-mdb-dummy:list
to any other element.
Default
By default Dummy List will create list with 5 Dummy Text elements
- Dido rareripe reamen
- Pothunting invigorat
- Assidaean bivalvular
- Lineamental steatite
- Abbreviator featherl
Size
Change Dummy List length with
v-mdb-dummy:list="{ length: Number }"
and length of
Dummy Text element with
v-mdb-dummy:list="{ text: Boolean | String | Number | Text Dummy
Object }"
.
- Pretincture scoff en
- Frankfurter brunetne
- Homoeopath reappeara
- Crackly peduncle una
- Carracci agana cated
- Exitance valorise di
- Radioelement invigor
- Reidentify preelect
- Intertidal mds multi
- Drawability winnipeg
Table
Create Dummy Table by adding v-mdb-dummy
to
table
element or v-mdb-dummy:table
to any
other element.
Default
By default Dummy Table will create table with 5 rows and 5 columns.
Duopoly parochial un | Duopoly parochial un | Duopoly parochial un | Duopoly parochial un | Duopoly parochial un |
---|---|---|---|---|
Brunetness residency | Brunetness residency | Brunetness residency | Brunetness residency | Brunetness residency |
Brunetness residency | Brunetness residency | Brunetness residency | Brunetness residency | Brunetness residency |
Brunetness residency | Brunetness residency | Brunetness residency | Brunetness residency | Brunetness residency |
Brunetness residency | Brunetness residency | Brunetness residency | Brunetness residency | Brunetness residency |
Brunetness residency | Brunetness residency | Brunetness residency | Brunetness residency | Brunetness residency |
Size
Change Dummy Table rows and columns size with
v-mdb-dummy:table="{size: 'rows length value, columns length
value'}"
. Change length of default Dummy Text with
v-mdb-dummy:table="{ text: Boolean | String | Number | Text Dummy
Object }"
.
Unanswering contrive | Unanswering contrive | Unanswering contrive | Unanswering contrive | Unanswering contrive |
---|---|---|---|---|
Residency southernwo | Residency southernwo | Residency southernwo | Residency southernwo | Residency southernwo |
Residency southernwo | Residency southernwo | Residency southernwo | Residency southernwo | Residency southernwo |
Residency southernwo | Residency southernwo | Residency southernwo | Residency southernwo | Residency southernwo |
Residency southernwo | Residency southernwo | Residency southernwo | Residency southernwo | Residency southernwo |
Residency southernwo | Residency southernwo | Residency southernwo | Residency southernwo | Residency southernwo |
Residency southernwo | Residency southernwo | Residency southernwo | Residency southernwo | Residency southernwo |
Residency southernwo | Residency southernwo | Residency southernwo | Residency southernwo | Residency southernwo |
Residency southernwo | Residency southernwo | Residency southernwo | Residency southernwo | Residency southernwo |
Residency southernwo | Residency southernwo | Residency southernwo | Residency southernwo | Residency southernwo |
Residency southernwo | Residency southernwo | Residency southernwo | Residency southernwo | Residency southernwo |
Copy
Create a Dummy Copy of any existign element with
v-mdb-dummy:copy="existing element selector"
Original element
Card title
Some quick example text to build on the card title and make up the bulk of the card's content.
Dummy Copy element
Card title
Some quick example text to build on the card title and make up the bulk of the card's content.
Repeat
Dummy Repeat will repeat element on which
v-mdb-dummy:repeat="number of repetitions"
was invoked.
-
Jane Smith
Lorem ipsum dolor sit amet consectetur adipisicing elit. Corrupti molestiae inventore, quis omnis est, asperiores repellat dignissimos blanditiis placeat ad eveniet deserunt temporibus explicabo voluptatem tenetur? Consequatur totam maiores eum.
-
Jane Smith
Lorem ipsum dolor sit amet consectetur adipisicing elit. Corrupti molestiae inventore, quis omnis est, asperiores repellat dignissimos blanditiis placeat ad eveniet deserunt temporibus explicabo voluptatem tenetur? Consequatur totam maiores eum.
-
Jane Smith
Lorem ipsum dolor sit amet consectetur adipisicing elit. Corrupti molestiae inventore, quis omnis est, asperiores repellat dignissimos blanditiis placeat ad eveniet deserunt temporibus explicabo voluptatem tenetur? Consequatur totam maiores eum.
-
Jane Smith
Lorem ipsum dolor sit amet consectetur adipisicing elit. Corrupti molestiae inventore, quis omnis est, asperiores repellat dignissimos blanditiis placeat ad eveniet deserunt temporibus explicabo voluptatem tenetur? Consequatur totam maiores eum.
Any content inside Dummy Repeat can be created from Dummy elements.
-
Premeditatingly
Camila azerbaijani assidaean professed dodecastylar bleariest camaraderie currieries gormandising zo
-
Premeditatingly
Camila azerbaijani assidaean professed dodecastylar bleariest camaraderie currieries gormandising zo
-
Premeditatingly
Camila azerbaijani assidaean professed dodecastylar bleariest camaraderie currieries gormandising zo
-
Premeditatingly
Camila azerbaijani assidaean professed dodecastylar bleariest camaraderie currieries gormandising zo
Template
Dummy Template will create single Dummy element or a whole template
from the tag elements passed as string into
v-mdb-dummy:template
.
Default
By default Dummy Template will create a template of
h1,p,table,h2,p,blockquote,img,ul
tags.
Exophthalmos holophyte adolescent gavin folia posttibial milstein nonphilosophy cannibalistically so
Pellucidity sanctity typikon balkanised keswick geek menace untackling overcriticized camaraderie hu
Botulinuses unstunne | Botulinuses unstunne | Botulinuses unstunne | Botulinuses unstunne | Botulinuses unstunne |
---|---|---|---|---|
Predeterminate eulis | Predeterminate eulis | Predeterminate eulis | Predeterminate eulis | Predeterminate eulis |
Predeterminate eulis | Predeterminate eulis | Predeterminate eulis | Predeterminate eulis | Predeterminate eulis |
Predeterminate eulis | Predeterminate eulis | Predeterminate eulis | Predeterminate eulis | Predeterminate eulis |
Predeterminate eulis | Predeterminate eulis | Predeterminate eulis | Predeterminate eulis | Predeterminate eulis |
Predeterminate eulis | Predeterminate eulis | Predeterminate eulis | Predeterminate eulis | Predeterminate eulis |
Ruralised chromic typikon flowerage shaksperian filbert comedical sweat holophyte cotype corticate u
Stephanie plesiosaur cannibalistically atomize reidentify savour nonphilosophy unincludible politica
Pellucidity agana cotype trippingly dodecastylar b
- Dodecastylar speciou
- Horologe synonymized
- Filbert botulinuses
- Mds superextreme rep
- Overcertify reappear
Layouts
Combine Dummy Template with other Dummy elements and MDBootstrap components to create layouts in no time!
Semifrontier leverrier heedfulness ramayana dolphinfishes frankfurter spacious balkanised valorise c
Kenny schumpeter untackling diseasing nitrobenzene prejudgement sanderling carracci predeterminate p
Hyporight contemptuo
Unrevoked spouter beset cudbear benthamite snippin
- Humorless altimetric
- Predaciou decampment
- Inculpatory alloplas
- Actinolitic stambul
- Cated coleridgian un
Reperused diseasing brunetness valorise professed shaksperian stupefy tuberless agribusiness conveyo
Solum unincludible heedfulness habitudinal postfebrile gasholder doom instilment strutting stupefy monopsony gavin nitrobenzene southernwood compute ruralised unexported rhamnaceous stark unaccustomed holism kilopound noyau rubric azerbaijani noncommutative underyoke predeterminate salvia varietally ungossiping humorless tribunitial balkanised enrober savour julienne drawability peduncle reoperate outthrow unaccustomed corticate intertidal rareripe sandarac burletta xograph alloplasmatic doom pr
Solum unincludible heedfulness habitudinal postfebrile gasholder doom instilment strutting stupefy monopsony gavin nitrobenzene southernwood compute ruralised unexported rhamnaceous stark unaccustomed holism kilopound noyau rubric azerbaijani noncommutative underyoke predeterminate salvia varietally ungossiping humorless tribunitial balkanised enrober savour julienne drawability peduncle reoperate outthrow unaccustomed corticate intertidal rareripe sandarac burletta xograph alloplasmatic doom pr
Dummy - API
Import
Add dummy
class to any of HTML tags to initiate Dummy on this element. If no
options are passed, Dummy element based on tag element will be created.
Arguments
Name | Default properties | Description |
---|---|---|
text
|
{ length: 20, color: null } |
Creates Dummy Text of given length and text-color on element. |
img
|
{ size: "150", color: null } |
Creates Dummy Img of given size and background color |
list
|
{ length: 5 } |
Creates Dummy List with given number of list elements |
table
|
{ size: "5,5" } |
Creates Dummy Table with given rows and cols number |
copy
|
|
Creates copy of element based on given selector |
repeat
|
1 |
Creates given number of copies of element to which dummyRepeat was attached. Allows to repeat elements created by other Dummy methods. |
template
|
{
tags: "h1,p,table,h2,p,blockquote,img,ul",
container: true,
}
|
Creates template from given string of HTML tag elements |