0.0.6 • Published 6 years ago

torq-button-schematic v0.0.6

Weekly downloads
5
License
MIT
Repository
-
Last release
6 years ago

Torq Button Schematic

Torq Button in Action

Torq Button

4 Different Torq Buttons

Button TypeDisplay
PrimaryPrimary
Call to ActionCall To Action
OutlineOutline
TextText

Steps to Install Torq Schematic

This repository holds the code to install a simple button component into your project that is based on the Torq Design System. To install the button to your project, follow the steps below: 1. Make sure to have an Angular Project initialized and cd into the project 2. If you do not have an Angular project initialized already, make a new Angular project using the 'ng new projectname' command 1. If you get an error when running the ng new command, it is likely that you do not have the angular-cli installed on your machine. To install the angular-cli on your machine, please follow the steps on https://cli.angular.io/ 3. Once you have created a new project or if you are working with a pre-existing project, open up a terminal or command prompt window at the base level of your angular project. 4. Install the dependency for the torq-schematic by running 'npm i torq-button-schematic' 5. Now all you need to do to run the schematic is run the following command in the root directory of your angular project. 'ng generate torq-button-schematic:torq-btn' 6. You will be prompted to enter a component name and a stylesheet extension type 7. At this point, your schematic will run and you should see a console output similar to: 1. Name of the button is mandatory and so is the style property Torq Button Installation 8. If everything ran succesfully then you should be able to navigate to the /src/app directory of your angular project and see a new folder for the component you just created 9. At this point, you can use the component freely in your application just like any other component using markup. Example: 1. To configure your button with a different text and style you can customize your button like <torq-btn btntext="'Buttons'" btnclass="'callToAction'">

Torq Button Properties

PropertyValue OptionsDefault Value
btntextAny TextButton
btnclassprimary, callToAction, outline, textprimary

Help With Issues

If you are seeing any issues, please email me with a screenshot of your issue