I personally and a lot of customers think the default icons for links with nested items in the Nav component are strange. Hence I want their look and behavior to change from this:
to this:
(In the screenshots the size is also different, but that's just from the context's I took them. I just want to change the icons).
The latter is btw also used by Microsoft OWA (Outlook Online), which also uses Fluent UI React. The only thing that I could come up with (but which doesn't work really well) was to hide the default chevron using styles and modifying the rendered link onRenderLink to display the other chevrons.
I'm aware of this question, but changing the icons via style is no option and I guess no longer a preferred way by fluent ui.
Is there any better or official way I'm missing?
I've taken a look at the code and unfortunately the icon is baked into the Nav component. Your best option would be to style the icon similar to what is being done in this codepen.
Related
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 have an Android app with a side menu. Since I am using css support, I need to style the side menu using code (what I prefer anyway).
I am facing difficulties finding the correct approach to access the side menu.
This is what I have tried:
Style sideMenuStyle = UIManager.getInstance().getComponentStyle("SideNavigationPanel");
sideMenuStyle.setBorder(Border.createEmpty());
sideMenuStyle.setFgColor(ColorUtil.GREEN);
sideMenuStyle.setBgColor(ColorUtil.BLUE);
sideMenuStyle.setBgTransparency(200);
The side menu is in place, but my code does not have any influence on the color of the background/ foreground.
What am I missing?
Why not use CSS to style the side navigation panel?
That makes far more sense.
getComponentStyle returns a new Style object instance which means your changes have no impact. This is important as each component invokes that method to get its own style. If it returned the same instance changes to the style of one component would impact all components.
You can use setComponentStyle but I'd strongly recommend you don't take that route.
I've started a Microsoft fabric-react, using the Typescript-React-Started provided by Microsoft here.
Although the excellent Fabric-react documentation available here, i wasn't able to find any documentation on how to style the fabric-react components.
For example, the Microsoft documentation for the Commandbar component is available here.
The default theme renders the Commandbar background with a gray color, with blue command buttons.
From what i could understand, Microsoft provides a Themes/Styling system.
Unfortunately, i wasn't able to find any start-to-end example, on how to change the default theme, or create a custom theme.
So, my questions are:
How can i change the default theme, and apply a specific theme on a fabric-react component?
How can i create a custom theme?
Thanks for using Office UI Fabric React! Have you had a chance to read these wiki pages regarding styling and applying a theme to components?
https://github.com/OfficeDev/office-ui-fabric-react/wiki/Component-Styling
https://github.com/OfficeDev/office-ui-fabric-react/wiki/Theming
https://developer.microsoft.com/en-us/fabric#/components/themes
You can also generate your theme via https://developer.microsoft.com/en-us/fabric#/styles/themegenerator then apply it using the method described in the page(s) above.
This is a copy of Microsoft response on Github, so the merit is not mine :)
Current
Use loadTheme to provide component wide colors and fonts.
Use styles prop for components for one-off tweaks.
If you'd like to provide a standard styles override for a specific component type, you can use Customizer to provide scopedSettings to pipe in standard overrides. (Not this is experimental and will likely change.)
Legacy className / global css support still works, which is to use className to provide your own class overrides, and to reference global class names as needed. Though this is an option, this is is not recommended, as it's very fragile and suffers from numerous issues (selector specificity, no build time validation, easy to break, etc.) We're considering removing the global class names completely in a future major release.
In progress
Our goal is to move all customization into the theme; this lets you rev your design over time. We are tracking a bunch of work here: https://github.com/OfficeDev/office-ui-fabric-react/projects/26
The problems we've recognized
Customizer for providing contextual overrides is too generalized, and doesn't allow us to have theme-specific logic like caching themes.
ITheme should be expanded to allow you to pipe in component-specific overrides, in addition to other site-wide settings like sizing, shadowing, and animations.
Passing in styles is not a good contract; you need to know which component parts to target for the styling (sometimes multiple parts) and sometimes which selectors to override (do i use a pseudo element here? is my selector not specific enough?)
No support for color schemes (think the "dark header", where the Toggle should look different than in the "light content area".
Solutions to shortcomings
Expose a dedicated ThemeProvider component. We will still have loadTheme for providing the default theme, while ThemeProvider can switch out scheme, or even theme in a box.
Add support for color schemes.
Introduce style variables, which abstract the common knobs from full styles definitions. This lets you not worry about parts or selectors, and simply focus abstractly on what the component should look like. We have this experimentally in our Button and Toggle refactors in experiments.
I am not pretty sure if in web development this kind of thing is called as a 'bookmark' layout. I'll explain on below screen.
I would like to achieve something like this and missing a knowledge of how to do that. Could someone point me where should I anchore ? I could not find anything in web / probably looking with using bad phrases.
This component would be part of the application, after we push to the router path it's going to display this kind of layout. Basically I could achieve this buy keep pushing a different route for each page, but what if those pages belongs to "one model comoponent" I wouldn't like to reload them all of the time while switching them, just once after we entry to each. It would work like a tab bar in mobile apps (iOS).
In many UI contexts (e.g. browsers, macOS applications, etc.) and in Web Development, what you refer to as "bookmark layout" is simply called tabs (like the iOS tab bar that you also mention).
I wouldn't like to reload them all of the time while switching them
Vue offers you the built-in component <keep-alive> for such use case:
When wrapped around a dynamic component, <keep-alive> caches the inactive component instances without destroying them.
See the Vue guide: https://v2.vuejs.org/v2/guide/components-dynamic-async.html#keep-alive-with-Dynamic-Components
When switching between these components though, you’ll sometimes want to maintain their state or avoid re-rendering for performance reasons. […]
To solve this problem, we can wrap our dynamic component with a <keep-alive> element
We have implemented checkbox in popover. There we are using checked.bind , but in the view model its not reflecting its value on change of the checkboxes.
Sample Gist Run Provided below:
Gist Run
Thanks in Advance
Programmatically injected HTML needs to be compiled manually
The integration with bootstrap I provided to you earlier cannot do this. The bootstrap plugin assigns the innerHTML property of the popover and it does this outside of aurelia's rendering pipeline. The HTML is therefore not compiled by aurelia, which is why bindings (and other aurelia behaviors) will not work.
The templating framework takes care of this for you automatically as long as you are following conventions (such as custom elements). In any other case you'll need to manually work with the ViewCompiler.
In case you're interested, you can see an example with programmatically generated HTML in this gist. Also see this question if you want to know more about it. I do not recommend it in this scenario however.
Use aurelia-dialog
A tooltip (or popover) is just that: a tip on how to use the tool. It should not need more than some plain markup, text and styling (of course this is subjective to some degree, and some people may disagree)
For collecting user input in-between pages or screens, I'd argue a modal dialog is a better fit because of its property to "pop out" more and to de-emphasize the rest of the screen until the user either proceeds or cancels.
More importantly, by using aurelia-dialog your bindings and behaviors will simply work because, well, it's an aurelia plugin :-)