1. Advisor
  2. @patternfly/react-core
  3. functions
  4. @patternfly/react-core.BackgroundImageSrc.xs
View all @patternfly/react-core analysis

How to use the @patternfly/react-core.BackgroundImageSrc.xs function in @patternfly/react-core

To help you get started, we’ve selected a few @patternfly/react-core examples, based on popular ways it is used in public projects.

Secure your code as it's written. Use Snyk Code to scan source code in minutes - no build needed - and fix issues immediately.

github kiegroup / optaweb-vehicle-routing / optaweb-vehicle-routing-frontend / src / ui / components / Background.tsx View on Github external
import { BackgroundImage, BackgroundImageSrc } from '@patternfly/react-core';
import filter from '@patternfly/react-core/dist/styles/assets/images/background-filter.svg';
/* eslint-disable camelcase */
import pfbg_1200 from '@patternfly/react-core/dist/styles/assets/images/pfbg_1200.jpg';
import pfbg_576 from '@patternfly/react-core/dist/styles/assets/images/pfbg_576.jpg';
import pfbg_576_2x from '@patternfly/react-core/dist/styles/assets/images/pfbg_576@2x.jpg';
import pfbg_768 from '@patternfly/react-core/dist/styles/assets/images/pfbg_768.jpg';
import pfbg_768_2x from '@patternfly/react-core/dist/styles/assets/images/pfbg_768@2x.jpg';
import * as React from 'react';
/* eslint-enable camelcase */

const bgImages = {
  [BackgroundImageSrc.lg]: pfbg_1200,
  [BackgroundImageSrc.sm]: pfbg_768,
  [BackgroundImageSrc.sm2x]: pfbg_768_2x,
  [BackgroundImageSrc.xs]: pfbg_576,
  [BackgroundImageSrc.xs2x]: pfbg_576_2x,
  [BackgroundImageSrc.filter]: `${filter}#image_overlay`,
};

const Background: React.FC = () => (
  
);

export default Background;
github fusor / mig-ui / src / HomePage / index.tsx View on Github external
toggle={
                
                  Kyle Baker
                
              }
              dropdownItems={userDropdownItems}
            />
          
        
      
    );
    const bgImages = {
      [BackgroundImageSrc.lg]: "/assets/images/pfbg_1200.jpg",
      [BackgroundImageSrc.sm]: "/assets/images/pfbg_768.jpg",
      [BackgroundImageSrc.sm2x]: "/assets/images/pfbg_768@2x.jpg",
      [BackgroundImageSrc.xs]: "/assets/images/pfbg_576.jpg",
      [BackgroundImageSrc.xs2x]: "/assets/images/pfbg_576@2x.jpg",
      [BackgroundImageSrc.filter]:
        "/assets/images/background-filter.svg#image_overlay"
    };

    const Header = (
      }
        toolbar={PageToolbar}
        // avatar={}
        showNavToggle
      />
    );
    const Sidebar = ;
    return (
github patternfly / patternfly-react / packages / patternfly-4 / react-core / src / components / LoginPage / examples / SimpleLoginPage.js View on Github external
LoginMainFooterLinksItem,
  LoginPage,
  BackgroundImageSrc,
  ListItem
} from '@patternfly/react-core';
import { ExclamationCircleIcon } from '@patternfly/react-icons';

/**
 * Note: When using background-filter.svg, you must also include #image_overlay as the fragment identifier
 */

const images = {
  [BackgroundImageSrc.lg]: '/assets/images/pfbg_1200.jpg',
  [BackgroundImageSrc.sm]: '/assets/images/pfbg_768.jpg',
  [BackgroundImageSrc.sm2x]: '/assets/images/pfbg_768@2x.jpg',
  [BackgroundImageSrc.xs]: '/assets/images/pfbg_576.jpg',
  [BackgroundImageSrc.xs2x]: '/assets/images/pfbg_576@2x.jpg',
  [BackgroundImageSrc.filter]: '/assets/images/background-filter.svg#image_overlay'
};

class SimpleLoginPage extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      showHelperText: false,
      usernameValue: '',
      isValidUsername: true,
      passwordValue: '',
      isValidPassword: true,
      isRememberMeChecked: false
    };
  }
