Skip to content

Remove redundancy #562

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
Ombuweb wants to merge 9 commits into
base: main
Choose a base branch
from
Open

Remove redundancy #562

Changes from 1 commit
Commits
Show all changes
9 commits
Select commit Hold shift + click to select a range
36bc722
chore: update
Ombuweb Dec 29, 2022
39ecb55
feat(animated-cirlcle): README Added Svelte code snippet
Ombuweb Jan 26, 2023
e6458c0
feat: demo gif
Ombuweb Jan 26, 2023
039ca1c
fix: remove unncessary files
Ombuweb Jan 26, 2023
f8de48d
fix: errors
Ombuweb Jan 27, 2023
48264fd
chore: update
Ombuweb Feb 10, 2023
271fbfb
chore: update
Ombuweb Feb 11, 2023
f3910a1
Merge branch 'main' into docs/readme
NathanWalker Feb 12, 2023
d6bac65
Remove redundancy
Ombuweb Jan 5, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Prev Previous commit
Remove redundancy
  • Loading branch information
@Ombuweb
Ombuweb committed Jan 5, 2024
commit d6bac65f0c9e87531a65a9416585c6faeb9603bd
120 changes: 68 additions & 52 deletions packages/animated-circle/README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,20 +2,21 @@

A plugin that creates a circular progress bar on iOS and Android.

| ![Android animated circle demo video](/packages/animated-circle/images/animated-circle-android.gif) | ![iOS animated circle demo video](/packages/animated-circle/images/animated-circle-ios.gif)
|:--------|:---------
| `Android` | `iOS`
| ![Android animated circle demo video](/packages/animated-circle/images/animated-circle-android.gif) | ![iOS animated circle demo video](/packages/animated-circle/images/animated-circle-ios.gif) |
| :-------------------------------------------------------------------------------------------------- | :------------------------------------------------------------------------------------------ |
| `Android` | `iOS` |

