UI Components

File badge

The mark of a file's type, nol-file-badge, a 1rem box beside the file's name: letters on a tinted rounded square for code, PDFs, documents, spreadsheets and tables of data, and archives, a glyph on a tinted square for scripts, a glyph alone in the type's color for other kinds, and a plain file for a name the kit doesn't know; a folder, when the app says the path is one, has a folder glyph in the plain file's color. The type is found by the whole name, such as Dockerfile or .gitignore, then by the last extension, ignoring case and any folders. It is hidden from assistive technology, since the name beside it is the text, and copies as nothing, not even a line break, so a line it sits in copies whole.

Examples

Loading…

States

Loading…

API

Selector nol-file-badge

Import from @noldova/ui.components.angular

Inputs

NameTypeDefaultDescription
fileNamestring Required

The file's name or path, whose type the badge marks.

isFolderbooleanfalse

Whether the path is a folder, which shows the folder mark whatever FileBadgeComponent.fileName is; false when not bound. The app says so, since a folder's name, as icon-preview, doesn't tell it apart from a file's.

Accessibility

It takes no keys of its own.

It is decorative and hidden from assistive technology, since the name beside it is the text; its owner always writes that name.

With isFolder on, it draws the folder mark whatever the name is, since only the app can tell that a path is a folder.

Specification

Loading…