github patternfly / patternfly-react / packages / patternfly-4 / react-core / src / demos / PageLayout / examples / PageLayoutVerticalNavCondensed.js View on Github external
isOpen={isDropdownOpen}
              toggle={Kyle Baker}
              dropdownItems={userDropdownItems}
            />
          
        
      
    );
    const bgImages = {
      [BackgroundImageSrc.lg]: '/assets/images/pfbg_1200.jpg',
      [BackgroundImageSrc.md]: '/assets/images/pfbg_992.jpg',
      [BackgroundImageSrc.md2x]: '/assets/images/pfbg_992@2x.jpg',
      [BackgroundImageSrc.sm]: '/assets/images/pfbg_768.jpg',
      [BackgroundImageSrc.sm2x]: '/assets/images/pfbg_768@2x.jpg',
      [BackgroundImageSrc.xl]: '/assets/images/pfbg_2000.jpg',
      [BackgroundImageSrc.xs]: '/assets/images/pfbg_576.jpg',
      [BackgroundImageSrc.xs2x]: '/assets/images/pfbg_576@2x.jpg',
      [BackgroundImageSrc.filter]: '/assets/images/background-filter.svg#image_overlay'
    };

    const Header = (
      }
        toolbar={PageToolbar}
        avatar={}
        showNavToggle
        onNavToggle={this.onNavToggle}
      />
    );
    const Sidebar = ;

    return (
github patternfly / patternfly-react / packages / patternfly-4 / react-integration / demo-app-ts / src / components / demos / BackgroundImageDemo / BackgroundImageDemo.tsx View on Github external
const pfbg_1200 = require('../LoginPageDemo/images/pfbg_1200.jpg');
const pfbg_768 = require('../LoginPageDemo/images/pfbg_768.jpg');
const pfbg_768_2x = require('../LoginPageDemo/images/pfbg_768@2x.jpg');
const pfbg_576 = require('../LoginPageDemo/images/pfbg_576.jpg');
const pfbg_576_2x = require('../LoginPageDemo/images/pfbg_576@2x.jpg');

export class BackgroundImageDemo extends React.Component {
  myBackgroundProps: BackgroundImageProps = {
    /**
     * Note: When using background-filter.svg, you must also include #image_overlay as the fragment identifier
     */
    src: {
      [BackgroundImageSrc.lg]: pfbg_1200,
      [BackgroundImageSrc.sm]: pfbg_768,
      [BackgroundImageSrc.sm2x]: pfbg_768_2x,
      [BackgroundImageSrc.xs]: pfbg_576,
      [BackgroundImageSrc.xs2x]: pfbg_576_2x,
      [BackgroundImageSrc.filter]: ''
    }
  };

  componentDidMount() {
    window.scrollTo(0, 0);
  }

  render() {
    return ;
  }
}
github patternfly / patternfly-react / packages / patternfly-4 / react-core / src / components / Wizard / examples / SimpleWizard.js View on Github external
render() {
    const { isOpen } = this.state;

    const images = {
      [BackgroundImageSrc.xs]: '/assets/images/pfbg_576.jpg',
      [BackgroundImageSrc.xs2x]: '/assets/images/pfbg_576@2x.jpg',
      [BackgroundImageSrc.sm]: '/assets/images/pfbg_768.jpg',
      [BackgroundImageSrc.sm2x]: '/assets/images/pfbg_768@2x.jpg',
      [BackgroundImageSrc.lg]: '/assets/images/pfbg_1200.jpg',
      [BackgroundImageSrc.filter]: '/assets/images/background-filter.svg#image_overlay'
    };

    const steps = [
      { name: 'Step 1', component: <p>Step 1</p> },
      {
        name: 'Step 2',
        steps: [
          { name: 'Step 2 - A', component: <p>Step 2 - A</p> },
          { name: 'Step 2 - B', component: <p>Step 2 - B</p> }
        ]
      },
github patternfly / patternfly-react / packages / patternfly-4 / react-core / src / demos / PageLayout / examples / PageLayoutHorizontalNavCondensed.js View on Github external
isOpen={isDropdownOpen}
              toggle={Kyle Baker}
              dropdownItems={userDropdownItems}
            /&gt;
          
        
      
    );
    const bgImages = {
      [BackgroundImageSrc.lg]: '/assets/images/pfbg_1200.jpg',
      [BackgroundImageSrc.md]: '/assets/images/pfbg_992.jpg',
      [BackgroundImageSrc.md2x]: '/assets/images/pfbg_992@2x.jpg',
      [BackgroundImageSrc.sm]: '/assets/images/pfbg_768.jpg',
      [BackgroundImageSrc.sm2x]: '/assets/images/pfbg_768@2x.jpg',
      [BackgroundImageSrc.xl]: '/assets/images/pfbg_2000.jpg',
      [BackgroundImageSrc.xs]: '/assets/images/pfbg_576.jpg',
      [BackgroundImageSrc.xs2x]: '/assets/images/pfbg_576@2x.jpg',
      [BackgroundImageSrc.filter]: '/assets/images/background-filter.svg#image_overlay'
    };

    const Header = (
      }
        toolbar={PageToolbar}
        avatar={}
        topNav={PageNav}
      /&gt;
    );

    return (
github kiegroup / optaweb-vehicle-routing / optaweb-vehicle-routing-frontend / src / themes / OVRTheme.tsx View on Github external
import pfbg_768 from '@patternfly/patternfly/assets/images/pfbg_768.jpg';
import pfbg_768_2x from '@patternfly/patternfly/assets/images/pfbg_768@2x.jpg';
import {
  BackgroundImage,
  BackgroundImageSrc,
  BackgroundImageSrcMap,
  Brand,
} from '@patternfly/react-core';
import * as React from 'react';

const defaultProps: IOVRThemeProviderProps = {
  bgImages: {
    [BackgroundImageSrc.lg]: pfbg_1200,
    [BackgroundImageSrc.sm]: pfbg_768,
    [BackgroundImageSrc.sm2x]: pfbg_768_2x,
    [BackgroundImageSrc.xs]: pfbg_576,
    [BackgroundImageSrc.xs2x]: pfbg_576_2x,
    [BackgroundImageSrc.filter]: `${filter}#image_overlay`,
  },
  brandImg: '/assets/images/optaPlannerLogo200px.png',
};

const PatternFlyContext = React.createContext({
  ...defaultProps,
  components: {
    Background: undefined,
    Brand: undefined,
  },
});

export interface IOVRThemeProviderProps {
  bgImages?: BackgroundImageSrcMap | string;
github patternfly / patternfly-react / packages / patternfly-4 / react-integration / demo-app-ts / src / components / demos / LoginPageDemo / LoginPageDemo.tsx View on Github external
LoginPage,
  BackgroundImageSrc,
  ListItem,
  ListVariant,
} from '@patternfly/react-core';
import { ExclamationCircleIcon } from '@patternfly/react-icons';

/**
 * Note: When using background-filter.svg, you must also include #image_overlay as the fragment identifier
 */

const images = {
  [BackgroundImageSrc.lg]: pfbg_1200,
  [BackgroundImageSrc.sm]: pfbg_768,
  [BackgroundImageSrc.sm2x]: pfbg_768_2x,
  [BackgroundImageSrc.xs]: pfbg_576,
  [BackgroundImageSrc.xs2x]: pfbg_576_2x,
  [BackgroundImageSrc.filter]: ''
};

export interface LoginPageDemoState {
  showHelperText: boolean;
  usernameValue: string;
  isValidUsername: boolean;
  passwordValue: string;
  isValidPassword: boolean;
  isRememberMeChecked: boolean;
}

export class LoginPageDemo extends React.Component, LoginPageDemoState&gt; {
  state = {
    showHelperText: false,
github kiegroup / optaweb-employee-rostering / employee-rostering-frontend / src / ui / components / Background.tsx View on Github external
*/

import { BackgroundImage, BackgroundImageSrc } from '@patternfly/react-core';
import filter from '@patternfly/react-core/dist/styles/assets/images/background-filter.svg';
import pfbg_1200 from '@patternfly/react-core/dist/styles/assets/images/pfbg_1200.jpg';
import pfbg_576 from '@patternfly/react-core/dist/styles/assets/images/pfbg_576.jpg';
import pfbg_576_2x from '@patternfly/react-core/dist/styles/assets/images/pfbg_576@2x.jpg';
import pfbg_768 from '@patternfly/react-core/dist/styles/assets/images/pfbg_768.jpg';
import pfbg_768_2x from '@patternfly/react-core/dist/styles/assets/images/pfbg_768@2x.jpg';
import * as React from 'react';

const bgImages = {
  [BackgroundImageSrc.lg]: pfbg_1200,
  [BackgroundImageSrc.sm]: pfbg_768,
  [BackgroundImageSrc.sm2x]: pfbg_768_2x,
  [BackgroundImageSrc.xs]: pfbg_576,
  [BackgroundImageSrc.xs2x]: pfbg_576_2x,
  [BackgroundImageSrc.filter]: `${filter}#image_overlay`,
};

const Background: React.FC = () =&gt; (
  
);

export default Background;

@patternfly/react-core

This library provides a set of common React components for use with the PatternFly reference implementation.

GitHub
MIT
Latest version published 15 days ago

Package Health Score

90 / 100
Full package analysis

Popular @patternfly/react-core functions

Similar packages