Badge (Vue)
In YDF, the badge in the informational non-interactive component displaying inside the rectangle with rounded corners or wihtout them the word or other characters sequence like date and/or time. It is possible to add the icon but note that it is the supplement for the label, not the substitution for the label.
In UI/UX frameworks the similar component could have another names such as Chip, Pill or Tag. There is no the official definitions for the components, moreover some frameworks defines them by own, and YDF which is not intended to be considered as framework reserves the right to do so.
In YDF, the badge designed as exactly how non-interactive component which just displaying the information. It should be distinguished from visually similar interactive components such the ones could be used as button, or could be deleted by click the dedicated internal button, etc. Also, the YDF badge supports the two labels: key and value that is important when, for example, it is unobvious by the calendar the date of which event exactly is displaying.
Synopsis
- Component class
Badge- Stylus mixin for styles generating
provideBadgeYDF_Component- Pre-made themes
Badge.Themes.regular- Regular (Default)
- Pre-made geometric variations
Badge.GeometricVariations.regular- Regular (Default)
Badge.GeometricVariations.small- Small
- Geometric modifiers
Badge.GeometricModifiers.pillShape- Maximal Roundings of the Corners
Badge.GeometricModifiers.singleLine- Always Single Line with Text Truncating on Overflow
- Pre-made decorative variations
Badge.DecorativeVariations.veryCatchyBright- Very Catchy Bright (red as default)
Badge.DecorativeVariations.catchyBright- Catchy Bright (orange as default)
Badge.DecorativeVariations.modestlyCatchyBright- Modestly Catchy Bright (yellow as default)
Badge.DecorativeVariations.neutralBright- Neutral Bright (light blue as default)
Badge.DecorativeVariations.modestlyCalmingBright- Modestly Calming Bright (blue as default)
Badge.DecorativeVariations.calmingBright- Calming Bright (green as default)
Badge.DecorativeVariations.achromaticBright- Achromatic Bright (dark gray as default)
Badge.DecorativeVariations.veryCatchyPastel- Very Catchy Pastel (red as default)
Badge.DecorativeVariations.catchyPastel- Catchy Pastel (orange as default
Badge.DecorativeVariations.modestlyCatchyPastel- Modestly catchy pastel (yellow as default)
Badge.DecorativeVariations.neutralPastel- Neutral Pastel (light blue as default)
Badge.DecorativeVariations.modestlyCalmingPastel- Modestly Calming Pastel (blue as default)
Badge.DecorativeVariations.calmingPastel- Calming Pastel (green as default)
Badge.DecorativeVariations.achromaticPastel- Achromatic Pastel (light gray as default)
- Decorative Modifiers
Badge__YDF.DecorativeModifiers.bordersDisguising- No Borders Effect without Changing of Dimensions
Badge__YDF.DecorativeModifiers.noBackground- No Fill
- Loading placeholder
- Available