Mini lets you add interactivity to your web sites and web apps without leaving your HTML.s
To add Mini to your project, simply save this file and load it in the head of your page.
<script src="/mini-1.0.15.js" ></script>
Alternatively you can load Mini directly from our CDN>
<script src="/mini-1.0.15.js" ></script>
:
to let them evaluate javascriptFor example, for form inputs, use :value
to set an input's value
.
<input type="text" :value="`The date is `+new Date()" />
This will display this ⤵
class
, use the :class
attributestyle
, use the :style
attributeVariables default to the global namespace, so you can define your data anywhere in your page and use it later.
<script>
name="Michael Scott"
</script>
<input type="text" :value="name" />
This will display this ⤵
Mini extends the browser's native events with shorthand attributes like :click
, :change
, :press
, :clickout
and a few others. For example, you can use the:click
attribute to respond to elements being clicked
<button :click="alert('hey)" />
Being able to set state using javascript variables, update state in response to interactions, and mutate the dom depending on the state, unlocks a lot of common UI patterns.
Click a button to toggle hidden content
<button :click="showDiv=!showDiv" :text="showDiv ? 'Click To Hide' : 'Click To Show'"></button>
<div :class="showDiv ? 'block' : 'hidden' " >Put content here</div>
Now that you've learned the basics, here are a few more tricks you can use.
:change
to watch form fieldsYou can use the :change
attribute to get the value of form inputs in real time. (This example also uses the this
keyword, see the next section for details).
<input type="text" :change="firstName=this.value" />
<span :text="`Your first name is: ` + firstName">
this.value
to get the value of an inputYou can access the current element using this
. This is useful when you want to, for example, get the value of an input as it changes.
<input type="text" :change="console.log(this.value)" />
:text
to set the inner text of an element<span :text="`My lucky number is: `+Math.floor(Math.random() * 100) + 1;" />
This will display:
event
to get the current eventYou can also access the current event with the event
keyword.
<button :click="console.log(event)">Click Me</button>
Often we want to group together elements which draw from the same state. In that case, we can use the scope
keyword. To do this, we prefix our variables with scope.
, and add the :scope
attribute to the HTML element that holds the top-level state.
<div id="accordion" :scope>
<section>
<button :click="scope.activeSection = 'about'">
About Us
</button>
<div :class="scope.activeSection =='about' ? 'block' : 'hidden'">
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy
eirmod.
</div>
</section>
<section>
<button :click="scope.activeSection = 'team'">
Team
</button>
<div :class="scope.activeSection =='team' ? 'block' : 'hidden'">
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy
eirmod.
</div>
</section>
</div>
We generally recommend using mini for lightweight interactivity (hence the name). But our magic attributes accept full ES6 javascript, so you can technically do whatever you want in there.
If else statements
<div
:class="if (selectedTab === 'when') {
'bg-white shadow-lg'
} else {
'hover:bg-gray-300'
}"
></div>
Nested Ternaries
<div
:class="(selectedTab === 'When' ? 'bg-white shadow-lg' : 'hover:bg-gray-300')
(whenSelectedTab === 'Dates' ? 'hidden' : '')"
></div>
Native Events
<button :click="console.log('click')">Click Me</button>
<input :change="this.value = this.value.toUpperCase()" />
For keyboard events, you can listen to them using :keyup
, :keydown
, and :keypress
:
<input type="text" :keyup="console.log(event)" />
You can also use key modifiers to listen to specific keys. Modifiers are appended to the event name using a dot:
<input
type="text"
:keyup.up="console.log('keyup.up')"
:keydown.enter="console.log('keydown.enter')"
/>
You can chain multiple key modifiers together:
<input type="text" :keydown.slash.k="console.log('keydown.slash.k')" />
For key values that have multiple words like BracketLeft
, except for arrow keys, kebab case is used:
<input
type="text"
:keydown.bracket-left="console.log('keydown.bracket-left')"
/>
The following are the available key modifiers:
Type | Key Value | Modifier | Usage |
---|---|---|---|
Digits (0-9) | Digit1, Digit2 | 1, 2 | :keyup.1, :keyup.2 |
Letters (A-Z, a-z) | KeyA, KeyB | a, b | :keyup.a, :keyup.b |
Numpad (0-9) | Numpad1, Numpad2 | 1, 2 | :keyup.1, :keyup.2 |
Arrow Keys (up, down, left, right) | ArrowLeft, ArrowRight | left, right | :keyup.left, :keyup.right |
Meta (left, right) | Meta, MetaLeft, MetaRight | meta, meta-left, meta-right | :keyup.meta, :keyup.meta-left, :keyup.meta-right |
Alt (left, right) | Alt, AltLeft, AltRight | alt, alt-left, alt-right | :keyup.alt, :keyup.alt-left, :keyup.alt-right |
Control (left, right) | Control, ControlLeft, ControlRight | ctrl, ctrl-left, ctrl-right | :keyup.ctrl, :keyup.ctrl-left, :keyup.ctrl-right |
Shift (left, right) | Shift, ShiftLeft, ShiftRight | shift, shift-left, shift-right | :keyup.shift, :keyup.shift-left, :keyup.shift-right |
Symbols (., /, =, etc.) | Period, BracketLeft, Slash | period, bracket-left, slash | :keyup.period, :keyup.bracket-left, :keyup.slash |
Ok. We lied when we said mini only does one thing. Writing javascript inside of html attributes can get a bit messy, so we added some helper methods that make working with common things like arrays, that little bit less verbose.
Here are the custom array methods which are available for you to use:
first
- returns the first item in the array.
Usage: array.first
array = ['Cherries', 'Chocolate', 'Blueberry', 'Vanilla']
array.last // returns 'Vanilla'
last
- returns the last item in the array.
Usage: array.last
array = ['Cherries', 'Chocolate', 'Blueberry', 'Vanilla']
array.first // returns 'Cherries'
search
- returns an array of items that match the query.
Usage: array.search('query')
array = ['Cherries', 'Chocolate', 'Blueberry', 'Vanilla']
array.search('c') // returns ['Cherries', 'Chocolate']
toggle
Usage: array.toggle('item')
add
- adds an item to the array if it doesn't exist.
Usage: array.add('item')
array = ['Tag 1', 'Tag 2', 'Tag 3', 'Tag 4']
array.add('Tag 5') // returns ['Tag 1', 'Tag 2', 'Tag 3', 'Tag 4', 'Tag 5']
remove
- removes an item from the array if it exists.
Usage: array.remove('item')
array = ['Tag 1', 'Tag 2', 'Tag 3', 'Tag 4']
array.remove('Tag 2') // returns ['Tag 1', 'Tag 3', 'Tag 4']
array = array.remove('Tag 2') // Remove an element and force a re-render
nextItem
- gets the next item in the array.
Usage: array.nextItem('item')
array = ['Tag 1', 'Tag 2', 'Tag 3', 'Tag 4']
array.nextItem('Tag 2') // returns 'Tag 3'
previousItem
- gets the next item in the array.
Usage: array.previousOf('item')
array = ['Tag 1', 'Tag 2', 'Tag 3', 'Tag 4']
array.previousItem('Tag 2') // returns 'Tag 1'
Mini events are based on the browser's native events. Most of the time you'll be using :click
, :change
, or :press
, but the full list is here:
:click
- This will trigger when the user clicks on the element.:change
- This will trigger when the user changes the value of a form input.:press
- This will trigger when the user:
click
event.keyup.enter
and keyup.space
events.touchstart
event.:clickout
- This will trigger when the user clicks outside of the current element.:keyup.up
- This will trigger when the user presses the up arrow key.:keyup.down
- This will trigger when the user presses the down arrow key.:keyup.left
- This will trigger when the user presses the left arrow key.:keyup.right
- This will trigger when the user presses the right arrow key.:keyup.enter
- This will trigger when the user presses "Enter".:keyup.space
- This will trigger when the user presses "Space".A DOM update or a re-render happens when the state variable is re-assigned:
<input type="text" :change="firstName = this.value" />
<!-- the re-assignment of firstName will trigger DOM updates that uses that variable -->