drug-label
Vue component to provide UI drug labels as <drug-label> tags.
Usage demo on Codepen
docs a bit of a WIP
Parameters
type
Default: null (displayed as others / white label)
Determines the type of drug and therefore the color of the label. Possible values are:
| Parameter | Type | Example | Colour |
|---|---|---|---|
induction-agent |
Induction agents | thiopental | yellow |
hypnotic |
Sedative/hypnotics | midazolam | orange |
hypnotic-antagonist |
Sedative antagonist | flumazenil | orange and white stripes |
neuromuscular-blocker |
Neuromuscular blockers | atracurium | fluorescent red |
depolarizing-neuromuscular-blocker |
Depolarising neuromuscular blockers | suxamethonium | fluorescent red with black top |
neuromuscular-blocker-antagonist |
Neuromuscular blocker reversal agents | neostigmine | fluorescent red and white stripes |
opioid |
Opioids | fentanyl | blue |
opioid-antagonist |
Opioid antagonists | naloxone | blue and white stripes |
vasopressor |
Vasopressors | ephedrine | violet |
adrenaline |
Adrenaline | adrenaline | violet with black top |
hypotensive |
Hypotensive agents | labetalol | violet and white stripes |
local-anaesthetic |
Local anaesthetics | bupivacaine | grey |
anticholinergic |
Anticholinergics | atropine | green |
antiemetic |
Antiemetics | cyclizine | salmon |
others |
others drugs | paracetamol | white |
Example:
<drug-label type="opioid" />name
Default: null (displayed as "Drug")
The name of the drug to be displayed on the top portion of the label. The initial letter is capitalized automatically.
Example:
<drug-label name="ketamine" />concentration
Default: null (displayed as ".............")
The concentration of the drug to be displayed on the lower portion of the label suffixed with the units.
units
Default: null (displayed as "mg/ml")
size
Default: null (displayed normal sized)
Determines the size of the label. Possible values are:
| Parameter | Size | font-size |
|---|---|---|
normal |
Normal | 1.1rem |
small |
Small | 0.8rem |
xsmall |
Extra small | 0.6rem |
bordered
Default: null (displayed as false - no border)
| value | border |
|---|---|
true |
yes |
false |
none |
scaled
Default: null (displayed as false)
| value | width |
|---|---|
true |
16 rem (size="normal") 12 rem (size="small") 10 rem (size="xsmall") |
false |
as parent element |
Example:
<drug-label
name="Midazolam"
type="hypnotic"
scaled
/>
<drug-label
name="Midazolam"
type="hypnotic"
scaled
size="small"
/>
<drug-label
name="Midazolam"
type="hypnotic"
scaled
size="xsmall"
/>