Class MutableProps<StaticProps, ChangeableProps>

A class for creating mutable properties that can change on window resize.

There are two ways to change properties:

  • To set a resize-listener on window (or use Viewport). When the window is resized, change the properties with the help of changeProps

  • The second way is to use the MutableProps and add responsive properties with help of addResponsiveProps.

Example

interface IStatic {
  static: string;
}

interface IChangeable {
  changeable: string;
}

const props = new MutableProps<IStatic, IChangeable>({
  static: '',
  changeable: 'something',
});

props.addResponsiveProps({
  breakpoint: 'viewport_phone',
  settings: {
    changeable: 'phone',
  },
});

props.changeProps({ changeable: 'changed' });

Type Parameters

  • StaticProps extends Record<string, any>

  • ChangeableProps extends Record<string, any>

Hierarchy

  • MutableProps

Constructors

constructor

Properties

_activeBreakpoints _app _initProps _name _onMutate _props _refProps _responsiveRules _viewportCallback?

Accessors

props

Methods

_responseProps addResponsiveProps changeProps destroy

Constructors

constructor

  • Type Parameters

    • StaticProps extends Record<string, any>

    • ChangeableProps extends Record<string, any>

    Parameters

    • _initProps: StaticProps & ChangeableProps

      The properties that were set while initialization. These properties will nevet change.

    • _onMutate: (() => void) = ...

      A callback that is launched when properties are changed

        • (): void

        • A callback that is launched when properties are changed

          Returns void

    • _name: string = 'Responsive Props'

      Name of the responsive properties.

    Returns MutableProps<StaticProps, ChangeableProps>

    Example

    const static = {
      myProp: true,
    };

    const responsive = [
      {
        breakpoint: 'm',
        settings: {
          myProp: false
        }
      }
    ];

    const props = new MutableProps(static, responsive);

Properties

Private _activeBreakpoints

_activeBreakpoints: (string | number)[]

Active breakpoints used to define if properties have changed

Private _app

_app: Application

Vevet Application.

Private _initProps

_initProps: StaticProps & ChangeableProps

The properties that were set while initialization. These properties will nevet change.

Private _name

_name: string = 'Responsive Props'

Name of the responsive properties.

Private _onMutate

_onMutate: (() => void) = ...

Type declaration

    • (): void

    • A callback that is launched when properties are changed

      Returns void

Private _props

_props: StaticProps & ChangeableProps

Current properties. These properties may change both on changeProps and resize.

Private _refProps

_refProps: StaticProps & ChangeableProps

Reference properties. These properties may change only through changeProps.

Private _responsiveRules

_responsiveRules: IResponsive<ChangeableProps>[] = []

A set of responsive rules

Private Optional _viewportCallback

_viewportCallback?: IAddedCallback

Viewport callback

Accessors

props

Methods

Private _responseProps

addResponsiveProps

changeProps

  • This method allows you to change the properties manually.

    Parameters

    • props: Partial<ChangeableProps>

    Returns void

destroy

Settings

Member Visibility

Theme

On This Page