- fixed indentation (2 spaces)
- added missing new lines at the end of files - removed 'ps-theme-big-and-ugly' theme - improved readme.md. Added an example on how to create custom themes with scss.
This commit is contained in:
@@ -309,7 +309,7 @@ The number of pixels the content height can surpass the container height without
|
||||
**Default: 0**
|
||||
|
||||
### stopPropagationOnClick
|
||||
When set to false, when clicking on a rail, the click event will be allowed to propagate.
|
||||
When set to false, when clicking on a rail, the click event will be allowed to pr##opagate.
|
||||
**Default: true**
|
||||
|
||||
### useSelectionScroll
|
||||
@@ -317,29 +317,35 @@ When set to true, you can scroll the container by selecting text and move the cu
|
||||
**Default: false**
|
||||
|
||||
### theme
|
||||
A string. It's a class name added to the container element. The class name is prepended with `ps-theme-`. So default theme class name is `ps-theme-default`. In order to create custom themes with scss use `ps-container($theme)` mixin, where `$theme` is a scss map. Look at `themes.scss` as a reference for how to create custom themes.
|
||||
A string. It's a class name added to the container element. The class name is prepended with `ps-theme-`. So default theme class name is `ps-theme-default`. In order to create custom themes with scss use `ps-container($theme)` mixin, where `$theme` is a scss map.
|
||||
**Default: 'default'**
|
||||
|
||||
Example:
|
||||
**Example 1:**
|
||||
|
||||
Add `theme` parameter:
|
||||
```javascript
|
||||
Ps.initialize(container, {
|
||||
theme: 'my-theme-name',
|
||||
theme: 'my-theme-name'
|
||||
});
|
||||
```
|
||||
|
||||
```css
|
||||
Create a class name prefixed with `.ps-theme-`. Include `ps-container()` mixin. It's recommended to use `map-merge()` to extend `$ps-theme-default` map with your custom styles.
|
||||
```css#
|
||||
.ps-theme-my-theme-name {
|
||||
@include ps-container(map-merge($ps-theme-default, (
|
||||
border-radius: 0,
|
||||
scrollbar-x-rail-height: 20px,
|
||||
scrollbar-x-height: 20px,
|
||||
scrollbar-y-rail-width: 20px,
|
||||
scrollbar-y-width: 20px,)
|
||||
border-radius: 0,
|
||||
scrollbar-x-rail-height: 20px,
|
||||
scrollbar-x-height: 20px,
|
||||
scrollbar-y-rail-width: 20px,
|
||||
scrollbar-y-width: 20px,)
|
||||
));
|
||||
}
|
||||
```
|
||||
|
||||
**Example 2:**
|
||||
|
||||
Alternatively, if you don't want to create your own themes, but only modify the default one, you could simply overwrite `$ps-*` variables with your own values. In this case `theme` parameter is not required when calling `.initialize()` method. Remember do define your own variables before the `theme.scss` file is imported.
|
||||
|
||||
|
||||
## Events
|
||||
|
||||
perfect-scrollbar dispatches custom events.
|
||||
|
||||
Reference in New Issue
Block a user