To anyone completely new and wanting to work out how you can use the components that are not currently implemented you can copy the examples from the docs https://v6.framework7.io/docs/ into a newly created HTML contents page:
In this example i am using the picker which doesn’t currently yet have native integration in Wappler but we can call it up anyway, the code is located at the very bottom of the page: https://framework7.io/docs/picker - copy everything from the start of “template” to the end of “/script”, including the brackets.
You must leave the <!— Wappler include header that wappler makes because this tells the wappler UI what frameworks you are using and where to inherit styles - this also means that wappler wont ditch the right hand side section (app structure / design / styles / dom) leaving you writing html code with no assistance by hand. Delete everything that isn’t in the The result will look something like this:
You must have framework 7 router handler enabled which is the default in your project settings to be able to see the component url in the drop down in the next step.
Next you do as Pier has suggested and make a link to that page through the router. You then link to that content on your main page view like so:
- credit to Pier for photo
Next you will create a link which uses that route.
Then select the route you made on the popup and click select.
Now when you click on the link (in preview(eyeball) mode) you made in your main page you will see something like this:
The page link will take over your main view (you need to have a main view for this to work), if you have been messing with stuff start fresh or add this:
You can view the example by toggling the preview window from your main index page then clicking on your brand new link. However, you wont be able to edit it here you will need to open the html you made and edit it from there.
It will appear differently from the preview window to what it looks like when your editing if those components don’t have wappler converted components.
Your view when editing the page should look a little like like this:
I am unsure if there is a fix for that but its not really a huge deal breaker either way. Once your done and you run the app, the code will appear as it should.