## Contents
* [Installation](#installation)
* [Use @nativescript/animated-circle](#use-nativescriptanimated-circle)
* [Core](#core)
* [Angular](#angular)
* [Vue](#vue)
* [Svelte](#svelte)
* [React](#react)
* [API](#api)
* [License](#license)

- [Installation](#installation)
- [Use @nativescript/animated-circle](#use-nativescriptanimated-circle)
- [Core](#core)
- [Angular](#angular)
- [Vue](#vue)
- [Svelte](#svelte)
- [React](#react)
- [API](#api)
- [License](#license)

## Installation

Expand All @@ -39,7 +40,8 @@ npm install @nativescript/animated-circle
<ui:AnimatedCircle ... />
```

### Core
The result of the previous steps will be the following:

```xml
<Page xmlns="http://schemas.nativescript.org/tns.xsd"
xmlns:ui="@nativescript/animated-circle">
Expand All @@ -61,7 +63,9 @@ npm install @nativescript/animated-circle
textColor="red" />
</Page>
```

---

### Angular

1. Add `NativeScriptAnimatedCircleModule` to the module imports where you want to use the view.
Expand All @@ -76,15 +80,19 @@ imports: [NativeScriptAnimatedCircleModule];
```xml
<AnimatedCircle backgroundColor="transparent" width="200" height="200" animated="true" animateFrom="0" rimColor="#fff000" barColor="#ff4081" rimWidth="25" [progress]="circleProgress" [text]="progress + '%'" textSize="22" textColor="#336699"></AnimatedCircle>
```

---

### Vue

1. Register the view in the `app.ts` file.
1. Register the view in the `app.ts` file.

```ts
import { registerElement } from 'nativescript-vue';

registerElement("AnimatedCircle", ()=> require("@nativescript/animated-circle").AnimatedCircle)
registerElement('AnimatedCircle', () => require('@nativescript/animated-circle').AnimatedCircle);
```

2. Use the view in a `.vue` file.

```xml
Expand All @@ -104,19 +112,23 @@ registerElement("AnimatedCircle", ()=> require("@nativescript/animated-circle").
textSize="28"
textColor="red" />
```

---

### Svelte

1. Register the plugin's view in the `app.ts` file.

```ts
import {registerNativeViewElement} from "svelte-native/dom"
import { registerNativeViewElement } from 'svelte-native/dom';

registerNativeViewElement("animatedCircle", ()=> require("@nativescript/animated-circle").AnimatedCircle)
registerNativeViewElement('animatedCircle', () => require('@nativescript/animated-circle').AnimatedCircle);
```

2. Use the view in markup.

```xml
<animatedCircle
<animatedCircle
backgroundColor="transparent"
width="200"
height="200"
Expand All @@ -132,37 +144,40 @@ registerNativeViewElement("animatedCircle", ()=> require("@nativescript/animated
textColor="red"
/>
```

---

### React

1. Register the plugin's view in the `app.ts` file.

```ts
interface AnimatedCircleAttributes extends ViewAttributes {
progress?: number
animated?: boolean
animateFrom?: number
text?: string
textSize? : number
textColor?: string
rimColor? : string
barColor?: string
rimWidth?: number
clockwise?: boolean
progress?: number;
animated?: boolean;
animateFrom?: number;
text?: string;
textSize?: number;
textColor?: string;
rimColor?: string;
barColor?: string;
rimWidth?: number;
clockwise?: boolean;
}

declare global {
module JSX {
interface IntrinsicElements {

animatedCircle: NativeScriptProps<AnimatedCircleAttributes, AnimatedCircle>
}
}
module JSX {
interface IntrinsicElements {
animatedCircle: NativeScriptProps<AnimatedCircleAttributes, AnimatedCircle>;
}
}
}

registerElement("animatedCircle", ()=> require("@nativescript/animated-circle").AnimatedCircle)

registerElement('animatedCircle', () => require('@nativescript/animated-circle').AnimatedCircle);
```

2. Use the view in markup.

```xml
<stackLayout marginTop={30}>
<animatedCircle
Expand All @@ -182,25 +197,26 @@ registerElement("animatedCircle", ()=> require("@nativescript/animated-circle").
/>
</stackLayout>
```

---
## API Reference

## API Reference

| Property | Type | Default | Description |
| ----------------- |------| ------- | ------------------------------------------------------ |
| `rimColor` | [Color](https://blog.nativescript.org/guide/core/color)| `#FF5722` | The filled portion of the circle border's color. |
| `barColor` |[Color](https://blog.nativescript.org/guide/core/color)| `#3D8FF4` | The remaining (unfilled) portion of the circle border. |
| `rimWidth` | `number` |`5` | The border radius of the circle. |
| `progress` | `number` |`0 ` | The current progress value. |
| `startAngle` | `number` |`0` | The angle to start drawing from. |
| `endAngle` | `number` |`100` | _iOS only_ the end angle to stop drawing at. |
| `animated` | `boolean` |`false` | _Android only_ animation status. |
| `animateFrom` | `number` |`0` | _Android only_ the progress value to animate from. |
| `animationDuration` | `number` |`1000` | _Android only_ the duration to animate for. |
| `text` | `string` |`""` | The text inside of the circle. |
| `textSize ` | `number` |`0` | Text size, 0 will hide the text |
| `textColor` | [Color](https://blog.nativescript.org/guide/core/color) |`#ff0000` | Text color |
| Property | Type | Default | Description |
| ------------------- | ------------------------------------------------------- | --------- | ------------------------------------------------------ |
| `rimColor` | [Color](https://blog.nativescript.org/guide/core/color) | `#FF5722` | The filled portion of the circle border's color. |
| `barColor` | [Color](https://blog.nativescript.org/guide/core/color) | `#3D8FF4` | The remaining (unfilled) portion of the circle border. |
| `rimWidth` | `number` | `5` | The border radius of the circle. |
| `progress` | `number` | `0 ` | The current progress value. |
| `startAngle` | `number` | `0` | The angle to start drawing from. |
| `endAngle` | `number` | `100` | _iOS only_ the end angle to stop drawing at. |
| `animated` | `boolean` | `false` | _Android only_ animation status. |
| `animateFrom` | `number` | `0` | _Android only_ the progress value to animate from. |
| `animationDuration` | `number` | `1000` | _Android only_ the duration to animate for. |
| `text` | `string` | `""` | The text inside of the circle. |
| `textSize ` | `number` | `0` | Text size, 0 will hide the text |
| `textColor` | [Color](https://blog.nativescript.org/guide/core/color) | `#ff0000` | Text color |

## License

Apache License Version 2.0
Apache License Version 2.0