How to add fonts to a MudTextField with MudBlazor API? - blazor-server-side

I have this MudBlazor component:
<MudTextField #bind-Value="#_presentationSettingsServiceRequest.PostCode" Class="my-2" Variant="Variant.Outlined" AutoFocus="false" Style="color: #333333;"/>
I want to add fonts using a similar API like Typo="Typo.subtitle1" but I can't find anything.
Any ideas?

You can set the typo parameters with the theme.
Please look at this:
https://mudblazor.com/customization/typography#change-default-font

Related

Quasar Framework: How to use a different icon set with QUploader

Quasar's documentation is usually really good, so I was surprised to find no information for how to change the default icons in the QUploader component.
I'm using the mdi-v5 icon set. When I load up the component, instead of a plus icon on top right, it just looks like this:
I've scoured the docs, but there doesn't seem to be any way to customise the icons on this particular component. Surely this can be done??
Use Slots:
In the example below we’re showing the equivalent of the default
header.
Check the Official Documentation, in the Custom Header you can customize the icon.
https://quasar.dev/vue-components/uploader#example--custom-header
Edit:
Looks like you have to change the Icon Set in the configuration file, here a video from Luke where shows the process,
https://quasarcast.com/quasar-getting-started/quasar-getting-started-guide-3-skeleton-part-1

Delete animations on vue-select?

I need to remove the completely default animation from vue-select.
How to do it? I tried to replace the styles from the box with my own, but I didn’t get the result..
There is corresponding section in the docs, which states how to change transitions -
https://vue-select.org/api/props.html#transition
So, you can use it like this:
<v-select :options="options" transition="none"></v-select>

Algolia Instantsearch (Vuejs) - Place searchbox outside (in a different component)

I'm building a Single Page Application using, Vue, Vue-router and Vuex. I've tried to implement Algolia Instantsearch vuejs, but I'm having some issues. Since my app is using a lot of nested components, I'm having a hard time figuring out how to structure this one.
This is the basic structure:
- App
- Header (this is where the search input is placed)
- Content
- Search (this is where the refinements and results are shown)
- Footer
I've read the documentation, but I might have missed something. Let's say the user is on the homepage, when starting typing into the searchinput in the Header component. I then use vue-router to go to /search, but this doesn't seem to work?
I don't know how to do this? As from what I can understand, the documentation only show you how to sync with vue-router and now how to handle my scenario.
I believe this is a fairly common use case for instantsearch, but I couldn't find anything searching through Google. Maybe because, I don't know how to describe the issue.
I hope you can help.
Thanks!
If you use the latest version of vue-instantsearch, you may use ais-configureas describe by https://www.algolia.com/doc/api-reference/widgets/configure/vue/.
<ais-instant-search :index-name="indexName" :search-client="searchClient">
<ais-configure :query="query" />
<ais-hits>
<div slot="item" slot-scope="{ item }">
<h2>{{ item }}</h2>
</div>
</ais-hits>
</ais-instant-search>

How to prevent Bootstrap's glyphicon rendering to emoji (Opera, FF)?

I would like to know how to prevent showing emojis from bootstrap's glyphicons?
This
<span class="glyphicon glyphicon-tent"></span>
Renders to this (opera, moz)
I Stumbled across this:
https://apple.stackexchange.com/questions/41228/why-do-emoji-like-appear-when-i-use-safari-but-not-chrome
Unicode here :
http://www.fileformat.info/info/unicode/char/26fa/index.htm
Solution: Update your Bootstrap to the latest version.
Better alternative to avoid such problems is to use font-awesome instead of twitter bootstrap glyphicons and as a bonus you could get more icon set than glyphicons provide. But if you still want to use bootstrap glyphicons it is better to copy the unicode for that glyphicons (since glyphicons use unicode internally) and append the code as given in this answer.
use i tag insted of span like <i class="glyphicon glyphicon-tent"></i> may be it will help

validate with inlineditbox and dgrid

I searched for a widget to validate forms and found only validateTextBox widget, but I need a widget to validate the inlineEditBox and the Dgrid.
Is there any validation tools other than validateTextBox that do the same thing?
Hmm, both InlineEditBox and dgrid should be able to use ValidationTextBox, I think. Did you try something like:
A <span data-dojo-type="dijit/InlineEditBox"
data-dojo-props="editor:'dijit/form/ValidationTextBox',
editorParams:{regExp:'\\w+'}">chicken</span> crossed the road.