Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/tayeb-ali/io-stepper
Steppers components for Ionic 5,Build beautiful ui
https://github.com/tayeb-ali/io-stepper
angular ionic ionic-framework scss stepper typescript
Last synced: about 1 month ago
JSON representation
Steppers components for Ionic 5,Build beautiful ui
- Host: GitHub
- URL: https://github.com/tayeb-ali/io-stepper
- Owner: Tayeb-Ali
- License: mit
- Created: 2020-10-17T21:03:41.000Z (about 4 years ago)
- Default Branch: main
- Last Pushed: 2023-01-01T14:46:09.000Z (about 2 years ago)
- Last Synced: 2024-11-29T00:17:45.871Z (about 1 month ago)
- Topics: angular, ionic, ionic-framework, scss, stepper, typescript
- Language: TypeScript
- Homepage:
- Size: 130 KB
- Stars: 3
- Watchers: 3
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# ionic-stepper
Steppers components for Ionic 5^.
## Getting Started
- is just re-build ionic Stepper , upgrade all pk , re-code from Angulare2 to 10.
- Help me to upgrade it :) .
### Prerequisites
- `ionic-angular: ^5.x`
### Installing
```sh
npm i io-stepper --save
```
### Usage
import in `your-root.module.ts`
```ts
import { BrowserModule } from '@angular/platform-browser';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { ErrorHandler, NgModule } from '@angular/core';
import { IonicApp, IonicErrorHandler, IonicModule } from 'ionic-angular';
...
import { IonicStepperModule } from 'ionic-stepper';
@NgModule({
...
imports: [
BrowserModule,
BrowserAnimationsModule,
IonicStepperModule,
IonicModule.forRoot(MyApp)
],
...
})
export class AppModule {}
```
`your-component.ts`
```ts
import { Component } from '@angular/core';
import { NavController } from 'ionic-angular';
@Component({
selector: 'page-home',
template: `
Step1 Content
Step1 Content
Next
Step2 Content
Step2 Content
Previous
`
})
export class HomePage {
constructor(public navCtrl: NavController) { }
selectChange(e) {
console.log(e);
}
}
```
## API
### `ion-stepper`
#### property
| Name | Type | Default | Description |
|---------------------|----------------------------|--------------|--------------------|
| [mode] | `'horizontal', 'vertical'` | `'vertical'` | orientation |
| (selectIndexChange) | `EventEmitter` | | index change event |
#### method
| Name | Description |
|---------------------------------|-------------------|
| nextStep(): void | next step |
| previousStep(): void | previous step |
| setStep(index: number): boolean | set step by index |
### `ion-step`
#### property
| Name | Type | Default | Description |
|---------------|---------------|------------|-------------------------------------------------------------------------------------------|
| [label] | `string` | | step label |
| [description] | `string` | | step description (only vertical mode is visible) |
| [icon] | `icon` | `'number'` | step icon, default display the index ([icons](https://ionicframework.com/docs/ionicons/)) |
| [status] | `'error', ''` | `''` | step status |
| [errorIcon] | `string` | `'close'` | error status icon |
### `[ionicStepperNext]`
moves to the next step in the stepper
`Next`
### `[ionicStepperPrevious]`
moves to the previous step in the stepper
`Previous`
## License
This project is licensed under the MIT License - see the [LICENSE](LICENSE) file for details
# ms:
- يلااااااا!