mgechev / Ngresizable
Simple, tree-shakable, AoT, Universal and Web Worker friendly resizable component for Angular (2 and beyond).
Stars: β 118
Programming Languages
typescript
32286 projects
Projects that are alternatives of or similar to Ngresizable
vue-smart-widget
ποΈSmart widget is a flexible and extensible content container component for Vue2.x / Vue3.x in Next branch.
Stars: β 110 (-6.78%)
Mutual labels: widget, resizable
Evntouchiddemo
π iOS fingerprint login process implementation
Stars: β 98 (-16.95%)
Mutual labels: widget
Bubble Navigation
π [Android Library] A light-weight library to easily make beautiful Navigation Bar with ton of π¨ customization option.
Stars: β 1,537 (+1202.54%)
Mutual labels: widget
Material Bottomnavigation
Bottom Navigation widget component inspired by the Google Material Design Guidelines at https://www.google.com/design/spec/components/bottom-navigation.html
Stars: β 1,375 (+1065.25%)
Mutual labels: widget
Responsible Ai Widgets
This project provides responsible AI user interfaces for Fairlearn, interpret-community, and Error Analysis, as well as foundational building blocks that they rely on.
Stars: β 107 (-9.32%)
Mutual labels: widget
Windows Hangul Clock
Hangul Clock for Windows Desktop Widget
Stars: β 118 (+0%)
Mutual labels: widget
Stackexpandableview
A custom view that resembles the iOS notification group behavior
Stars: β 112 (-5.08%)
Mutual labels: widget
Tkdotsegment
TKDotSegment is a segment with dot animation
Stars: β 103 (-12.71%)
Mutual labels: widget
Drag select grid view
A grid that supports both dragging and tapping to select its items.
Stars: β 100 (-15.25%)
Mutual labels: widget
Flutter crop
Crop any widget/image in Android, iOS, Web and Desktop with fancy and customizable UI, in pure Dart code.
Stars: β 107 (-9.32%)
Mutual labels: widget
React Autocomplete Input
Autocomplete input field for React
Stars: β 100 (-15.25%)
Mutual labels: widget
Slidingdrawer
SlidingDrawer hides content out of the screen and allows the user to drag a handle to bring the content on screen.
Stars: β 94 (-20.34%)
Mutual labels: widget
Socialcount
Unmaintained (see the README): Simple barebones project to show share counts from various social networks.
Stars: β 1,382 (+1071.19%)
Mutual labels: widget
Todayflights
TodayFlights is a Notification Center widget that allows you to track flights using the 'FlightUtilities' macOS system framework.
Stars: β 118 (+0%)
Mutual labels: widget
Ka Table
Lightweight MIT React Table component for both TS and JS with Sorting, Filtering, Grouping, Virtualization, Editing and many more
Stars: β 117 (-0.85%)
Mutual labels: widget
Angular Resizable
Simple, tree-shakable, AoT, Universal and Web Worker friendly resizable component for Angular (4 and beyond).
For version compatible with Angular 2 install 0.1.2
.
Supports the following values of the position
CSS property:
-
absolute
. -
relative
.
How to use?
$ npm i ngresizable --save
API
Outputs
-
resizeStart: EventEmitter<IResizeEvent>
- Resize start event. -
resizing: EventEmitter<IResizeEvent>
- Resizing event. -
resizeEnd: EventEmitter<IResizeEvent>
- Resize end event.
Inputs
-
width
- Width of the element number. -
height: number
- Height of the element. -
x: number
- x coordinate of the element. -
y: number
- y coordinate of the element. -
maxWidth: number
- Maximum width. DefaultInfinity
. -
minWidth: number
- Minimum width. Default0
. -
maxHeight: number
- Maximum height. DefaultInfinity
. -
minHeight: number
- Minimum height. Default0
. -
disableResize: boolean = false
- Disable the resize. -
directions: string[]
- An array which contains the resize directions. Default['bottom', 'right']
. -
grid: ISize
- Resize in a grid. Default{ width: 1, height: 1 }
. -
bound: IRectangle
- Bound the resize. -
ratio: number
- Resize ratio.
Integration
Should work out of the box with webpack, respectively angular-cli. All you need to do is to include NgResizableModule
:
import { NgResizableModule } from 'ngresizable';
@NgModule({
imports: [NgResizableModule],
...
})
class AppModule {}
Angular Seed
// tools/config/project.ts
...
// Add packages (e.g. ngresizable)
let additionalPackages: ExtendPackages[] = [{
name: 'ngresizable',
path: 'node_modules/ngresizable/ngresizable.bundle.js'
}];
this.addPackagesBundles(additionalPackages);
...
License
MIT
Note that the project description data, including the texts, logos, images, and/or trademarks,
for each open source project belongs to its rightful owner.
If you wish to add or remove any projects, please contact us at [email protected].