4/3/2023 0 Comments Font picker css outpuThis can be used to hide the component and show an error message if there is an issue.īy default, this component provides its own styles for sizes, borders, and text hover effects. If there is an error loading the fonts, the error object will be emitted in this property. This can be useful for preview/demo purposes. This will emit on hover regardless of whether or not the user selects it. When the user hovers over a font, this will emit an event of type iGoogleFont. In most cases, font.family is all the consumer needs to work with. When the users selects a different font, this will emit an event of type iGoogleFont which contains information about the selected font. The code below shows a simple example where the component is placed with some input and output properties. Add the selector to your html file: byte-this-google-font-selector-input.Import ByteThisNgxGoogleFontsModule into your module: any module which will use the component must import our library module.Install or if you prefer, clone the Git repo and include everything directly within your project.Google's Google Fonts Developer API page can walk you through this process. Get a Google API Key: if you haven't already done so, you will need to create a Google account and get an API key.To get started now: you can directly install via npm: GitHub Project to view the source code and create forks.Npm Package to directly instlal and use.The project is open source and is available on: This is a pure Angular implementation there are no imports for jQuery, bootstrap, etc. The fonts will always appear in alphabetical order. The user can type the first few characters of a name, and the list will update to the fonts which begin with that prefix. This interface element also contains web-safe fonts. The ngx-google-fonts package contains functionailty for loading, rendering, and allowing the user to select google fonts via drop-down interface. If a hover is no longer happening, this will reset to some default value. It will dynamically update as the hover event changes. This paragraph is rendered with the font currently being hovered over in the input element above. Try it out with a few different selections and observe how it behaves: Loading fonts. It takes care of loading the list of fonts, presenting them on click, and dynamically lazy-loading each font as it comes into view. The component below is a preview of the font selector. In the sections below, I'll outline how to get started with using this component, then outline the behavior and customizability in more detail. Lazy loading all required fonts as they come into view.Īfter developing, I've made this component open source and installable via npm.Emitting events for hover and user selection.Allowing the user to filter the list by prefix.Allowing the user to select from a drop-down-like list, where each font name renders in its own font.Loading the list of Google fonts, and combining with web safe fonts. This component is a purely Angular component which provides functionality for: Therefore, I've decided to create this component myself from scratch. The few choices available were either not working, incomplete in some manner, or required bringing in external dependencies, such as jQuery. Given a HUE (red, pink, etc.) and a SHADE (500, 600, etc.While working on an app for this site, I was looking for a publicly-available font selector input component for Angular and was surprised by how few choices there were. In addition, most hues come with "accent" shades, prefixed with an A. "red 50" is the lightest shade of red ( pink!), while "red 900" is the darkest.
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |