@outbook/webcomponents-badge-file-extension

This package provides a web component to display a file extension badge.

Installation

npm install @outbook/webcomponents-badge-file-extension

Usage

As a Lit Element

import {html} from 'lit';
import {BadgeFileExtension} from '@outbook/webcomponents-badge-file-extension';

function render() {
  return html`
  return html`
    ${BadgeFileExtension({
    text: 'pdf'
  })}
  `;
}

Direct HTML Usage

You can also use the custom element directly in your HTML. Remember to import the component's JavaScript for the custom element to be defined.

import '@outbook/webcomponents-badge-file-extension';

<outbook-badge-file-extension text="pdf"></outbook-badge-file-extension>

Component: outbook-badge-file-extension

This is the underlying web component. It can be used directly in HTML or in any framework.

Properties

| Attribute | Property | Type | Default | Description | |----------------|--------------|-----------|-------------|-----------------------------------------------------------------| | text | text | String | '' | The text to display in the badge. | | extraClasses | extraClasses | String | undefined | Classes to add to the host element. |

Styling

This component uses Shadow DOM, and its styles are self-contained. The component's styles are automatically applied and encapsulated, so there is no need to import any additional stylesheets.

Custom Properties

Can be used with css light-dark function.

| Custom Property | Description | |-------------------------------------------------------|-------------------| | --outbook-badge-file-extension--border-color | The border color. | | --outbook-badge-file-extension--text-color | The text color. |

License

This component is licensed under the Apache-2.0 License.