Security News
tea.xyz Spam Plagues npm and RubyGems Package Registries
Tea.xyz, a crypto project aimed at rewarding open source contributions, is once again facing backlash due to an influx of spam packages flooding public package registries.
ember-resizable
Advanced tools
Changelog
[3.0.1] - 2023-01-16
@ember/string
as a dependency to fix Ember 4.10+ deprecation warningsReadme
Resizable component for Ember. (Demo)
This is largely inspired by/based on re-resizable.
ember install ember-resizable
Include the following in your app.scss:
@import 'ember-resizable';
Basic usage:
<ReSizable @width="300" @height="200">
Your Content
</ReSizable>
This will make <ReSizable>
adjust its size according to user input. If you want to manually control its size, bind to onResize
while not setting width
and height
. Manually setting width
, height
between resizes is of course also possible.
Property | default | Type | Notes |
---|---|---|---|
width | null | int or string | Initial size. If provided the component will adjust its size according to user input. If omitted or null it will not change its size. This is a one way binding nevertheless. |
height | null | int or string | Initial size. If provided the component will adjust its size according to user input. If omitted or null it will not change its size. This is a one way binding nevertheless. |
minWidth | 10 | int | Minimum width in pixels |
minHeight | 10 | int | Minimum height in pixels |
maxWidth | int | Maximum width in pixels | |
maxHeight | int | Maximum height in pixels | |
grid | [1, 1] | array: int | Used for snapping on x, y axis. If set to [200, 50] for example, width will snap to 0, 200, 400, 600, … while height will snap to 0, 50, 100, 150, … |
lockAspectRatio | false | bool | Maintain aspect ratio that is found during beginning of resize |
directions | ['top', 'right', 'bottom', 'left', 'topRight', 'bottomRight', 'bottomLeft', 'topLeft'] | array: string | On which sides/corners to enable resizing |
Name | Params | Note |
---|---|---|
onResizeStart | direction , event , element | element is the <ReSizable> DOM element |
onResizeStop | direction , { width: deltaX, height: deltaY } , element | If you did not adjust the size of <ReSizable> by changing its dimension and if you did not provide width /height using for e.g. the values provided by onResize deltaX and deltaY will be 0 |
onResize | direction , { width: newWidth, height: newHeight } , { width: deltaX, height: deltaY } , element | . |
In addition it is possible to adjust the size of the resize handlers in your scss:
// 10px is the default size
$ember-resizable-resizer-size: 10px;
See the Contributing guide for details.
This project is licensed under the MIT License.
FAQs
Resizable component for Ember.
The npm package ember-resizable receives a total of 70 weekly downloads. As such, ember-resizable popularity was classified as not popular.
We found that ember-resizable demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 2 open source maintainers collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
Tea.xyz, a crypto project aimed at rewarding open source contributions, is once again facing backlash due to an influx of spam packages flooding public package registries.
Security News
As cyber threats become more autonomous, AI-powered defenses are crucial for businesses to stay ahead of attackers who can exploit software vulnerabilities at scale.
Security News
UnitedHealth Group disclosed that the ransomware attack on Change Healthcare compromised protected health information for millions in the U.S., with estimated costs to the company expected to reach $1 billion.