I'm trying to build a form wizard, and would like to over ride the default icons / steps in the stepper, I don't seem to be able to find an option but I might be missing something. Is there anyway to customize the Icons for each step?
button that I'm trying to change
Without some "tricks", you can change 3 icons
Complete, Edit and Error. Check them here
If you need something more you'll probably need more work.
Related
I'm trying to access the refresh button in react-admin project. I tried using getElementsbyClassName it returns HTMLComponents Object but it isn't accessible i.e I can see the component on printing it to console but isn't accessible by code. Is there a way for me to disable this refresh button wherever I want?
I'm not sure the exact use case here, but you can create your own custom AppBar that renders essentially whatever you want: https://marmelab.com/react-admin/Theming.html#replacing-the-appbar.
also see this GitHub issue that mentions removing it entirely: https://github.com/marmelab/react-admin/issues/3383
Within your custom AppBar you could have some logic checks within your custom AppBar if you know ahead of time when you'll want it disabled (like on a certain page/component).
If you need it to be more dyanimcally disabled, you could probably have a very high-level context/state to control that as well..
**NOTE: I have built a custom AppBar before, but I haven't done any selective rendering or disabling within it. So, I can't guarantee that this is exactly correct, but it fits with other custom components I've built.
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
I'm trying to build a React Native app and would like to implement a component just like in Quora where upon clicking the question, the component expands and shows the remaining details (text/images of the question).
I tried using react-native-panel from https://github.com/dwicao/react-native-panel#readme, but it can only handle text in the panel before expanding. I'd like to implement a panel that has an image in it even before I press on the panel to expand. Would love it if anyone could refer me to any npm packages that use components to achieve this. Thank you!
Use this tutorial https://blog.theodo.com/2020/06/build-accordion-list-react-native/. Stick the desired image somewhere there in the code.
I am trying to research about vue2 and wondering if there is any way that can make it easy to track if elements are visible on viewport or not so that we can do something like slide-in boxes when we scroll down the page. Any npm package or whatsoever that can be suggested? Thanks.
Currently using Vue-observe-visibility (https://github.com/Akryum/vue-observe-visibility) and have not stumbled on any issues yet.
The only thing to consider is that this only triggers when the element enters/exits the page by user scroll, not when it enters/exists because of DOM changes. Looks like it shouldn't be an issue for your use case, based on what you told about it.
Certainly check it out, it's easy to use!
vue-waypoint could be an option.
GitHub
NPM
I have this requirement where I have to change the default styles on my Ext JS application. I am not talking about changing stuff in CSS files yet. I am not that ambitious yet. Here is what I am looking for:
Suppose I need a Submit and Cancel buttons, I use xtype:button and text:Save ( or Cancel ). This will render buttons with the text on them. What should I do if I want to change the look and feel of the button? Or replace the button with a cool Save or Cancel image?
Right now I have all the texts on the application with the default font that ExtJS shows. What am I supposed to do if I want all the text on the application changed to a different font? Everything right from the data in forms/grids and the titles of each component should be changed to some other font my customer prefers. What am I supposed to do?
I understand these are very basic and a generic questions, but I am looking for a good headsup before I proceed with my task.
Thank you all in advance. Waiting for answers :)
Update: So, I found out how we deal with CSS and change the fonts. Can anyone help about the Chaning the look and feel for Submit/Cancel buttons.
I recommend you to use SASS and compass to build your own themes, or better said to change one the existing themes. In the Ext JS documentation you can find the css variables which you can set according to your needs.
If you are not ready for theming with SASS just yet take a look at this example of button configs from the sencha docs:
Stanadalone Example page: http://docs.sencha.com/extjs/4.1.3/extjs-build/examples/button/button.html
CSS that adds customized images to the buttons: http://docs.sencha.com/extjs/4.1.3/extjs-build/examples/button/button.css
JS that shows button configs: http://docs.sencha.com/extjs/4.1.3/extjs-build/examples/button/button.js
Essentially this shows how to use iconCls property on the button config along with a simple CSS class to add desired image to your button.