# Bone Flow #124 Filter HTML Functional Class

Normal-use HTML class: `bf-filter`

#124 uses one Functional Class for normal HTML use. Public API functions are not converted into separate HTML classes.

## Minimal HTML

```html
<div class="bf-filter" data-filter-type="Blur">Filter target</div>
```

Result: the Functional Class mounts BoneFilter and applies `blur(4px)` using the current Blur Runtime Default.

## Configured HTML

```html
<div class="bf-filter" data-filter-type="Brightness" data-filter-value="80">
  Brightness 80%
</div>
```

Result: `brightness(80%)`.

```html
<div class="bf-filter" data-filter-type="Hue Rotate" data-filter-value="180">
  Hue Rotate 180deg
</div>
```

Result: `hue-rotate(180deg)`.

## Public HTML attributes

- `class="bf-filter"`: normal-use Functional Class.
- `data-filter-type`: Blur / Brightness / Contrast / Saturation / Grayscale / Sepia / Hue Rotate.
- `data-filter-value`: numeric value within the selected Runtime definition.

The bridge mounts `BoneFilter 1.0.0` and applies a real CSS `filter` string. `BoneFilterFunctionalClass` exposes `mount`, `mountAll`, `refresh`, `setExpression`, `setType`, `setValue`, `getExpression`, `getCssFilter`, `unmount`, and `isMounted`.