How to use universal-stylesheet - 10 common examples

To help you get started, we’ve selected a few universal-stylesheet 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 alibaba / rax / components / rax-navigation / src / views / Card.js View on Github external
panHandlers;

    return (
      
        {renderScene(props)}
      
    );
  }
}

const styles = StyleSheet.create({
  main: {
    backgroundColor: '#E9E9EF',
    bottom: 0,
    left: 0,
    position: 'absolute',
    right: 0,
    shadowColor: 'black',
    shadowOffset: { width: 0, height: 0 },
    shadowOpacity: 0.4,
    shadowRadius: 10,
    top: 0,
  },
});

/* eslint-disable no-class-assign */
Card = createPointerEventsContainer(Card);
github alibaba / rax / components / rax-navigation / src / views / Header.js View on Github external
}

    // eslint-disable-next-line no-unused-vars
    const { scenes, scene, style, position, progress } = this.props;

    return (
      
        
      
    );
  }
}

const styles = StyleSheet.create({
  container: {
    paddingTop: STATUSBAR_HEIGHT,
    backgroundColor: Platform.OS === 'ios' ? '#EFEFF2' : '#FFF',
    height: STATUSBAR_HEIGHT + APPBAR_HEIGHT,
    shadowColor: 'black',
    shadowOpacity: 0.1,
    shadowRadius: StyleSheet.hairlineWidth,
    shadowOffset: {
      height: StyleSheet.hairlineWidth,
    },
    elevation: 4,
  },
  appBar: {
    flex: 1,
  },
  header: {
github alibaba / rax / components / rax-navigation / src / views / Transitioner.js View on Github external
progress,
    scenes,
    scene,
    index: scene.index,
  };
}

function isSceneNotStale(scene): boolean {
  return !scene.isStale;
}

function isSceneActive(scene): boolean {
  return scene.isActive;
}

const styles = StyleSheet.create({
  main: {
    flex: 1,
  },
});

export default Transitioner;
github alibaba / rax / components / rax-menulist / src / Arrow.js View on Github external
render() {
    const {
      source,
      arrowPosition = {x: 'middle', y: 'bottom'},
      style = arrowStyle.arrowIcon
    } = this.props;
    const {x, y} = arrowPosition;
    const positionStyle = [this.position[x], this.position[y]];

    return (
      <img style="{[style,">
    );
  }
}

const arrowStyle = StyleSheet.create({
  arrowIcon: {
    width: 18,
    height: 18,
    position: 'absolute'
  }
});
github alibaba / rax / examples / uikit / Button.js View on Github external
primary1: PropTypes.bool,
  primary2: PropTypes.bool,
  primary3: PropTypes.bool,
  backgroundColor: PropTypes.string,
  color: PropTypes.string,
  fontSize: PropTypes.number,
  underlayColor: PropTypes.string,
  raised: PropTypes.bool,
  textStyle: PropTypes.any,
  disabled: PropTypes.bool,
  loading: PropTypes.bool,
  activityIndicatorStyle: PropTypes.any,
  loadingRight: PropTypes.bool
};

const styles = StyleSheet.create({
  button: {
    padding: 19 * 2,
    marginLeft: 15 * 2,
    marginRight: 15 * 2,
    backgroundColor: colors.primary,
    justifyContent: 'center',
    alignItems: 'center',
    flexDirection: 'row'
  },
  text: {
    color: 'white',
    fontSize: normalize(18 * 2)
  },
  icon: {
    marginRight: 10 * 2
  },
github alibaba / rax / components / rax-navigation / src / views / HeaderTitle.js View on Github external
import { createElement, Component, PropTypes } from 'rax';
import StyleSheet from 'universal-stylesheet';
import Platform from 'universal-platform';
import Text from 'rax-text';

const HeaderTitle = ({ style, ...rest }) =&gt;
github alibaba / rax / components / rax-menulist / src / index.js View on Github external
{
          showArrow ? (
            
          ) : null
        }
      
    );
  }
}

const menuListStyle = StyleSheet.create({
  menuList: {
    borderRadius: 4,
    backgroundColor: '#ffffff',
    paddingLeft: 10,
    paddingRight: 10,
    borderColor: '#e7e7e7',
    borderWidth: StyleSheet.hairlineWidth,
    width: 210,
    position: 'fixed',
    opacity: 0
  }
});
github alibaba / rax / components / rax-menulist / src / MenuItem.js View on Github external
const content = children ? children : (
      
    );

    return (
      
        {content}
      
    );
  }
}

const menuItemStyle = StyleSheet.create({
  item: {
    backgroundColor: '#ffffff',
    justifyContent: 'center',
    alignItems: 'center',
    borderColor: '#e7e7e7',
    borderBottomWidth: StyleSheet.hairlineWidth,
    paddingTop: 15,
    paddingBottom: 15
  },
  text: {
    fontSize: 28,
    color: '#666666'
  }
});
github alibaba / rax / components / rax-qrcode / src / index.js View on Github external
}
    }
  }

  render() {
    const {style} = this.props;
    return (
      <canvas style="{[styles.qrCode,">
    );
  }
}

const styles = StyleSheet.create({
  qrCode: {
    width: 300,
    height: 300
  }
});

QRCode.ErrorCorrectLevel = qr.ErrorCorrectLevel;
export default QRCode;
</canvas>
github alibaba / rax / examples / game2048 / Game2048.js View on Github external
return (
      
    );
  }
}

var styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
  },
  board: {
    padding: BOARD_PADDING,
    backgroundColor: '#bbaaaa',
    borderRadius: 5 * 2,
  },
  overlay: {
    position: 'absolute',
    top: 0,
    bottom: 0,
    left: 0,
    right: 0,

universal-stylesheet

A universal StyleSheet API.

BSD-3-Clause
Latest version published 6 years ago

Package Health Score

57 / 100
Full package analysis

Similar packages