Inventory Slots¶
Inventory Slots provide the ability to display a game item on a page, as if it was inside an item slot typically seen in the game. Like the actual game slots, this widget can display item’s icon, amount and name on hover. They can also be a link and can be animated to display multiple items in one slot.
Directives¶
- .. mcl-inv-slot::¶
Directive that spawns an inventory slot on the page. Accepts one optional argument, name, that will be displayed in a tooltip on hover. Name can’t include markup.
Hint
You can create an empty slot by not passing any arguments or options.
- :icon:¶
URI of an image displayed inside the slot. Relative to sources root.
- :link:¶
Link to which browser will be pointed to when the inventory slot is clicked. Optional.
- :description:¶
Data to display in tooltip below item’s name. Optional.
- :amount:¶
Amount of item in range of 1-999. Value 1 is not displayed and is assumed default.
- :area:¶
Name of the area where slot should be put. Optional for standalone inventory slots, might be required if you use the Crafting Table widget or others.
Hint
If you have one item to be put in several areas, you don’t have to add it several times, just list multiple areas in this option, separated by a semicolon
;.
- :big:¶
If this option is present, inventory slot will be bigger.
- .. mcl-inv-slot-anim::¶
Directive that spawns an animated slot on the page. Accepts content, which can contain only
mcl-inv-slotdirectives.Animated slots display in a loop all the nested slots within them every few seconds. On hover, animation stops. The animation is synchronized within animation context, if it exists.
Tip
You can separate frequently used animated slots in separate files and then include them using Sphinx’s
includedirective.Note
mcl-inv-slot-animaccepts allmcl-inv-slotoptions, they will be used as default for nestedmcl-inv-slotdirectives.However: options
bigandareawill override the ones set in nested directives.Note
Most game inventory directives (like Crafting Table widget) will have an animation context.
If you want to synchronize animations between several slots, you can create your own animation context by wrapping your slots in a
<div>with attributedata-mcl-anim-root.
Examples¶
Here are some examples that showcase inventory slots in action.
Empty slot¶
The following code:
1:::{mcl-inv-slot}
2:::
Should render as:
Fully configured slot¶
The following code showcases almost all options:
1:::{mcl-inv-slot} Raw Porkchop
2:icon: ../../_static/inv/porkchop_raw.png
3:link: index.html
4:description: Enchanted or something
5:amount: 64
6:::
And should render as:
Big slot¶
The following code:
1:::{mcl-inv-slot} Raw Porkchop
2:icon: ../../_static/inv/porkchop_raw.png
3:link: index.html
4:description: Enchanted or something
5:amount: 64
6:big:
7:::
Should render as:
Animated slot¶
The following code:
1::::{mcl-inv-slot-anim}
2:link: index.html
3:description: Animated!
4
5:::{mcl-inv-slot-anim} Raw Porkchop
6:icon: ../../_static/inv/porkchop_raw.png
7:amount: 2
8:::
9
10:::{mcl-inv-slot-anim} Cooked Porkchop
11:icon: ../../_static/inv/porkchop_cooked.png
12:amount: 3
13:::
14
15:::{mcl-inv-slot-anim} Golden Ingot
16:icon: ../../_static/inv/golden_ingot.png
17:amount: 4
18:::
19
20::::
Should render as:
