I am using ng2-pdfjs-viewer to display the pdf document. I use Angular version 12. I am able to customize its style in the viewer.css file under assets/pdfjs/web/viewer.css.
The design library which i am using in my project is carbon design system. I am trying to make use of the carbon components like search icon/arrow icon. I cannot get it working since i have the css and html files under the assets folder.
i am able to use carbon components in all other components but not in the files under assets folder. Is there a way to achieve this?
Any help/suggestion is appreciated! Thanks
I figured out the answer! I had to have the carbon icons under assets/pdfjs/web/images and made use of those in the app. Problem solved.
Related
I can't find how to load my own icons in Flet.
I'm testing Flet with the intention of making a desktop app (pure desktop, not Internet needed), but I'm not able to use my own icons to begin with. I can only use the ones that come inside ft.icons, but I'd rather use my own by loading them from a folder similar to /assets/icons. Can I do that? How?
Thanks.
Currently, I don't see a way of doing this; however, you could use the Image class instead.
I would suggest you create an assets folder under your main project folder.
Let's assume you have the following folder structure on your project:
/assets
/icons/my-icon.png
main.py
When you are running your app, you should provide that folder to the initializer in the following way:
flet.app(target=YourApp(), assets_dir="assets")
Then you can access your images there directly and create an Image instance in the following way:
test_image = flet.Image(src="icons/my-icon.png", width=32, height=32, tooltip="Image Tooltip")
You can nest these Image controls inside of anything you want, so you have a lot of flexibility.
The only downside of doing it this way is if you are using light/dark themes on your app. Compared to the Icon class, you will have to specify the light/dark theme versions yourself and update them manually when you are switching your theme.
Here is the official documentation
How would i add a custom icon with a given name to my nativescript project using the tns resources generate icons-command
$tns resources generate icons ~/myfolder/myspecialicon.png
Say i want the command to place the icon(s) in the correct folders maintaining the name myspecialicon.xxx instead of just overwriting the default icon.png?
Cheers
Lasse
That only generates the app icon. To generate other icons (and other image assets, really) I recommend the online tool http://images.nativescript.rocks/.
It generates assets for both Android and iOS. All you have to do is grab the result and merge it into your project's App_Resources. I know it is not ideal but it's the best workflow I found so far.
Hope you all doing great.
I am using SCSS and Bootstrap in my Angular Application and as we know once Angular app runs, it converts these SCSS files to CSS version of it.
How can I check CSS file size generated as a whole for application as I need to show some reports for optimization tasks.
Any idea. I tried googling and here on Stack Overflow but couldn't find required solution. I can't even see any CSS file in Network tabs of Browsers.
Any Suggestion?
Assuming you are using Angular CLI for your project, which uses webpack internally...
Once you build a project. A dist directory is generated in the project root. Take a look into it and you'll find all the .js and .css bundles it might have generated.
Note - The size will vary based on what kind of build you do. For a production build, the sizes are going to be minimal, for other kinds of builds, if any, the sizes may differ.
You should go first in the Networks tab then reload the page. Once you reload it, click on CSS filter then you would see all the list of CSS included in your app, with the file size.
I didnt find any css generated in Network like above answer but I did a trick.
I went to webpack folder and there I found one generated CSS. ( Searched through a random CSS Selecto ).
I right clicked and saved it on desktop. If you check the properties of this CSS file, it shows the size in KB.
The great advantage of bootstrap is that you can create cool looking websites without involving a graphic designer in generating CSS. I want to separate the work of graphic design from website development so propose the following workflow:
1. Download latest Bootstrap Source to a VS2015 project used for creating a Bootstrap distributable (say bootstrapfactory)
2. Download Variables.less and Theme.less from a site like http://bootstrap-live-customizer.com/
3. Use bootstrapfactory to create Bootstrap distributable using the downloaded Variables.less and Themes.less
4. Copy distributables from bootstrapfactory to Target Project's wwwroot\lib\bootstrap\dist
In this way I am obtaining bootstrap from the official source and then adapting it for my needs. This seems a better way of working than just downloading bootstrap.css as created by tools like bootstrap-live-customizer.
Unfortunately the bootstrap documentation doesn't give specific details for using VS2015 to create a distributable from the source files. Can anyone make any suggestions here?
I would particularly like a gulpfile.js that can be used in my bootstrapfactory project to build the distributables using Task Runner Explorer. This seems like a very common requirement.
Im learning Ruby on Rails using a book, based on RoR 3, unfortunately, I see that some things are different since the last update of the framework. I really dont understand how to use CSS files, js plugins and include Pictures. I see that there is three different assets folders and I understand that we use them according to what we want to do?
Concretely, I'm trying to add a css stylesheet and loading it by the application.html.erb file, to add it to my product page.
Thanks for your help.
You should go through the rails asset pipeline documentation, which explains how to place all the assets.
For example Js, Css and Images.
Here is the link to it,
Rails Asset Pipilining
Other Reference link