3.1.2 • Published 2 years ago

bpk-component-overlay v3.1.2

Weekly downloads
238
License
Apache-2.0
Repository
github
Last release
2 years ago

bpk-component-overlay

Backpack overlay component.

Installation

npm install bpk-component-overlay --save-dev

Usage

import React from 'react';
import BpkText from 'bpk-component-text';
import BpkOverlay, { BORDER_RADIUS_STYLES, OVERLAY_TYPES } from 'bpk-component-overlay';

export default () => (
  <div>
    { /* Basic example */}
    <BpkOverlay>
      <BpkText>Hotels in Canada</BpkText>
    </BpkOverlay>

    { /* With the tint invisible */}
    <BpkOverlay overlayType={OVERLAY_TYPES.none}>
      <BpkText>Hotels in Canada</BpkText>
    </BpkOverlay>

    { /* With a border radius style */}
    <BpkOverlay borderRadiusStyle={BORDER_RADIUS_STYLES.sm}>
      <BpkText>Hotels in Canada</BpkText>
    </BpkOverlay>

    { /* With foreground content */}
    <BpkOverlay foregroundContent={<BpkText>Visit Ottawa</BpkText>}>
      <BpkText>Hotels in Canada</BpkText>
    </BpkOverlay>
  </div>
);

Props

PropertyPropTypeRequiredDefault Value
childrenNodetrue-
borderRadiusStyleoneOf(BORDER_RADIUS_STYLES.none, BORDER_RADIUS_STYLES.sm)falseBORDER_RADIUS_STYLES.none
classNamestringfalsenull
foregroundContentNodefalsenull
overlayTypeoneOf(OVERLAY_TYPES)falseOVERLAY_TYPES.tint
3.1.2

2 years ago

3.1.1

2 years ago

3.1.0

2 years ago

3.0.6

2 years ago

3.0.5

2 years ago

2.1.16

2 years ago

2.1.14

2 years ago

2.1.15

2 years ago

2.1.12

2 years ago

2.1.13

2 years ago

3.0.4

2 years ago

3.0.3

2 years ago

3.0.2

2 years ago

3.0.1

2 years ago

3.0.0

2 years ago

2.1.9

2 years ago

2.1.10

2 years ago

2.1.11

2 years ago

2.1.8

2 years ago

2.1.6

2 years ago

2.1.7

2 years ago

2.1.2

2 years ago

2.1.4

2 years ago

2.1.3

2 years ago

2.1.5

2 years ago

2.1.1

2 years ago

2.0.28

2 years ago

2.0.29

2 years ago

2.0.33

2 years ago

2.0.31

2 years ago

2.0.32

2 years ago

2.0.30

2 years ago

2.1.0

2 years ago

2.0.19

2 years ago

2.0.26

2 years ago

2.0.27

2 years ago

2.0.24

2 years ago

2.0.25

2 years ago

2.0.22

2 years ago

2.0.23

2 years ago

2.0.20

2 years ago

2.0.21

2 years ago

2.0.17

3 years ago

2.0.18

3 years ago

2.0.16

3 years ago

2.0.15

3 years ago

2.0.14

3 years ago

2.0.13

3 years ago

2.0.12

3 years ago

2.0.11

3 years ago

2.0.10

3 years ago

2.0.9

3 years ago

2.0.7

3 years ago

2.0.8

3 years ago

2.0.6

3 years ago

2.0.5

3 years ago

2.0.4

3 years ago

2.0.3

3 years ago

2.0.2

3 years ago

2.0.1

3 years ago

2.0.0

3 years ago

1.1.7

3 years ago

1.1.5

3 years ago

1.1.4

3 years ago

1.1.3

3 years ago

1.1.2

3 years ago

1.1.1

3 years ago

1.1.0

3 years ago

1.0.47

3 years ago

1.0.46

3 years ago

1.0.44

3 years ago

1.0.45

3 years ago

1.0.43

3 years ago

1.0.42

3 years ago

1.0.41

3 years ago

1.0.39

3 years ago

1.0.38

3 years ago

1.0.40

3 years ago

1.0.37

3 years ago

1.0.36

3 years ago

1.0.35

3 years ago

1.0.34

3 years ago

1.0.33

3 years ago

1.0.32

3 years ago

1.0.31

3 years ago

1.0.29

3 years ago

1.0.30

3 years ago

1.0.28

3 years ago

1.0.27

3 years ago

1.0.26

3 years ago

1.0.25

3 years ago

1.0.24

3 years ago

1.0.23

3 years ago

1.0.22

3 years ago

1.0.21

3 years ago

1.0.20

3 years ago

1.0.19

3 years ago

1.0.18

3 years ago

1.0.17

3 years ago

1.0.16

3 years ago

1.0.15

3 years ago

1.0.14

3 years ago

1.0.13

3 years ago

1.0.12

3 years ago

1.0.11

3 years ago

1.0.10

3 years ago

1.0.9

3 years ago

1.0.8

3 years ago

1.0.7

3 years ago

1.0.6

4 years ago

1.0.5

4 years ago

1.0.4

4 years ago

1.0.3

4 years ago

1.0.2

4 years ago

1.0.1

4 years ago

1.0.0

4 years ago