Vue styled is

Flag utility for styled-components in vue

Version: 1.0.0 Updated: 07/23/2018

By: yldio License: MPL-2.0

Downloads Last 30 Days: 14

Install

npm i vue-styled-is
yarn add vue-styled-is

Repository: https://github.com/yldio/vue-styled-is

CDNs

bundle.run: https://bundle.run/vue-styled-is

jsDelivr: https://cdn.jsdelivr.net/npm/vue-styled-is

unpkg: https://unpkg.com/vue-styled-is

vue-styled-is

npm License: MPL 2.0 standard-readme compliant Greenkeeper badge

David David

Flag utility for styled-components.

React Version

Table of Contents

Install

yarn add styled-is

Usage

import is, { isNot, isOr, isSomeNot } from 'styled-is';
import styled from 'styled-components';

const Div = styled.div`
  display: block;
  opacity: 0;

  ${is('red')`
    background-color: red;
  `};

  ${is('blue')`
    background-color: blue;
  `};

  ${is('red', 'blue')`
    opacity: 1;
  `};

  ${is('left')`
    float: left;
  `};

  ${is('right')`
    float: right;
  `};

  ${isNot('left', 'right')`
    float: center;
  `};

  ${isOr('left', 'right')`
    position: relative;
  `};

  ${isSomeNot('red', 'left')`
    wat: 1;
  `};
`;
// display: block;
// opacity: 0;
// float: center;
// wat: 1;
<Div>

// display: block;
// opacity: 0;
// background-color: red;
// opacity: 1;
// float: center;
// wat: 1;
<Div red>

// display: block;
// opacity: 0;
// background-color: red;
// opacity: 1;
// float: left;
// position: relative;
<Div red left>

License

MPL-2.0

Categories: Vue js