NASA: Pluto Matters!

    ng-boxed
    TypeScript icon, indicating that this package has built-in type declarations

    0.0.8 • Public • Published

    Boxed directive

    The 'boxed" is an Angular directive which provides an easy way to wrap a DOM element and apply classes to style it. DEMO

    Installation

    npm install ng-boxed

    And import the module in your app.module.ts

    imports: [
        .....,
        NgBoxedModule
      ],
    

    Emmet notation

    'boxed' supports an "emmet-style" way to describe the wrappers and their hierarchy.

    'div' is a div element
    'div.foo' is a div with class foo
    'div#bar' is a div with id bar
    'div#bar.foo" is a div with id bar and class foo
    'div#bar.foo.hello' 
    
    'div>div' is a div with another div as a child
    'div.a>div.b' is a div of class a with a div of class b as child
    

    Basic usage - single box

    <a class="foo" boxed="div">This is a link</a>
    
    yields:
    
    <div>
       <a class="foo">This is a link</a>
    </div>
    

    Multiple boxes

    <a class="foo" boxed="div>div">This is a link</a>
    
    yields
    
    <div>
       <div>
           <a class="foo">This is a link</a>
       </div>
    </div>
    

    Styled boxes

    <a class="foo" boxed="div.hello>div.all">This is a link</a>
    
    yields
    
    <div class="hello">
       <div class="world">
           <a class="foo">This is a link</a>
       </div>
    </div>
    

    More advanced usage

    <a class="foo" boxed="div#the_id.hello.world>div.first.second">This is a link</a>
    
    yields
    
    <div class="hello world" id="the_id">
       <div class="first second">
           <a class="foo">This is a link</a>
       </div>
    </div>
    

    Default value

    You can use boxed without any parameter. In this case it wraps the element in a div.col-12 (bootstrap-like)

    <div boxed>This is a text</div>
    
    yields
    
    <div class="col-12">
       <div class="first second">This is a text</div>
    </div>
    

    Install

    npm i ng-boxed

    DownloadsWeekly Downloads

    2

    Version

    0.0.8

    License

    MIT

    Unpacked Size

    84.3 kB

    Total Files

    24

    Last publish

    Collaborators

    • nicolardi