智慧物流>> overwatch-settings-stepper>> 返回
项目作者： likethemammal

项目描述 ：
A React component modeling the Overwatch Settings the stepper and toggle UI elements
高级语言： JavaScript
项目地址: git://github.com/likethemammal/overwatch-settings-stepper.git
创建时间： 2018-03-27T16:36:13Z
项目社区：https://github.com/likethemammal/overwatch-settings-stepper
开源协议：Apache License 2.0
下载


overwatch-settings-stepper

Build Status
Coverage Status

npm Version
npm Downloads
license

A React component modeling the Overwatch Settings the stepper and toggle UI elements.

Example

Install

  1. npm install --save overwatch-settings-stepper

Fonts

Futura No 2 D DemiBold

This font is used by Activision Blizzard for much of Overwatch’s design. For this component to match the Overwatch design, including the font is required. It can be licensed from MyFonts.

When using CSS font-face, the font-family should match whats below:

  1. font-family: 'Futura No 2 D DemiBold';

Usage

Check out example/index.js for working example or below for exact usage.

  1. import { SettingsStepper, Toggle } from 'overwatch-settings-stepper'
  3. class Example extends React.Component {
  4.     state = {
  5.         activeIndex: 1,
  6.     }
  8.     onStep = (activeIndex) => {
  10.         //... do some logic
  12.         this.setState({
  13.             activeIndex
  14.         })
  16.     }
  18.     render() {
  20.         const { activeIndex } = this.state
  22.         return <SettingsStepper
  23.             {...{
  24.                 activeIndex,
  25.                 onStep: this.onStep,
  26.                 label: 'difficulty',
  27.                 options: [
  28.                     'Easy',
  29.                     'Medium',
  30.                     'Hard',
  31.                     'Nightmare',
  32.                     'Insane',
  33.                     'Crazypants'
  34.                 ],
  35.             }}
  36.         ></SettingsStepper>
  37.     }
  38. }

Components

SettingsStepper

The SettingsStepper is the component with the core functionality. It expects options, onStep, and activeIndex.

It is a controlled component, meaning when onStep is called, a new activeIndex is fed to the parent to determine the active visible option of the options.

Toggle

The Toggle is an implementation of SettingsStepper, and a convenience component for those that dont want to implement a simple checkbox/toggle. It expects toggled and onToggle.

It is a controlled component, meaning when onToggle is called, a new toggled is fed to the parent to determine the Toggle’s On or Off state.

Props

SettingsStepper

name required type default desc
activeIndex X integer 0 Index of the active visible option, should be stored in parent state and changed from onStep
onStep X function null Callback method called when stepper is progressed (clicked) forward or backward; Parameter is the new activeIndex to be set in state in the parent component.
options X array [ ‘On’, ‘Off’ ] array of strings options to step through
label string Label for the component, positioned to the left of the stepper options

Toggle

name required type default desc
onToggle X function null Callback method called when toggle is toggled (clicked); Parameter is the new toggled boolean, to be set in state in the parent component.
toggled X boolean false Boolean that reflects whether the toggle is On or Off; Should be stored in parent component state, and changed from onToggle
label string Label for the component, positioned to the left of the toggle options

Development

  1. npm run dev

Running the example

Install it:

  1. cd example/; npm install

Running the example

Run it while developing (in another terminal window):

  1. cd example/; npm run dev

Open http://localhost:8080/ to see the running example

Tests

  1. npm test

License

Made with 🍊 by Chris Dolphin

license

Fonts

The font Futura No 2 D DemiBold should be licensed through MyFonts.com

  • awesome-overwatch - A curated list of official Overwatch links and community github repos, codepen demos, and chrome extensions.
  • overwatch-settings-select - A React component modeling the Overwatch Settings select element.
  • overwatch-side-nav - A React component modeling the Official Overwatch website side-navigation.
  • overwatch-table - A React component modeling the Overwatch custom game table element.
  • dva-heart-emote - A WebGL remake of the heart container animation from D.Va’s emote.