@cardstack/ui-components
v0.2.21
Published
Reusable UI elements for Cardstack projects and Ember apps.
Downloads
45
Keywords
Readme
@cardstack/ui-components
This is a work-in-progress addon that will contain reusable UI elements like form inputs, buttons, navbars, and more. The components can be used in regular Ember apps as well as Cardstack projects.
View the live docs by running ember serve
in this repository and going to http://localhost:4200/freestyle. They are built using ember-freestyle.
Compatibility
- Ember.js v2.18 or above
- Ember CLI v2.13 or above
- Node.js v8 or above
Local installation
git clone <repository-url>
cd ui-components
yarn install
yarn link
Then navigate into the app you want to use the addon in, and run the following command:
yarn link @cardstack/ui-components
- Start your app with
ember serve
. As you make changes to the addon, if everything is working properly, your Ember app will rebuild to reflect the changes.
Remote installation
$ ember install @cardstack/ui-components
Usage
Use components in your app like this:
{{component-name}}
or
<ComponentName />
Styles for this addon are opt-in. If you want to use our default styles, import them in your app's css:
@import url("@cardstack/some-css-file");
or scss:
@import '@cardstack/some-css-file'
Configuring debounceSpeed
By default, all keyboard input components (text-field
, text-area
, etc) have a 500ms debounce for handling the input to avoid excessive server calls while the user is typing (for automated tests it's 10ms). There are a couple of different ways to override the default:
- Pass a
debounceMs
argument to the component, i.e.<TextField @debounceMs=100 />
(affects only that specific component) - Set an environment variable in your app's
config/environment.js
(affects all components):
module.exports = function(environment/*, appConfig */) {
//...
if (environment === 'development' || environment === 'production') {
ENV['@cardstack/ui-components'] = {
debounceSpeed: 100
}
}
}
Contributing
See the Contributing guide for details.
License
This project is licensed under the MIT License.