![]() To avoid confusion, when the user initially clicks on the list of fonts, the input will clear so that all fonts appear, but it will still scroll to the selected font in the overlay, and the selected value will not change. For example, if they type the letter "c", the list of fonts will be filtered to only include fonts which start with that letter. This component allows the user to filter the list of fonts by typing a prefix of the font they want to select. To set a particular value, you can set an id or classname attribute on the component, then specify the properties in a CSS declaration: The border color of the selection overlay. This should be high enough to cover all other elements. ![]() The background color of the particular font entry that is currently selected. The background color of the particular font entry that the user is hovering over. ![]() This is required to cover the contents behind the drop-down overlay. The background color for the overlay element. The text align for the non-overlay input element. The amount of padding the non-overlay input element should have. Note that you can use the component without specifying any of these in that case, it will use all of its default values. The table below outlines all css variables the component accepts, their purpose, and their default values. The preview component at the top of this article uses some overrides to change the hover colors. If these defaults do not fit, the component also accepts overrides via CSS variables. This 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.
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |