🍕 Ionic 4 UI Component Library. Featuring Image Gallery, Refresher, Bottom Sheet and more.
Home Page: https://fivethree-team.github.io/ionic-4-components
License: MIT License
Hi there,
is there a way for using ngx-translate with Feature Discovery? Neither translate directive nor translate pipe seems to be working inside the template (angular related I guess, since the Feature Discovery Module is not loading the Translate module (obviously)).
Data binding is not working either since createEmbeddedView is getting called with null as parameter, so no context available. I cannot figure out how to create i18n feature tours...
Thank you.
Describe the Feature Request
Support adding/removing fiv-gallery-image dynamically in the below use case
<fiv-gallery #gallery>
<ion-slides>
<ion-slide *ngFor="let photoDraft of recipePhotoDrafts">
<div>
<fiv-gallery-image [src]="photoDraft.thumbnailAsBase64"></fiv-gallery-image>
</div>
</ion-slide>
</ion-slides>
</fiv-gallery>
Right now, new photos/images added are displayed but clicking on them does not open a preview. My assumption is that this is because images QueryList is not subscribed for changes and the fiv-gallery does not take into account if image(s) are added/removed.
Describe Preferred Solution
The dynamically added images must support click to open a preview.
Describe Alternatives
Subscribe to images QueryList changes and handle them accordingly. Right now I have to use showGallery flag and toggle it off and on to accomodate the changes but this makes the component to flicker when it is re-rendered.
<fiv-gallery #gallery *ngIf="showGallery === true">
<ion-slides>
<ion-slide *ngFor="let photoDraft of recipePhotoDrafts">
<div>
<fiv-gallery-image [src]="photoDraft.thumbnailAsBase64"></fiv-gallery-image>
</div>
</ion-slide>
</ion-slides>
</fiv-gallery>
Related Code
See above
Additional Context
N/A
I was doing a demo with feature discovery and I was throwing the following error
Error: No component factory found for FivFeatureDiscovery. Did you add it to @NgModule.entryComponents?
and literally copy the following code from your project
Fivethree version:
[x] 0.9.x
Current behavior:
Expected behavior:
The popover animation is supposed to be at least as smooth as the default ionic popover.
Steps to reproduce:
A simple installation of the package in a new ionic 5 project, then import the popover component into a page.
Related code:
<ion-fab vertical="bottom" horizontal="end" slot="fixed" color = "primary" (click) = "dialog.open()">
<fiv-icon #feature = "fivFeature" [fivFeature] = "content" name = "add">
<ng-template #content>
Click this button to add contacts
insert short code snippets here
After updating from 0.8.9 to 1.0.0-alpha.24 (huge jump I know), The horizontal mode has stopped working. To confirm this I downgraded back to 0.8.9 to see it working again (with many errors since it's out of date with my environment: Angular 9, Ionic 5).
Please reach out to me when you look into this and if/when it's resolved.
Thanks!
Fivethree version:
"@fivethree/core": "^1.0.0-alpha.24",
Current behavior:
core.js:15714 ERROR Error: Uncaught (in promise): TypeError: Object(...) is not a function
TypeError: Object(...) is not a function
at fivethree-core.js:464
at Module../node_modules/@fivethree/core/fesm5/fivethree-core.js (fivethree-core.js:466)
at webpack_require (bootstrap:83)
at Module../src/app/pages/home-detail/home-detail.module.ts (fivethree-ngx-rxjs-animations.js:1881)
at webpack_require (bootstrap:83)
at $_lazy_route_resource lazy namespace object:93
at ZoneDelegate.push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invoke (zone.js:391)
at Object.onInvoke (core.js:17289)
at ZoneDelegate.push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invoke (zone.js:390)
at Zone.push../node_modules/zone.js/dist/zone.js.Zone.run (zone.js:150)
at resolvePromise (zone.js:831)
at resolvePromise (zone.js:788)
at zone.js:892
at ZoneDelegate.push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invokeTask (zone.js:423)
at Object.onInvokeTask (core.js:17280)
at ZoneDelegate.push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invokeTask (zone.js:422)
at Zone.push../node_modules/zone.js/dist/zone.js.Zone.runTask (zone.js:195)
at drainMicroTaskQueue (zone.js:601)
defaultErrorLogger @ core.js:15714
push../node_modules/@angular/core/fesm5/core.js.ErrorHandler.handleError @ core.js:15762
next @ core.js:17761
schedulerFn @ core.js:13504
push../node_modules/rxjs/_esm5/internal/Subscriber.js.SafeSubscriber.__tryOrUnsub @ Subscriber.js:192
push../node_modules/rxjs/_esm5/internal/Subscriber.js.SafeSubscriber.next @ Subscriber.js:130
push../node_modules/rxjs/_esm5/internal/Subscriber.js.Subscriber._next @ Subscriber.js:76
push../node_modules/rxjs/_esm5/internal/Subscriber.js.Subscriber.next @ Subscriber.js:53
push../node_modules/rxjs/_esm5/internal/Subject.js.Subject.next @ Subject.js:47
push../node_modules/@angular/core/fesm5/core.js.EventEmitter.emit @ core.js:13488
(anonymous) @ core.js:17311
push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invoke @ zone.js:391
push../node_modules/zone.js/dist/zone.js.Zone.run @ zone.js:150
push../node_modules/@angular/core/fesm5/core.js.NgZone.runOutsideAngular @ core.js:17248
onHandleError @ core.js:17311
push../node_modules/zone.js/dist/zone.js.ZoneDelegate.handleError @ zone.js:395
push../node_modules/zone.js/dist/zone.js.Zone.runGuarded @ zone.js:164
_loop_1 @ zone.js:694
api.microtaskDrainDone @ zone.js:703
drainMicroTaskQueue @ zone.js:608
Promise.then (async)
scheduleMicroTask @ zone.js:584
push../node_modules/zone.js/dist/zone.js.ZoneDelegate.scheduleTask @ zone.js:413
onScheduleTask @ zone.js:301
push../node_modules/zone.js/dist/zone.js.ZoneDelegate.scheduleTask @ zone.js:404
push../node_modules/zone.js/dist/zone.js.Zone.scheduleTask @ zone.js:238
push../node_modules/zone.js/dist/zone.js.Zone.scheduleMicroTask @ zone.js:258
scheduleResolveOrReject @ zone.js:879
resolvePromise @ zone.js:825
(anonymous) @ zone.js:741
webpackJsonpCallback @ bootstrap:25
(anonymous) @ home-detail-home-detail-module.js:1
core.js:15714 ERROR Error: Uncaught (in promise): Error: Cannot find 'HomeDetailPageModule' in './pages/home-detail/home-detail.module'
Error: Cannot find 'HomeDetailPageModule' in './pages/home-detail/home-detail.module'
at checkNotEmpty (core.js:18286)
at core.js:18263
at ZoneDelegate.push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invoke (zone.js:391)
at Object.onInvoke (core.js:17289)
at ZoneDelegate.push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invoke (zone.js:390)
at Zone.push../node_modules/zone.js/dist/zone.js.Zone.run (zone.js:150)
at zone.js:889
at ZoneDelegate.push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invokeTask (zone.js:423)
at Object.onInvokeTask (core.js:17280)
at ZoneDelegate.push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invokeTask (zone.js:422)
at resolvePromise (zone.js:831)
at resolvePromise (zone.js:788)
at zone.js:892
at ZoneDelegate.push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invokeTask (zone.js:423)
at Object.onInvokeTask (core.js:17280)
at ZoneDelegate.push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invokeTask (zone.js:422)
at Zone.push../node_modules/zone.js/dist/zone.js.Zone.runTask (zone.js:195)
at drainMicroTaskQueue (zone.js:601)
at ZoneTask.push../node_modules/zone.js/dist/zone.js.ZoneTask.invokeTask [as invoke] (zone.js:502)
at invokeTask (zone.js:1744)
Add snippets for each component https://github.com/fivethree-team/vscode-fivethree-snippets
The library is currently not production ready. @marcjulian and me have planned to include full component docs and tests before we release version 1.0.0.
PRs and feedback is always appreciated!
I'm trying to use the library in IONIC 5. Follow the installation step by step but when trying to use some feature modules (e.g. FivGalleryModule) into a Page the following error appears:
core.js:38781 Angular is running in the development mode. Call enableProdMode() to enable the production mode.
common.js:290 Native: tried calling StatusBar.styleDefault, but Cordova is not available. Make sure to include cordova.js or run in a device/simulator
cordovaWarn @ common.js:290
checkAvailability @ common.js:146
callCordovaPlugin @ common.js:232
(anonymous) @ common.js:315
cordova @ cordova.js:3
push../node_modules/@ionic-native/status-bar/ngx/index.js.StatusBar.styleDefault @ index.js:10
(anonymous) @ app.component.ts:22
invoke @ zone-evergreen.js:359
onInvoke @ core.js:39699
invoke @ zone-evergreen.js:358
run @ zone-evergreen.js:124
(anonymous) @ zone-evergreen.js:855
invokeTask @ zone-evergreen.js:391
onInvokeTask @ core.js:39680
invokeTask @ zone-evergreen.js:390
runTask @ zone-evergreen.js:168
drainMicroTaskQueue @ zone-evergreen.js:559
Promise.then (async)
scheduleMicroTask @ zone-evergreen.js:542
scheduleTask @ zone-evergreen.js:381
scheduleTask @ zone-evergreen.js:211
scheduleMicroTask @ zone-evergreen.js:231
scheduleResolveOrReject @ zone-evergreen.js:845
then @ zone-evergreen.js:955
bootstrapModule @ core.js:40600
./src/main.ts @ main.ts:11
__webpack_require__ @ bootstrap:83
0 @ main.ts:12
__webpack_require__ @ bootstrap:83
checkDeferredModules @ bootstrap:44
webpackJsonpCallback @ bootstrap:31
(anonymous) @ main.js:1
common.js:290 Native: tried calling SplashScreen.hide, but Cordova is not available. Make sure to include cordova.js or run in a device/simulator
cordovaWarn @ common.js:290
checkAvailability @ common.js:146
callCordovaPlugin @ common.js:232
(anonymous) @ common.js:315
cordova @ cordova.js:3
push../node_modules/@ionic-native/splash-screen/ngx/index.js.SplashScreen.hide @ index.js:10
(anonymous) @ app.component.ts:23
invoke @ zone-evergreen.js:359
onInvoke @ core.js:39699
invoke @ zone-evergreen.js:358
run @ zone-evergreen.js:124
(anonymous) @ zone-evergreen.js:855
invokeTask @ zone-evergreen.js:391
onInvokeTask @ core.js:39680
invokeTask @ zone-evergreen.js:390
runTask @ zone-evergreen.js:168
drainMicroTaskQueue @ zone-evergreen.js:559
Promise.then (async)
scheduleMicroTask @ zone-evergreen.js:542
scheduleTask @ zone-evergreen.js:381
scheduleTask @ zone-evergreen.js:211
scheduleMicroTask @ zone-evergreen.js:231
scheduleResolveOrReject @ zone-evergreen.js:845
then @ zone-evergreen.js:955
bootstrapModule @ core.js:40600
./src/main.ts @ main.ts:11
__webpack_require__ @ bootstrap:83
0 @ main.ts:12
__webpack_require__ @ bootstrap:83
checkDeferredModules @ bootstrap:44
webpackJsonpCallback @ bootstrap:31
(anonymous) @ main.js:1
core.js:6014 ERROR Error: Uncaught (in promise): Error: Template parse errors:
Parser Error: Unexpected token # at column 1 in [#gallery.close()] in ng:///HomePageModule/HomePage.html@20:29 ("
<ion-toolbar color="transparent">
<ion-buttons slot="end">
<ion-button (click)="[ERROR ->]#gallery.close()">
<ion-icon slot="icon-only" name="close"></ion-icon>
</ion-button"): ng:///HomePageModule/HomePage.html@20:29
Empty expressions are not allowed ("
<ion-toolbar color="transparent">
<ion-buttons slot="end">
<ion-button (click)="[ERROR ->]#gallery.close()">
<ion-icon slot="icon-only" name="close"></ion-icon>
</ion-button"): ng:///HomePageModule/HomePage.html@20:29
Parser Error: Unexpected token # at column 1 in [#gallery.close()] in ng:///HomePageModule/HomePage.html@20:29 ("
</ion-toolbar>
</fiv-gallery-toolbar>
<fiv-gallery-image [src]="[ERROR ->]image"></fiv-gallery-image>
</fiv-gallery>
"): ng:///HomePageModule/HomePage.html@26:28
Parser Error: Unexpected token # at column 1 in [#gallery.close()] in ng:///HomePageModule/HomePage.html@20:29 ("
</fiv-gallery>
[ERROR ->]<fiv-gallery #gallery>
<fiv-gallery-image [src]="image"></fiv-gallery-image>
<fiv-gallery-toolbar"): ng:///HomePageModule/HomePage.html@29:0, Directive FivGallery
Parser Error: Unexpected token # at column 1 in [#gallery.close()] in ng:///HomePageModule/HomePage.html@20:29 ("
<fiv-gallery #gallery>
<fiv-gallery-image [src]="[ERROR ->]image"></fiv-gallery-image>
<fiv-gallery-toolbar position="bottom">
<ion-toolbar color="transpa"): ng:///HomePageModule/HomePage.html@30:28
Parser Error: Unexpected token # at column 1 in [#gallery.close()] in ng:///HomePageModule/HomePage.html@20:29 ("
<ion-toolbar color="transparent">
<ion-buttons slot="end">
<ion-button (click)="[ERROR ->]gallery.close()">
Close
</ion-button>
"): ng:///HomePageModule/HomePage.html@34:29
Parser Error: Unexpected token # at column 1 in [#gallery.close()] in ng:///HomePageModule/HomePage.html@20:29 ("
</fiv-gallery>
[ERROR ->]<fiv-gallery #gallery>
<fiv-gallery-toolbar position="top">
<ion-toolbar color="transparent">
"): ng:///HomePageModule/HomePage.html@42:0, Directive FivGallery
Parser Error: Unexpected token # at column 1 in [#gallery.close()] in ng:///HomePageModule/HomePage.html@20:29 ("
<ion-toolbar color="transparent">
<ion-buttons slot="end">
<ion-button (click)="[ERROR ->]#gallery.close()">
<ion-icon slot="icon-only" name="close"></ion-icon>
</ion-button"): ng:///HomePageModule/HomePage.html@46:29
Parser Error: Unexpected token # at column 1 in [#gallery.close()] in ng:///HomePageModule/HomePage.html@46:29 ("
<ion-toolbar color="transparent">
<ion-buttons slot="end">
<ion-button (click)="[ERROR ->]#gallery.close()">
<ion-icon slot="icon-only" name="close"></ion-icon>
</ion-button"): ng:///HomePageModule/HomePage.html@46:29
Empty expressions are not allowed ("
<ion-toolbar color="transparent">
<ion-buttons slot="end">
<ion-button (click)="[ERROR ->]#gallery.close()">
<ion-icon slot="icon-only" name="close"></ion-icon>
</ion-button"): ng:///HomePageModule/HomePage.html@46:29
Parser Error: Unexpected token # at column 1 in [#gallery.close()] in ng:///HomePageModule/HomePage.html@20:29 ("
</ion-toolbar>
</fiv-gallery-toolbar>
<fiv-gallery-image [src]="[ERROR ->]image"></fiv-gallery-image>
<fiv-gallery-toolbar position="bottom">
<ion-toolbar color="transpa"): ng:///HomePageModule/HomePage.html@52:28
Parser Error: Unexpected token # at column 1 in [#gallery.close()] in ng:///HomePageModule/HomePage.html@46:29 ("
</ion-toolbar>
</fiv-gallery-toolbar>
<fiv-gallery-image [src]="[ERROR ->]image"></fiv-gallery-image>
<fiv-gallery-toolbar position="bottom">
<ion-toolbar color="transpa"): ng:///HomePageModule/HomePage.html@52:28
Parser Error: Unexpected token # at column 1 in [#gallery.close()] in ng:///HomePageModule/HomePage.html@20:29 ("
<ion-toolbar color="transparent">
<ion-buttons slot="end">
<ion-button (click)="[ERROR ->]gallery.close()">
Close
</ion-button>
"): ng:///HomePageModule/HomePage.html@56:29
Parser Error: Unexpected token # at column 1 in [#gallery.close()] in ng:///HomePageModule/HomePage.html@46:29 ("
<ion-toolbar color="transparent">
<ion-buttons slot="end">
<ion-button (click)="[ERROR ->]gallery.close()">
Close
</ion-button>
"): ng:///HomePageModule/HomePage.html@56:29
Reference "#gallery" is defined several times ("
</fiv-gallery>
<fiv-gallery [ERROR ->]#gallery>
<fiv-gallery-toolbar-content></fiv-gallery-toolbar-content>
<fiv-gallery-image [src]="i"): ng:///HomePageModule/HomePage.html@4:13
Reference "#gallery" is defined several times ("
</fiv-gallery>
<fiv-gallery [ERROR ->]#gallery>
<fiv-gallery-toolbar position="top">
<!-- ancompiler.js:2175)
at TemplateParser.parse (compiler.js:11388)
at JitCompiler._parseTemplate (compiler.js:25963)
at JitCompiler._compileTemplate (compiler.js:25951)
at compiler.js:25895
at Set.forEach (<anonymous>)
at JitCompiler._compileComponents (compiler.js:25895)
at compiler.js:25808
at Object.then (compiler.js:2166)
at JitCompiler._compileModuleAndComponents (compiler.js:25807)
at resolvePromise (zone-evergreen.js:797)
at resolvePromise (zone-evergreen.js:754)
at zone-evergreen.js:858
at ZoneDelegate.invokeTask (zone-evergreen.js:391)
at Object.onInvokeTask (core.js:39680)
at ZoneDelegate.invokeTask (zone-evergreen.js:390)
at Zone.runTask (zone-evergreen.js:168)
at drainMicroTaskQueue (zone-evergreen.js:559)
My app.module.ts
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { RouteReuseStrategy } from '@angular/router';
import { IonicModule, IonicRouteStrategy } from '@ionic/angular';
import { SplashScreen } from '@ionic-native/splash-screen/ngx';
import { StatusBar } from '@ionic-native/status-bar/ngx';
import { AppComponent } from './app.component';
import { AppRoutingModule } from './app-routing.module';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
@NgModule({
declarations: [AppComponent],
entryComponents: [],
imports: [BrowserModule, IonicModule.forRoot(), AppRoutingModule, BrowserAnimationsModule],
providers: [
StatusBar,
SplashScreen,
{ provide: RouteReuseStrategy, useClass: IonicRouteStrategy }
],
bootstrap: [AppComponent]
})
export class AppModule {}
My home.module.ts
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { IonicModule } from '@ionic/angular';
import { FormsModule } from '@angular/forms';
import { HomePage } from './home.page';
import { HomePageRoutingModule } from './home-routing.module';
import { FivGalleryModule } from '@fivethree/core';
@NgModule({
imports: [
CommonModule,
FormsModule,
IonicModule,
HomePageRoutingModule,
FivGalleryModule,
],
declarations: [HomePage]
})
export class HomePageModule {}
My home.page.html
<fiv-gallery #gallery>
<fiv-gallery-image [src]="image"></fiv-gallery-image>
</fiv-gallery>
<fiv-gallery #gallery>
<fiv-gallery-toolbar-content></fiv-gallery-toolbar-content>
<fiv-gallery-image [src]="image"></fiv-gallery-image>
</fiv-gallery>
<fiv-gallery #gallery>
<fiv-gallery-toolbar position="top">
<!-- any custom content -->
</fiv-gallery-toolbar>
<fiv-gallery-image [src]="image"></fiv-gallery-image>
</fiv-gallery>
<fiv-gallery #gallery>
<fiv-gallery-toolbar position="top">
<ion-toolbar color="transparent">
<ion-buttons slot="end">
<ion-button (click)="#gallery.close()">
<ion-icon slot="icon-only" name="close"></ion-icon>
</ion-button>
</ion-buttons>
</ion-toolbar>
</fiv-gallery-toolbar>
<fiv-gallery-image [src]="image"></fiv-gallery-image>
</fiv-gallery>
<fiv-gallery #gallery>
<fiv-gallery-image [src]="image"></fiv-gallery-image>
<fiv-gallery-toolbar position="bottom">
<ion-toolbar color="transparent">
<ion-buttons slot="end">
<ion-button (click)="gallery.close()">
Close
</ion-button>
</ion-buttons>
</ion-toolbar>
</fiv-gallery-toolbar>
</fiv-gallery>
<fiv-gallery #gallery>
<fiv-gallery-toolbar position="top">
<ion-toolbar color="transparent">
<ion-buttons slot="end">
<ion-button (click)="#gallery.close()">
<ion-icon slot="icon-only" name="close"></ion-icon>
</ion-button>
</ion-buttons>
</ion-toolbar>
</fiv-gallery-toolbar>
<fiv-gallery-image [src]="image"></fiv-gallery-image>
<fiv-gallery-toolbar position="bottom">
<ion-toolbar color="transparent">
<ion-buttons slot="end">
<ion-button (click)="gallery.close()">
Close
</ion-button>
</ion-buttons>
</ion-toolbar>
</fiv-gallery-toolbar>
</fiv-gallery>e
Fivethree version:
[x] 0.9.x
Current behavior:
New Ionic 5 project with tabs boilerplate. Replace the pre-created tabs with the FivAppBarModule tabs. The page is loaded with the tabs bar but not content. Also the fiv-icons trigger erros in the console.
Expected behavior:
It should look like the example.
Steps to reproduce:
Create new Ionic 5 project, tabs template and follow the tutorial
Add missing readme docs for each component
Fivethree version:
[x] 1.0.0-alpha.11
Current behavior:
I have followed the documentaion and added a simple feature discovery but its not working
Expected behavior:
The feature discovery should appear from component
Related code:
<ion-tab-button class="logo-animator-container" (click)="onTabClicked('search')" #feature="fivFeature" [fivFeature]="fabContent">
<div #logoAnimContainer></div>
</ion-tab-button>
and in component:
@ViewChild('feature', { static: false }) feature: FivFeature;
ngAfterViewInit() {
//display walkthrough
setTimeout(() => {
console.log(this.feature)
this.feature.show();
}, 3000)
}
Error:
core.js:7376 ERROR TypeError: Cannot read property 'nativeElement' of undefined
at FivFeatureDiscovery.setBounds (fivethree-core.js:4590)
at FivFeature.show (fivethree-core.js:4880)
at home.page.ts:39
at ZoneDelegate.push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invokeTask (zone.js:423)
at Object.onInvokeTask (core.js:26760)
at ZoneDelegate.push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invokeTask (zone.js:422)
at Zone.push../node_modules/zone.js/dist/zone.js.Zone.runTask (zone.js:195)
at push../node_modules/zone.js/dist/zone.js.ZoneTask.invokeTask (zone.js:498)
at ZoneTask.invoke (zone.js:487)
at timer (zone.js:3070)
Fivethree version:
"@fivethree/core": "^1.0.0-alpha.2",
Current behavior:
template fails
Expected behavior:
I know the template is displayed
Steps to reproduce:
Import FivAppBarModule into the page or component:
and add the documentation code
Related code:
1. If 'fiv-icon' is an Angular component, then verify that it is part of this module.
2. If 'fiv-icon' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message. ("-bar slot="bottom" titleMode="titleMode" #bar>
<fiv-fab fivAppBarFab="position" #fab>
[ERROR ->]<fiv-icon name="color-wand"></fiv-icon>
</fiv-fab>
"): ng:///HomePageModule/HomePage.html@144:8
'fiv-fab' is not a known element:
1. If 'fiv-fab' is an Angular component, then verify that it is part of this module.
2. If 'fiv-fab' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message. ("
<ion-tabs #tabs>
<fiv-app-bar slot="bottom" titleMode="titleMode" #bar>
[ERROR ->]<fiv-fab fivAppBarFab="position" #fab>
<fiv-icon name="color-wand"></fiv-icon>
</fiv-fa"): ng:///HomePageModule/HomePage.html@143:6
'fiv-icon' is not a known element:
1. If 'fiv-icon' is an Angular component, then verify that it is part of this module.
2. If 'fiv-icon' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message. ("
<fiv-app-bar-tab left tab="tab1" href="/tab1">
[ERROR ->]<fiv-icon name="md-home"></fiv-icon>
<ion-label>Home</ion-label>
</fiv-app-bar-tab>
"): ng:///HomePageModule/HomePage.html@148:8
'fiv-icon' is not a known element:
1. If 'fiv-icon' is an Angular component, then verify that it is part of this module.
2. If 'fiv-icon' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message. ("
</fiv-app-bar-tab>
<fiv-app-bar-tab left tab="tab2" href="/tab2">
[ERROR ->]<fiv-icon name="md-images"></fiv-icon>
<ion-label>Images</ion-label>
</fiv-app-bar-tab>"): ng:///HomePageModule/HomePage.html@152:8
Can't bind to 'badge' since it isn't a known property of 'fiv-icon'.
1. If 'fiv-icon' is an Angular component and it has 'badge' input, then verify that it is part of this module.
2. If 'fiv-icon' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message.
3. To allow any property add 'NO_ERRORS_SCHEMA' to the '@NgModule.schemas' of this component. ("
</fiv-app-bar-tab>
<fiv-app-bar-tab right tab="tab3" href="/tab3">
<fiv-icon [ERROR ->][badge]="1" name="md-pizza"></fiv-icon>
<ion-label>Pizza</ion-label>
</fiv-app-bar-tab>"): ng:///HomePageModule/HomePage.html@156:18
'fiv-icon' is not a known element:
1. If 'fiv-icon' is an Angular component, then verify that it is part of this module.
2. If 'fiv-icon' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message. ("
</fiv-app-bar-tab>
<fiv-app-bar-tab right tab="tab3" href="/tab3">
[ERROR ->]<fiv-icon [badge]="1" name="md-pizza"></fiv-icon>
<ion-label>Pizza</ion-label>
</fiv-ap"): ng:///HomePageModule/HomePage.html@156:8
'fiv-icon' is not a known element:
1. If 'fiv-icon' is an Angular component, then verify that it is part of this module.
2. If 'fiv-icon' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message. (" </fiv-app-bar-tab>
<fiv-app-bar-tab right tab="tab4" href="/tab4" icon="md-more">
[ERROR ->]<fiv-icon name="md-more"></fiv-icon>
<ion-label>More</ion-label>
</fiv-app-bar-tab>
"): ng:///HomePageModule/HomePage.html@160:8
'fiv-icon' is not a known element:
1. If 'fiv-icon' is an Angular component, then verify that it is part of this module.
2. If 'fiv-icon' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message. ("-bar slot="bottom" titleMode="titleMode" #bar>
<fiv-fab fivAppBarFab="position" #fab>
[ERROR ->]<fiv-icon name="color-wand"></fiv-icon>
</fiv-fab>
"): ng:///HomePageModule/HomePage.html@144:8
'fiv-fab' is not a known element:
1. If 'fiv-fab' is an Angular component, then verify that it is part of this module.
2. If 'fiv-fab' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message. ("
<ion-tabs #tabs>
<fiv-app-bar slot="bottom" titleMode="titleMode" #bar>
[ERROR ->]<fiv-fab fivAppBarFab="position" #fab>
<fiv-icon name="color-wand"></fiv-icon>
</fiv-fa"): ng:///HomePageModule/HomePage.html@143:6
'fiv-icon' is not a known element:
1. If 'fiv-icon' is an Angular component, then verify that it is part of this module.
2. If 'fiv-icon' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message.
Fivethree version:
[x] 0.9.x
Current behavior:
Expected behavior:
Steps to reproduce:
Dark Toolbar and white content
Related code:
insert short code snippets here
Controls don't show when using an example from docs.
<fiv-gallery #gallery>
<ion-row>
<ion-col size="12">
<fiv-gallery-image [src]="image1"></fiv-gallery-image>
</ion-col>
<ion-col size="12">
<fiv-gallery-image [src]="image2"></fiv-gallery-image>
</ion-col>
</ion-row>
<fiv-gallery-toolbar position="top">
<ion-toolbar color="transparent">
<ion-buttons slot="end">
<ion-button (click)="gallery.close()">
<ion-icon slot="icon-only" name="close"></ion-icon>
</ion-button>
</ion-buttons>
</ion-toolbar>
</fiv-gallery-toolbar>
</fiv-gallery>
If I am using this approach
<fiv-gallery-toolbar-content></fiv-gallery-toolbar-content>
<fiv-gallery-image [src]="image1"></fiv-gallery-image>
<fiv-gallery-image [src]="image2"></fiv-gallery-image>
</fiv-gallery>
I can see controls, but above images and not when image is cliked.
Hi, in latest version ("@fivethree/core": "^0.9.6",):
I've got following error:
ERROR in node_modules/@fivethree/core/lib/animations/tween.d.ts:1:10 - error TS2440: Import declaration conflicts with local declaration of 'RectPosition'.
import { RectPosition } from './tween';
when one of the pictures is opened, the correct one is shown first, but after a couple of seconds it changes to the first one
private info: IPostFull;
public episode: string[];
private spiner: any;
public stats: {
readed: string[],
inprogress: string[]
last: string
};Page template
<ion-content fullpage>
<fiv-gallery>
<fiv-gallery-toolbar [position]="'top'">
<fiv-gallery-toolbar-content></fiv-gallery-toolbar-content>
</fiv-gallery-toolbar>
<ion-grid fixed no-padding>
<ion-row class="large">
<ion-col size="4" *ngFor="let img of episode">
<fiv-gallery-image [src]="img"></fiv-gallery-image>
</ion-col>
</ion-row>
</ion-grid>
<fiv-gallery-toolbar [position]="'bottom'">
<ion-toolbar color="transparent">
<ion-text>
{{ info?.name }}<br>
Глава: {{ stats?.last }}
</ion-text>
</ion-toolbar>
</fiv-gallery-toolbar>
</fiv-gallery>
</ion-content>I'm using this package inside of ionic 5. Please guide if i'm doing something wrong. Thanks
import {
FivAppBarModule,
FivCenterModule,
FivFabModule,
FivIconModule,
FivEditableLabelModule,
FivFeatureDiscoveryModule,
FivIfModule
} from '@fivethree/core';
@NgModule({
imports: [
IonicModule,
CommonModule,
FormsModule,
TabsPageRoutingModule,
FivAppBarModule,
FivCenterModule,
FivIfModule,
FivFabModule,
FivEditableLabelModule,
FivIconModule,
FivFeatureDiscoveryModule
],
declarations: [TabsPage]
})
<ion-tabs #tabs>
<fiv-app-bar slot="bottom" [titleMode]="titleMode" #bar>
<fiv-fab [fivAppBarFab]="position" #fab>
<fiv-app-bar-tab left tab="tab1" href="/tab1">
<fiv-icon name="search-outline"></fiv-icon>
<ion-label>Home</ion-label>
</fiv-app-bar-tab>
<fiv-app-bar-tab left tab="tab2" href="/tab2">
<fiv-icon name="notifications-outline"></fiv-icon>
<ion-label>Images</ion-label>
</fiv-app-bar-tab>
<fiv-app-bar-tab right tab="tab3" href="/tab3">
<fiv-icon name="cart-outline"></fiv-icon>
<ion-label>Pizza</ion-label>
</fiv-app-bar-tab>
<fiv-app-bar-tab right tab="tab4" href="/tab4">
<fiv-icon name="person-outline"></fiv-icon>
<ion-label>More</ion-label>
</fiv-app-bar-tab>
Error: Can't bind to 'titleMode' since it isn't a known property of 'fiv-app-bar'.
While using react typescript with ionic, we cannot use this since it's based on angular.
Using Ionic 4, tested on Ionic 4.7.4 and 4.6.2. Also is reproducible when using https://fivethree-team.github.io/ionic-4-components/image from a mobile's chrome browser.
Workaround: -
Use emitter, didOpen and didClose
<fiv-gallery #fivGallery (didOpen)="onImageOpen()" (didClose)="onImageClose()">
onImageOpen() {
this.backBtnSub = this.platform.backButton.subscribeWithPriority(1, () => {
this.closeImagePopup();
});
}
onImageClose() {
this.backBtnSub.unsubscribe();
}
closeImagePopup() {
this.giveGallery.close();
}
Hello,
Congratulations to all involved for the excellent work!
I'm finding some problems with the component 'fiv-loading-content', I have successfully applied it and firing when i swiping down the screen, but it didn't dismiss automatically. I have tried to adding viewChild but nothing happens.
Maybe someone could help me, any advice appreciated. Thank you.
Fivethree version:
[x] 0.9.x
Current behavior:
Expected behavior:
Steps to reproduce:
Related code:
insert short code snippets here
Hello,
Congratulations to all involved for the excellent work!
I'm finding some problems with the component 'fiv-loading-content', in my app I have a box with overflow-x: scroll, the component left this box unusable ie the user can not drag the box anymore because the component is by above, I tried to put z-index in the component and box but without success.
I believe the component should not check horizontal events
Fivethree version:
[x] 0.9.x
Current behavior:
Bottom sheet content border to be curved
Expected behavior:
Border-radius not worked
Steps to reproduce:
Related code:
insert short code snippets here
Thanks For Great and Beautiful Ionic 4 Components.
Hello author, can i add back button in search bar component ?
thanks
Describe the Feature Request
Describe Preferred Solution
Describe Alternatives
Related Code
Additional Context
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
Django
The Web framework for perfectionists with deadlines.
Laravel
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
Microsoft
Open source projects and samples from Microsoft.
Google
Google ❤️ Open Source for everyone.
Alibaba
Alibaba Open Source for everyone
D3
Data-Driven Documents codes.
Tencent
China tencent open source team.