https://github.com/rajasegar/ember-stylish-buttons
Some fresh styles & hover effects for the modern button
https://github.com/rajasegar/ember-stylish-buttons
button-widget buttons ember-addon emberjs
Last synced: about 1 year ago
JSON representation
Some fresh styles & hover effects for the modern button
- Host: GitHub
- URL: https://github.com/rajasegar/ember-stylish-buttons
- Owner: rajasegar
- License: mit
- Created: 2017-06-16T02:06:01.000Z (almost 9 years ago)
- Default Branch: master
- Last Pushed: 2023-10-16T21:23:24.000Z (over 2 years ago)
- Last Synced: 2025-04-13T23:11:26.456Z (about 1 year ago)
- Topics: button-widget, buttons, ember-addon, emberjs
- Language: HTML
- Homepage: https://rajasegar.github.io/ember-stylish-buttons/
- Size: 3.78 MB
- Stars: 6
- Watchers: 2
- Forks: 0
- Open Issues: 6
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- Contributing: CONTRIBUTING.md
- License: LICENSE.md
Awesome Lists containing this project
README
# ember-stylish-buttons
[](https://coveralls.io/github/rajasegar/ember-stylish-buttons?branch=master)
[](https://github.com/semantic-release/semantic-release)
[](https://npmjs.org/package/ember-stylish-buttons "View this project on npm")
[](http://emberobserver.com/addons/ember-stylish-buttons)
Some fresh styles & hover effects for the modern Ember button.
A collection of fresh button styles and effects for your Ember buttons.
We use CSS transitions and pseudo-elements for most of the effects.
Drawing a great amount of inspiration from this Codrops [article](https://tympanus.net/codrops/2015/02/26/inspiration-button-styles-effects/)
## Demo
[Demo](https://rajasegar.github.io/ember-stylish-buttons/)
Play with different options for the component and customize and get the template code to use in your application.
[Playground](https://rajasegar.github.io/ember-stylish-buttons/#/playground)
## Installation
```shell
ember install ember-stylish-buttons
```
## Usage
```hbs
Remove
Archive
```
## Adding click events
To attach an event handler to the `StylishButton` component, we can use the `on` modifier.
Since Modifiers can also be applied to components, they are also passed forward and applied to the button element with `...attributes` as mentioned
in the [guides](https://guides.emberjs.com/release/components/template-lifecycle-dom-and-modifiers/#toc_modifiers-and-attributes).
```hbs
```
## Properties
The **stylish-button** component takes the following list of properties to modify the styles and apperance of the button.
### type [String]
This parameter controls the overall style of the buttons.
Please find below the list of values it can take from the **Styles** section.
```hbs
```
### action [Closure Action]
This parameter performs the click action with whatever action is passed along with parameters.
This is where you need to send your actions for the buttons.
```hbs
```
### size [String]
This parameter controls the size of the button.
Possible values include:
- s => small
- m => medium
- l => large
```hbs
Remove
```
### textWidth [String]
This parameter controls the bold property of the text in the button.
Possible values include:
- thin
- thick
- medium
```hbs
Archive
```
### border [String]
This parameter controls the border thickness of the button.
Possible values include:
- thin
- thick
```hbs
```
### upperCase [Boolean]
This parameter transforms the button text to uppercase.
Default value is **false**
```hbs
```
### shape [String]
This parameter transforms the button to a pill shape with various border-radius dimensions.
Possible values include:
- round-s
- round-l
- round-m
```hbs
```
### customClasses [String(s)]
This parameter adds your custom classnames to the component class list.
It is useful to override the styles with your own classnames.
```hbs
```
## Styles
Ember stylish buttons come with about 18 different styles for button.
Just give any one of the following values for the **type** attribute of the component.
- winona (default)
- ujarak
- wayra
- tamaya
- rayen
- pipaluk
- moema
- isi
- aylen
- saqui
- wapasha
- nuka
- antiman
- itzel
- naira
- quidel
- sacnite
- shikoba
## Configuring
Add a configuration for `ember-stylish-buttons` to include only the themes that you will use.
```js
ENV['ember-stylish-buttons'] = {
includedThemes: ['winona', 'ujarak', 'shikoba'],
excludedThemes: ['wapasha'],
excludeBaseStyles: false, // defaults to false
defaultTheme: 'winona', // defaults to 'winona'
};
```
To exclude or not include a theme, means that it's css styles will not be bundled with your application, thus not polluting your app.
> **Note:** including a blank array e.g. `includeThemes: []` will not include any themes, leaving
> you to define your own theme styles. See the `vendor/ember-stylish-buttons/themes` directory
> for reference.
> **Note:** you may also want to set `excludeBaseStyles: true` so that this addon doesn't include the styles
> used by all the themes.
A big Thanks to [Ilya Radchenko](https://github.com/knownasilya) for making this configuration possible to have
a small memory footprint of css in your app when you are using the addon.
## Running
- `ember serve`
- Visit your app at .
## Running Tests
- `npm test` (Runs `ember try:each` to test your addon against multiple Ember versions)
- `ember test`
- `ember test --server`
## Building
- `ember build`
For more information on using ember-cli, visit .
## Credits
- [Mary Lou](https://github.com/crnacura)
- [Ilya Radchenko](https://github.com/knownasilya)