Comments (15)
@NoelOConnell you are the God, thanks. Finally, it's working!
from ui-material-components.
@ohmaha @dnicer3 yes svelte needs a special component for this.
@halfnelson started working on this halfnelson@904c71e
@halfnelson what s the status on this?
from ui-material-components.
I got this working on Stackblitz Preview today with help on the NS Discord.
Here's how I set it up.
Install the plugin in package.json
"@nativescript-community/ui-material-bottom-navigation": "^7.0.25"
I'm using that version since a message on Discord said that was the version supported by ns preview
Register the plugin in app.ts
app.ts
import {
BottomNavigation,
TabContentItem,
TabStrip,
TabStripItem,
} from '@nativescript-community/ui-material-bottom-navigation';
.....
registerNativeViewElement('bottomNavigation', () => BottomNavigation);
registerNativeViewElement('tabStrip', () => TabStrip);
registerNativeViewElement('tabStripItem', () => TabStripItem);
registerNativeViewElement('tabContentItem', () => TabContentItem);
svelteNativeNoFrame(App, {});
Add the component to your Page.svelte
Page.svelte
<script lang="ts">
let selectedTab = 1
$:console.log({selectedTab})
</script>
<page xmlns:mdt="@nativescript-community/ui-material-bottom-navigation">
<bottomNavigation bind:selectedIndex={selectedTab}>
<!-- The bottom tab UI is created via TabStrip (the containier) and TabStripItem (for each tab)-->
<tabStrip>
<tabStripItem>
<label text="Home" />
</tabStripItem>
<tabStripItem class="special">
<label text="Account" />
</tabStripItem>
<tabStripItem class="special">
<label text="Search" />
</tabStripItem>
</tabStrip>
<!-- The number of TabContentItem components should corespond to the number of TabStripItem components -->
<tabContentItem>
<gridLayout>
<label text="Home Page" class="h2 text-center" />
</gridLayout>
</tabContentItem>
<tabContentItem>
<gridLayout>
<label text="Account Page" class="h2 text-center" />
</gridLayout>
</tabContentItem>
<tabContentItem>
<gridLayout>
<label text="Search Page" class="h2 text-center" />
</gridLayout>
</tabContentItem>
</bottomNavigation>
</page>
from ui-material-components.
Unfortunately, I would like to have a solution for Svelte as well. As far as I know, since Nativescript 8.0 was released, components BottomNavigation and Tabs are not supported by officials anymore, only by the community. I have already tried to bypass this by using a regular Nativescript and registerNativeViewElement function, however unsuccessfully.
from ui-material-components.
@NoelOConnell, as I said, I have already tried same and anyway I can not make it working... See the code and package below.
app.svelte
app.ts
package.json
from ui-material-components.
@dnicer3 Can you try changing the order that the components are registered. I remember seeing some other issue about the order needing to be correct for tabs.
registerNativeViewElement('bottomNavigation', () => BottomNavigation);
registerNativeViewElement('tabStrip', () => TabStrip);
registerNativeViewElement('tabStripItem', () => TabStripItem);
registerNativeViewElement('tabContentItem', () => TabContentItem);
from ui-material-components.
@NoelOConnell Unfortunately, nothing is changing. (
from ui-material-components.
@dnicer3 I have the plugin installed as a dev dependency. Not sure if that makes a difference.
from ui-material-components.
@NoelOConnell can you send your link of Stackblitz?
from ui-material-components.
@vallemar here's the playground I'm experimenting with.
https://stackblitz.com/edit/nativescript-stackblitz-templates-t1fr9o
from ui-material-components.
@NoelOConnell I have even changed it to devDependencies, but still nothing...
from ui-material-components.
@dnicer3 I've created a bare example that you can use to compare to your own and see if there's any differences.
https://stackblitz.com/edit/nativescript-stackblitz-templates-t1fr9o
from ui-material-components.
@NoelOConnell thank you for assistance, however, mine code is 100% same but not working ))
from ui-material-components.
@dnicer3 Yeah, I tried to run it locally with the emulator and got the same error as you. It works fine in Stackblitz so it's something to do with how the Nativescript Stackblitz has additional dependencies installed.
I looked at the package.json for ui-material-bottom-navigation
and saw it has dependencies list.
I updated the package.json
to include them and it worked in the emulator locally.
Can you try adding these dependencies.
"@nativescript-community/ui-material-bottom-navigation": "^7.0.34",
"@nativescript-community/ui-material-core-tabs": "^7.0.34",
"@nativescript/core": "~8.4.0",
Try running ns clean
also before installing and running.
from ui-material-components.
Does this mean that plugins that need a component of the framework in question can we make them work in any framework by adding this to the page? xmlns:mdt="@nativescript-community/ui-xxxxx"
????
from ui-material-components.
Related Issues (20)
- does not work with vue3 HOT 3
- [MDTextView][Android] Setting height of the component doesn't work HOT 8
- [MDTextField][MDTextView][Android] Helper seems not to work HOT 2
- Unable to make this work HOT 4
- Calling js method onCreateView failed HOT 15
- Types missing for Angular Bottomsheet: ui-material-bottomsheet/angular missing index.d.ts file HOT 4
- [BottomNavigation][Tabs][Android] Outlet becomes unresponsive/freezes when using nested outlets HOT 4
- [Request] Border radius for bottom sheet HOT 2
- [BottomNavigationBar] If activeColor is not provided, setting inactiveColor crashes the app HOT 1
- MDTabs selectedIndex not woking HOT 1
- MDTabStripItem only support two Element on Image and Label HOT 1
- [Vue3] bottom sheet props returning undefined HOT 4
- [Tabs][Angular] Can not create Tabs dynamic via code
- 7.2.0+: ripple not correctly applied on Android using borderRadius HOT 8
- [BottomSheet][iOS] App crashes when tapping background or drag to close bottom sheet HOT 3
- Error after updating to 7.2.13 (probably Tabs) HOT 6
- MDTextField Android error with secure option HOT 2
- MDTabContentItem already registered HOT 3
- background does not expand to fill width going portrait to landscape on iOS
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 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.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
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.
from ui-material-components.