项目作者: Alex-Ferreli

项目描述 :
Helper to join BS4 flex classes with responsive breakpoints support
高级语言: JavaScript
项目地址: git://github.com/Alex-Ferreli/bs4-flex-helper.git
创建时间: 2018-12-03T22:05:03Z
项目社区:https://github.com/Alex-Ferreli/bs4-flex-helper

开源协议:

下载


bs4-flex-helper

bs4-flex-helper is a helper function the generate corresponding BS4 flex classes, based on single value or array of values for responsive breakpoints.

Install

  1. npm i bs4-flex-helper

or

  1. yarn add bs4-flex-helper

Usage

  1. import bs4FlexHelper from 'bs4-flex-helper';
  2. const divClasses = bs4FlexHelper({ dir: 'row' });
  3. console.log(divClasses); // d-flex flex-row

Main function accept 2 arguments:

  • object contains properties to set
  • boolean to insert base flex class before (d-flex)
property type values default description
dir string or array ‘sm’ or [‘xs’, ‘sm’, …] flex-direction property
jc string or array ‘sm’ or [‘xs’, ‘sm’, …] justify-content property
ai string or array ‘sm’ or [‘xs’, ‘sm’, …] align-items property
ac string or array ‘sm’ or [‘xs’, ‘sm’, …] align-content property
wrap string or array ‘sm’ or [‘xs’, ‘sm’, …] wrap property
inline boolean true or false false use inline-flex or flex

Example with React

  1. import React from 'react';
  2. import bs4FlexHelper from 'bs4-flex-helper';
  3. const bs4Class = bs4FlexHelper({ dir: 'row' });
  4. export default function Panel() {
  5. return <div className={bs4Class}>bs4-flex-helper</div>;
  6. }

->

  1. <div class="d-flex flex-row">bs4-flex-helper</div>