Skip to content
This repository has been archived by the owner on Dec 24, 2019. It is now read-only.

Order props by name in docs #139

Merged
merged 1 commit into from
Oct 19, 2017
Merged

Order props by name in docs #139

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
32 changes: 16 additions & 16 deletions docs/guides/props.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,30 +1,30 @@
### Props
## Props

### For single notification component

| Name | Type | Description | Required | Default |
|-----------------|-------------------------|-------------------------------------------------------------|-----------|----------------------------|
| action | string | The name of the action, e.g., "close" or "undo" | | |
| actionStyle | object | Custom action styles | | |
| activeBarStyle | object | Custom snackbar styles when the bar is active | | |
| activeClassName | string | Custom class to apply to the top-level component when active| | `'notification-bar-active'`|
| barStyle | object | Custom snackbar styles | | |
| className | string | Custom class to apply to the top-level component | | |
| dismissAfter | number or boolean | Timeout for onDismiss event | | `2000` |
| isActive | boolean | If true, the notification is visible | true | `false` |
| message | string or React element | The message or component for the notification | true | |
| title | string | The title for the notification | | |
| action | string | The name of the action, e.g., "close" or "undo" | | |
| style | boolean | Setting this prop to `false` will disable all inline styles | | |
| barStyle | object | Custom snackbar styles | | |
| activeBarStyle | object | Custom snackbar styles when the bar is active | | |
| actionStyle | object | Custom action styles | | |
| title | string | The title for the notification | | |
| titleStyle | object | Custom title styles | | |
| className | string | Custom class to apply to the top-level component | | |
| activeClassName | string | Custom class to apply to the top-level component when active| | `'notification-bar-active'`|
| dismissAfter | number or false | Timeout for onDismiss event | | `2000` |

The `style` prop useful if you are not using React inline styles and would like to use CSS instead. See [styles](styles.md) for more.

### For notification stack component

| Name | Type | Description | Required | Default |
|-----------------------|-------|----------------------------------------------------------|---------- |----------|
| notifications | array | Array of notifications to render | true | |
| dismissInOrder | bool | If false, notification dismiss timers start immediately | false | true |
| barStyleFactory | func | create the style of the notification | false | fn |
| activeBarStyleFactory | func | create the style of the active notification | false | fn |
| actionStyleFactory | func | create the style of the actions | false | fn |
| Name | Type | Description | Required | Default |
|-----------------------|---------|----------------------------------------------------------|-----------|----------|
| actionStyleFactory | func | Create the style of the actions | false | fn |
| activeBarStyleFactory | func | Create the style of the active notification | false | fn |
| barStyleFactory | func | Create the style of the notification | false | fn |
| dismissInOrder | boolean | If false, notification dismiss timers start immediately | false | true |
| notifications | array | Array of notifications to render | true | |
4 changes: 2 additions & 2 deletions docs/guides/styles.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
## Styles

This component uses basic inline CSS to style the position and visibility of the notification.I would suggest reading the usage guidelines for [snackbars](http://www.google.com/design/spec/components/snackbars-toasts.html) before making any changes.
This component uses basic inline CSS to style the position and visibility of the notification. I would suggest reading the usage guidelines for [snackbars](http://www.google.com/design/spec/components/snackbars-toasts.html) before making any changes.

You have two options for adding additional styles:

Expand Down Expand Up @@ -35,7 +35,7 @@ Where `index` is the index of the notification in the notifications array,

This function is used to dynamically set the style of each notification in the
stack. The default function adds the `bottom` style property to correctly
position of the notification in a stack.
position the notification in a stack.

```js
function defaultStyleFactory(index, style, notification) {
Expand Down