dc-responsive v1.0.4

DC-Responsive

DC Responsive is a simple Helper for RESPONSIVE DIRECTIVES to show or hide items according to the size of the device screen. Base on CDK Layout from Material Angular

Install

npm i dc-responsive

Dependency By

CDK Layout from Material Angular

Documentation

Requirement

• Angular 11 or newer

Has tested on

• Angular 11
• CDK 12

Load helper

import { DcResponsiveComponent } from 'dc-responsive'

Example The Directive

For mobile screen

<dc-responsive size="mobile">
  <h3>Here is Mobile</h3>
</dc-responsive>

For tablet screen

<dc-responsive size="tablet">
  <h3>Here is Tablet</h3>
</dc-responsive>

For desktop screen

<dc-responsive size="desktop">
  <h3>Here is Desktop</h3>
</dc-responsive>

For Extra Small screen

<dc-responsive size="xs">
  <h3>Here is XS</h3>
</dc-responsive>

For Small screen

<dc-responsive size="sm">
  <h3>Here is SM</h3>
</dc-responsive>

For Medium screen

<dc-responsive size="md">
  <h3>Here is MD</h3>
</dc-responsive>

For Large screen

<dc-responsive size="lg">
  <h3>Here is LG</h3>
</dc-responsive>

For Extra Large screen

<dc-responsive size="xl">
  <h3>Here is XL</h3>
</dc-responsive>

Properties of Directive

Contributing

1. Fork it!
2. Create your feature branch: git checkout -b my-new-feature
3. Commit your changes: git commit -m 'Add some feature'
4. Push to the branch: git push origin my-new-feature
5. Submit a pull request :D

License

MIT License

Credit

Logo icon by Roundicons from Flaticon