@mrclark/recyclables
TypeScript icon, indicating that this package has built-in type declarations

0.0.5 • Public • Published

Recyclables

This library currently only contains an angular directive for adding flexbox properties that are configurable at runtime.

This library was generated with Angular CLI version 11.0.5.

Getting Started

Run npm install @mrclark/recyclables -g to install the library globally. In your @NgModule decorator import the FlexibleDirective. On any element add the attribute recFlexible which will give default flex-box functionality and brings with it 3 other properties recDirection, recJustify, and recAlign.

Note: Simply adding recFlexible to an element is equivalent to writing: display: flex; justify-content: flex-start; align-items: start;

Important Note: The Recyclable FlexibleDirection adds the style properties inline, so changing these properties in the css file would require use defining the change !important

Recyclable is tree shakable!

Usage

Add attribute to element

  • <div recFlexible> centent </div>

Configure the direction, justification and alignment

  • <div recFlexible recDirection='column' recJustify='center' recAlign='center'> centent </div>

Additionally

MDN Web Docs has extensive documentation on the flex-box layout model. To understand how it works refer to the documentation.

Versions

Current Tags

  • Version
    Downloads (Last 7 Days)
    • Tag
  • 0.0.5
    0
    • latest

Version History

Package Sidebar

Install

npm i @mrclark/recyclables

Weekly Downloads

0

Version

0.0.5

License

none

Unpacked Size

24.7 kB

Total Files

17

Last publish

Collaborators

  • mrclark