5 | This is a live demo showing how to use @mikk3lro/mc-fontpicker for Vue.js. 6 |
7 |8 | See 9 | github repo 12 | or 13 | npm package 16 | for installation instructions. 17 |
18 | 19 |38 | By default the fontpicker is only a picker. The selected 39 | font is not loaded. 40 |
41 |45 | Current value: {{ font1 }} 46 |
47 |
48 | <McFontpicker v-model="font1" />
49 | Current value: <span :style="'font-family: ' + font1">{{ font1 }}</span>
50 |
52 |
53 |
55 | On mount and when a new font is selected the
56 | fontVariants event is triggered. The main difference from the
57 | input event is that it provides details about available
58 | variants of the current font.
59 |
fontVariants:
67 |{{ fontVariants }}
68 |
69 | <McFontpicker @fontVariants="i => (fontVariants = i)" />
70 | fontVariants: <pre>{{ fontVariants }}</pre>
71 |
73 |
74 |
76 | Customize the message when autocomplete yields no results using the
77 | no-matches-prop.
78 |
<McFontpicker no-matches="I've got nothing" />83 | 84 |
Automatically load fonts by setting the auto-load-prop.
90 | Current value: {{ font2 }} 91 |
92 |
93 | <McFontpicker auto-load v-model="font2" />
94 | Current value: <span :style="'font-family: ' + font2">{{ font2 }}</span>
95 |
97 |
98 | Manually load fonts by setting the load-fonts-prop.
Several fonts may be loaded by comma-separating the names.
101 |114 | <McFontpicker :load-fonts="manuallyLoadFonts1" /> 115 | <button @click="manuallyLoadFonts1 = 'Rubik Beastly'">One font</button> 116 | <button @click="manuallyLoadFonts1 = 'Pacifico, Teko'">Two fonts</button> 117 |119 | 120 |
122 | By default only the four most common variants (regular, bold, italic and
123 | bold italic) are loaded. You can make sure all variants are loaded by
124 | setting the load-all-variants prop.
125 |
130 | Current value: {{ font3 }} 131 |
132 |
133 | <McFontpicker auto-load load-all-variants v-model="font3" />
134 | Current value: <span :style="'font-family: ' + font3">{{ font3 }}</span>
135 |
137 |
138 |
140 | The load-fonts-prop can also accept an array of objects
141 | specifying fonts and variants. Example:
142 |
144 | [
145 | {
146 | font: "Open Sans",
147 | variants: [
148 | { italic: false, weight: 400 },
149 | { italic: true, weight: 400 },
150 | { italic: false, weight: 700 },
151 | { italic: true, weight: 700 },
152 | ]
153 | },
154 | {
155 | font: "Rancho",
156 | variants: [
157 | { italic: false, weight: 400 },
158 | ]
159 | }
160 | ]
162 |
163 | Note that many fonts exist only in a few variants, so make sure the
164 | variants you request actually exist. For instance by filtering the values
165 | emitted from fontVariants events.
166 |
168 | One use case could be loading only one variant - in this example whichever 169 | is first (least bold): 170 |
171 |184 | Current value: 185 | 191 | {{ thinnestFont.font }} 192 | 193 |
194 |
195 | <McFontpicker
196 | :load-fonts="[thinnestFont]"
197 | @fontVariants="
198 | v => (thinnestFont = {
199 | font: v.font,
200 | variants: v.variants.slice(0, 1),
201 | })
202 | "
203 | />
204 | Current value:
205 | <span
206 | :style="{
207 | fontFamily: thinnestFont.font,
208 | fontWeight: thinnestFont.variants[0].weight,
209 | }"
210 | >
211 | {{ thinnestFont.font }}
212 | </span>
213 |
215 |
216 |
218 | Set the loader-only-prop to completely hide the font picker
219 | if you just need to load one or more fonts.
220 |
234 | <McFontpicker :load-fonts="manuallyLoadFonts2" loader-only /> 235 | <button @click="manuallyLoadFonts2 = 'Rancho'">Rancho</button> 236 | <button @click="manuallyLoadFonts2 = 'Smooch, Risque'">Two fonts</button> 237 |239 | 240 |
242 | You can limit the included google fonts using the
243 | google-fonts-prop.
244 |
You can supply font names as an array or as a comma-seperated string.
246 |247 | Do note that the previews are crazy inefficient if you only use a few 248 | fonts - in that case you are probably better off recompiling all previews 249 | - which is beyond the scope of this document at the moment. 250 |
251 |<McFontpicker :google-fonts="['Tinos', 'Open Sans']" />255 | 256 |
258 | You can filter the fonts by category using the
259 | font-categories-prop.
260 |
262 | You can supply category names as an array or as a comma-seperated string. 263 |
264 |280 | <select v-model="fontCategories"> 281 | <option value="all">All</option> 282 | <option value="serif">Serif</option> 283 | <option value="sans-serif">Sans-serif</option> 284 | <option value="display">Display</option> 285 | <option value="handwriting">Handwriting</option> 286 | <option value="monospace">Monospace</option> 287 | <option value="display, serif">display, serif</option> 288 | <option :value="['display', 'handwriting']"> 289 | ['display', 'handwriting'] 290 | </option> 291 | </select> 292 | <McFontpicker :font-categories="fontCategories" /> 293 |294 | 295 |
Manually add fonts using the local-fonts-prop.
298 | You need to provide your own styling of the previews, how to create this 299 | is again beyond the scope of this document for now. Local fonts are also 300 | not auto-loaded, so depending on use case you may need to handle that too. 301 |
302 |321 | Current value: 322 | 327 | {{ manuallyAddFontValue }} 328 | 329 |
330 |
331 | <McFontpicker
332 | v-model="manuallyAddFontValue"
333 | :google-fonts="['Tinos', 'Open Sans']"
334 | :local-fonts="[
335 | {
336 | name: 'BickleyScript',
337 | variants: [{ italic: false, weight: 400 }, '1,400' ],
338 | },
339 | ]"
340 | />
341 | Current value:
342 | <span
343 | :style="{
344 | fontFamily: manuallyAddFontValue,
345 | }"
346 | >
347 | {{ manuallyAddFontValue }}
348 | </span>
350 | {{ fontVariants }}\\n\")]),_c('h3',{attrs:{\"id\":\"nomatches\"}},[_vm._v(\"No matches\")]),_vm._m(4),_c('div',{staticClass:\"example\"},[_c('McFontpicker',{ref:\"fontloader\",attrs:{\"no-matches\":\"I've got nothing\"}})],1),_c('pre',[_vm._v(\"\n This is a live demo showing how to use @mikk3lro/mc-fontpicker for Vue.js.\n
\n\n See\n github repo\n or\n npm package\n for installation instructions.\n
\n\n\n By default the fontpicker is only a picker. The selected\n font is not loaded.\n
\n\n Current value: {{ font1 }}\n
\n\n<McFontpicker v-model=\"font1\" />\nCurrent value: <span :style=\"'font-family: ' + font1\">{{ font1 }}</span>\n\n\n Font variants
\n \n On mount and when a new font is selected the\n fontVariants event is triggered. The main difference from the\n input event is that it provides details about available\n variants of the current font.\n
\n \n (fontVariants = i)\"\n />\n \n fontVariants:
\n {{ fontVariants }}\n \n<McFontpicker @fontVariants=\"i => (fontVariants = i)\" />\nfontVariants: <pre>{{ fontVariants }}</pre>\n\n\n No matches
\n \n Customize the message when autocomplete yields no results using the\n no-matches-prop.\n
\n \n <McFontpicker no-matches=\"I've got nothing\" />
\n\n Autoload fonts
\n Automatically load fonts by setting the auto-load-prop.
\n \n \n Current value: {{ font2 }}\n
\n \n<McFontpicker auto-load v-model=\"font2\" />\nCurrent value: <span :style=\"'font-family: ' + font2\">{{ font2 }}</span>\n\n\n Manually load fonts
\n Manually load fonts by setting the load-fonts-prop.
\n Several fonts may be loaded by comma-separating the names.
\n \n \n<McFontpicker :load-fonts=\"manuallyLoadFonts1\" />\n<button @click=\"manuallyLoadFonts1 = 'Rubik Beastly'\">One font</button>\n<button @click=\"manuallyLoadFonts1 = 'Pacifico, Teko'\">Two fonts</button>\n\n\n Load all variants
\n \n By default only the four most common variants (regular, bold, italic and\n bold italic) are loaded. You can make sure all variants are loaded by\n setting the load-all-variants prop.\n
\n \n \n Current value: {{ font3 }}\n
\n \n<McFontpicker auto-load load-all-variants v-model=\"font3\" />\nCurrent value: <span :style=\"'font-family: ' + font3\">{{ font3 }}</span>\n\n\n Load specific variants
\n \n The load-fonts-prop can also accept an array of objects\n specifying fonts and variants. Example:\n
\n \n[\n {\n font: \"Open Sans\",\n variants: [\n { italic: false, weight: 400 },\n { italic: true, weight: 400 },\n { italic: false, weight: 700 },\n { italic: true, weight: 700 },\n ]\n },\n {\n font: \"Rancho\",\n variants: [\n { italic: false, weight: 400 },\n ]\n }\n]\n \n Note that many fonts exist only in a few variants, so make sure the\n variants you request actually exist. For instance by filtering the values\n emitted from fontVariants events.\n
\n \n One use case could be loading only one variant - in this example whichever\n is first (least bold):\n
\n \n \n (thinnestFont = {\n font: v.font,\n variants: v.variants.slice(0, 1),\n })\n \"\n />\n \n \n Current value:\n \n {{ thinnestFont.font }}\n \n
\n \n<McFontpicker\n :load-fonts=\"[thinnestFont]\"\n @fontVariants=\"\n v => (thinnestFont = {\n font: v.font,\n variants: v.variants.slice(0, 1),\n })\n \"\n/>\nCurrent value:\n<span\n :style=\"{\n fontFamily: thinnestFont.font,\n fontWeight: thinnestFont.variants[0].weight,\n }\"\n>\n {{ thinnestFont.font }}\n</span>\n\n\n Font loader only
\n \n Set the loader-only-prop to completely hide the font picker\n if you just need to load one or more fonts.\n
\n \n \n<McFontpicker :load-fonts=\"manuallyLoadFonts2\" loader-only />\n<button @click=\"manuallyLoadFonts2 = 'Rancho'\">Rancho</button>\n<button @click=\"manuallyLoadFonts2 = 'Smooch, Risque'\">Two fonts</button>\n\n\n Choose google fonts
\n \n You can limit the included google fonts using the\n google-fonts-prop.\n
\n You can supply font names as an array or as a comma-seperated string.
\n \n Do note that the previews are crazy inefficient if you only use a few\n fonts - in that case you are probably better off recompiling all previews\n - which is beyond the scope of this document at the moment.\n
\n \n <McFontpicker :google-fonts=\"['Tinos', 'Open Sans']\" />
\n\n Filter font categories
\n \n You can filter the fonts by category using the\n font-categories-prop.\n
\n \n You can supply category names as an array or as a comma-seperated string.\n
\n \n \n \n<select v-model=\"fontCategories\">\n <option value=\"all\">All</option>\n <option value=\"serif\">Serif</option>\n <option value=\"sans-serif\">Sans-serif</option>\n <option value=\"display\">Display</option>\n <option value=\"handwriting\">Handwriting</option>\n <option value=\"monospace\">Monospace</option>\n <option value=\"display, serif\">display, serif</option>\n <option :value=\"['display', 'handwriting']\">\n ['display', 'handwriting']\n </option>\n</select>\n<McFontpicker :font-categories=\"fontCategories\" />\n
\n\n Manually add fonts
\n Manually add fonts using the local-fonts-prop.
\n \n You need to provide your own styling of the previews, how to create this\n is again beyond the scope of this document for now. Local fonts are also\n not auto-loaded, so depending on use case you may need to handle that too.\n
\n \n \n Current value:\n \n {{ manuallyAddFontValue }}\n \n
\n \n<McFontpicker\n v-model=\"manuallyAddFontValue\"\n :google-fonts=\"['Tinos', 'Open Sans']\"\n :local-fonts=\"[\n {\n name: 'BickleyScript',\n variants: [{ italic: false, weight: 400 }, '1,400' ],\n },\n ]\"\n/>\nCurrent value:\n<span\n :style=\"{\n fontFamily: manuallyAddFontValue,\n }\"\n>\n {{ manuallyAddFontValue }}\n</span>\n