@bynary.composables.class.Interface.IBindModifierGroupOptions

@bynary/composables / @bynary/composables/class / IBindModifierGroupOptions

Interface: IBindModifierGroupOptions

A set of options for bindModifierGroup and useModifierGroup

Properties

baseClass?

optional baseClass: string

The base CSS class used to create a modifier-class. There is usually one base class per component: <base-class>--<modifier>

While you're always able to explicitly set a base class via the options, it's recommended to use the provideBaseClass function to provide the base class to the component. Especially, when using useModifier or useModifierGroup multiple times in one directive or component.

WARNING: If you don't provide a base class either via options.baseClass or via provideBaseClass, an error will be thrown!

Example

const color = signal('red');

bindModifierGroup(color, { baseClass: 'my-button' }); // <my-component class="my-button my-button--red"></my-component>

Defined in

class/src/modifier-group.composable.ts:26

---

prefix?

optional prefix: string

A prefix to prepend to the modifier when creating the modifier class: <base-class>--<prefix>-<modifier>

Examples

Without a prefix:

useModifierGroup('primary', { baseClass: 'button' }); // <my-component class="button button--primary"></my-component>

With a prefix:

useModifierGroup('primary', { baseClass: 'button', prefix: 'color' }); // <my-component class="button button--color-primary"></my-component>

Defined in

class/src/modifier-group.composable.ts:45