Badge

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
• Usage
  • Markup
    • Including to Project
    • Pug mixin Badge--YDF
      • Minimal Example (Required Properties Only)
  • Logic

Synopsis

Pug mixin

Badge--YDF

Stylus mixin for styles generating

provideBadgeYDF_Component

Pre-made themes

Badge__YDF.Themes.regular

Regular (Default)

Pre-made geometric variations

Badge__YDF.GeometricVariations.regular

Regular (Default)

Badge__YDF.GeometricVariations.small

Small

Geometric modifiers

Badge__YDF.GeometricModifiers.pillShape

Maximal Roundings of the Corners

Badge__YDF.GeometricModifiers.singleLine

Always Single Line with Text Truncating on Overflow

Pre-made decorative variations

Badge__YDF.DecorativeVariations.veryCatchyBright

Very Catchy Bright (red as default)

Badge__YDF.DecorativeVariations.catchyBright

Catchy Bright (orange as default)

Badge__YDF.DecorativeVariations.modestlyCatchyBright

Modestly Catchy Bright (yellow as default)

Badge__YDF.DecorativeVariations.neutralBright

Neutral Bright (light blue as default)

Badge__YDF.DecorativeVariations.modestlyCalmingBright

Modestly Calming Bright (blue as default)

Badge__YDF.DecorativeVariations.calmingBright

Calming Bright (green as default)

Badge__YDF.DecorativeVariations.achromaticBright

Achromatic Bright (dark gray as default)

Badge__YDF.DecorativeVariations.veryCatchyPastel

Very Catchy Pastel (red as default)

Badge__YDF.DecorativeVariations.catchyPastel

Catchy Pastel (orange as default

Badge__YDF.DecorativeVariations.modestlyCatchyPastel

Modestly catchy pastel (yellow as default)

Badge__YDF.DecorativeVariations.neutralPastel

Neutral Pastel (light blue as default)

Badge__YDF.DecorativeVariations.modestlyCalmingPastel

Modestly Calming Pastel (blue as default)

Badge__YDF.DecorativeVariations.calmingPastel

Calming Pastel (green as default)

Badge__YDF.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

Badge--YDF-LoadingPlaceholder

Usage

Markup

Including to Project

The markup of this GUI Component is been provided by the Pug mixin with name Badge--YDF. The including method is standard, by other words, the including of the Pug file Components.pug to your Pug file, herewith it is also required to include preliminary the Functionality.pug file (the last one already included to pages templates so if it include them one more time, the error will occur).

include ../../node_modules/@yamato-daiwa/frontend/Functionality.pug
include ../../node_modules/@yamato-daiwa/frontend/Components.pug