https://github.com/gwleuverink/blade-shape-divider
A complete port of shapedivider.app for Laravel Blade
https://github.com/gwleuverink/blade-shape-divider
Last synced: 3 months ago
JSON representation
A complete port of shapedivider.app for Laravel Blade
- Host: GitHub
- URL: https://github.com/gwleuverink/blade-shape-divider
- Owner: gwleuverink
- License: mit
- Created: 2020-08-16T10:36:12.000Z (almost 5 years ago)
- Default Branch: master
- Last Pushed: 2023-04-16T17:08:45.000Z (about 2 years ago)
- Last Synced: 2025-02-27T22:20:12.809Z (3 months ago)
- Language: PHP
- Homepage:
- Size: 130 KB
- Stars: 41
- Watchers: 4
- Forks: 3
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- Contributing: CONTRIBUTING.md
- License: LICENSE.md
Awesome Lists containing this project
README
# Blade shape divider
[](https://packagist.org/packages/leuverink/blade-shape-divider)
A complete port of [shapedivider.app](https://shapedivider.app) for Laravel Blade
## Installation
Laravel 7.0 or higher is required.
You can install the package via composer:
``` bash
composer require leuverink/blade-shape-divider
```
## Usage
``` html
```
*Just like the original, this component needs to be in a container with `position: relative` in order to work properly.*
### Customization
Head over to [shapedivider.app](https://shapedivider.app) and create a shape you like. Settings can be passed as props. When you're happy with the shape divider you created, simply copy over it's settings like the example below.
``` html
```
You may use any of these divider shapes:
`waves`, `waves-opacity`, `curve`, `curve-asymmetrical`, `triangle`, `triangle-asymmetrical`, `tilt`, `arrow`, `split` & `book`
### Changing divider color
You may pass any valid color code as the `fill` prop. By default the fill is set to `currentColor`, which means the divider inherits the current font color by default. If you want to use a css class to provide the fill color you may do so:
``` html
```
### Prop defaults
Component props have the following defaults. If your shape uses any of the defaults they don't have to be passed as props.
| name | type | default | available options | example value |
|---|---|---|---|---|
| shape | string | `null` (required) | waves, waves-opacity, curve, curve-asymmetrical, triangle, triangle-asymmetrical, tilt, arrow, split & book | `shape="waves"` |
| fill | `string` | `currentColor` | Accepts any valid color code. Inherits font color by default | `fill="rgba(255, 138, 0, 0.7)"` |
| flip | boolean | `false` | `true\|false` | `:flip="true"` |
| invert | boolean | `false` | `true\|false` | `:invert="true"` |
| position | string | `top` | `top\|bottom` | `position="bottom"` |
| height | string | `150px` | - | `height="200px"` |
| width | string | `100%` | - | `width="260%"` |
### Changelog
Please see [CHANGELOG](CHANGELOG.md) for more information what has changed recently.
## Contributing
This port should be pretty much complete. Any new features not available in the original [shapedivider.app](https://shapedivider.app) fall outside the scope of this project and will not be merged.
Improvements to the API & bugfixes are very welcome :)
Please see [CONTRIBUTING](CONTRIBUTING.md) for details.
### Security
If you discover any security related issues, please email [email protected] instead of using the issue tracker.
## Credits
- [True Style Design (creators of shapedivider.app)](https://truestyledesign.co.uk)
- [Willem Leuverink](https://github.com/gwleuverink)
- [All Contributors](../../contributors)
## License
The MIT License (MIT). Please see [License File](LICENSE.md) for more information.