I've created a TabControl following this and similar guides:
https://blazor-university.com/templating-components-with-renderfragements/creating-a-tabcontrol/
The relevant code on my test Tabs.razor page is:
<TabControl>
<TabPage Text="Tab 1">
<h1>The first tab</h1>
</TabPage>
<TabPage Text="Tab 2">
<h1>The second tab</h1>
</TabPage>
<TabPage Text="Tab 3">
<h1>The third tab</h1>
</TabPage>
</TabControl>
The pages inside the tabs themselves will have a lot more content than just one sentence. All the tabbed examples I've found just have the tab contents like this, flat on the page. Is there some way to make the tab content more modular, possibly having it live in separate files? I'd want it all to load on the page initialization, I'd just like to not have a big monster .razor page with the contents of all the tabs.
I'm not sure if I need nested layouts here or what, or how the rendering would work (I'll need the tab contents to behave like top-level razor pages with functions and submit actions, etc...).
Pretty new to this, obviously, and haven't been able to find an answer. Thanks in advance.
<TabPage Text="Tab 1">
<MyFirstTabbedComponent />
</TabPage>
and then develop MyFirstTabbedComponent.razor as a page/component.
enfin, you have already done something similar.
Related
I started a new job and I need to build a website with nuxt. A typical website would look like this in a nuxt layout file:
<NavMenu />
<Nuxt /> - my different routed pages
<Footer />
Whenever I change a page <Nuxt /> displays another page, but <NavMenu /> stays as is.
But the website I am building now needs a particular design. Imagine each page looking like this:
(NB: this is purely a design/layout description, not actual vue components)
<HeroImage /> - different for each page, belongs to that specific page
<NavMenu /> - always the same, belongs to the general layout
<MyPageContent /> - content belongs to specific page
The hero image is almost full screen. If you're wondering why the <NavMenu /> is tucked after a fullscreen hero image, it is because when you scroll, the NavMenu is scrolled into view, and whenever it reaches the top of the page, it stays sticky. Here's an example of such sticky navbar: https://codepen.io/bencasalino/pen/MOLQKM
I want to display the NavMenu after the HeroImage. My problem is figuring out how to display a top level component inside of multiple routed pages without reloading it. I can't put the NavMenu inside of individual pages, because if I change the page, that would destroy it and create a brand new NavMenu every time. Also, I can't put HeroImage outside of the <Nuxt /> component because it belongs to its own specific page (the image is different for every page).
I thought I could solve this problem with <teleport>, which allows to move an element to another position in the DOM with a css selector. I would have done something like this:
<teleport to="somewhere_after_the_hero_image" >
<NavMenu />
</teleport>
<Nuxt /> - my different pages
<Footer />
// Pages would look like this
<HeroImage />
<div class="somewhere_after_the_hero_image"></div>
<PageContent />
The problem is that Nuxt doesn't allow it yet because it runs on Vue 2, and <teleport> is a recent feature from Vue3. What would be the most logical way to create this layout? Many thanks in advance !
I didn't find the perfect answer, but one way of doing it might be using the vue store to pass (img url) data from the page created in <Nuxt /> to my HeroImage component.
In the end, I took another approach: my HeroImage is created inside of the Nuxt component, below the menu, and then I used Javascript to put everything into place.
I am actually building a SPA with foalts.org.
I have placed my script.js inside the public folder. Unfortunately, this doesn't allow me to use typescript for my vue-js. Maybe someone has an idea for this, cause actually the public folder got served from foalTS framework. But this is actually not the main topic.
The maintopic is, that i want to list several divs with
<div class="row-position" v-for="order in orders" :key="order.latestPrice">
<div id="myAMchart></div>
</div>
Now I would like to be able to place an amChart (https://www.amcharts.com/) for each div. And I want that these charts follow the value of order.latestPrice. But I actually have no idea how to set up this with amCharts and vue.js
Im open to any ideas.
I was able to update one single chart but with a fixed id of the div.
I don't know how to connect the many different (dynamicaly generated) charts to the order.latestPrice field.
Thanks!
I'm trying to create a link on my vue app to local pdf files. Right now here's my problem.
My pdfs are located in assets/static/ and presently linking to them like this.
<template>
<div id="forms" class="view-wrapper">
<h3>Downloadable Forms</h3>
Claim Form
</div>
</template>
This brings up a link on the page, but when I click it, I'm taken to a blank page on my app with just the navbar and footer and nothing in between. I'm hoping to have it bring up the document in the browsers pdf viewer in another tab. Some help would be greatly appreciated.
Edit: SOLVED: #dan helped me realize that I just had to use one dot to access my assets folder.
To render a pdf in the browser use an <iframe src="path-to-pdf" />. Unless you're binding reactive data to the element you don't have to do anything different in vue. Check out https://stackoverflow.com/a/52644970/6890774 this is a similar issue.
I have been looking for transitions between screens but was unable to find the best practice to navigate through screens .Making sub screens and entry in apps.xml was a try but it gives a link on the top of the page which is not what I want . I want make transitions as we make in html-5 or earlier versions through anchor tag. What is the best practice to do the same?
Below code in a screen can generate the code you want. But you would need to override the "label" macro by yourself to let it contain a "link" that is simply done by add a <#recurse/> in macro "label".
<transition name="gotoScreen1">
<default-response url="Screen1"/>
</transition>
<widget>
<label type="pre">
<link url="gotoScreen1" link-type="anchor" text="This test link from FTL"/>
<label type="pre">
</widget>
A screen transition is a part of a screen definition that specifies how to process input to the transition (if there are logic/actions associated with it) and which screen to transition to when it is complete.
To access a screen transition you just have the browser (or client) go to the URL of the screen, plus the name of the transition separated by a forward slash (i.e. in the URL treat the transition as a directory or file within the "directory" of the screen). This can be done with a hyperlink, a form target, an AJAX call, etc.
To create a link or button using the XML Screen (or XML Form) in Moqui, just use the "link" tag.
Quite simple really.
I have two ContentPanes that I load content into dynamically. The content I load dynamically contains TitlePanes. When I collapse these TitlePanes the content below the TitlePane does not shift up.
(you may ask why I don't load the content into ContentPanes INSIDE the TitlePanes. The reason I don't do that is because the TitlePanes won't expand to cover the dynamic content)
The answer for this can be found here. All you need to do apperently is add doLayout="false
<div dojoType="dijit.layout.ContentPane" id="..." splitter="false" doLayout="false"></div>