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.
Related
I’m stuck with putting one button inside of another one: it’s prohibited, but I use bootstrap, that’s why I appoint class “btn …” to span and it looks like the button.
My button should look like this:
Filename.jpg <small delete button<
When you press on filename, file opens, when on small delete button - it sends request to API and deletes file
But now link is not working, but delete button does work. Putting and so one did not solve my problem
Code:
<span v-for=“link in links”
class= “btn btn-success”
v-bind:href=“<domain> + link.file”>
<button type=“button” class=“btn btn-danger” #click=“deleteFile(`$(link.file_id) `)”>-</button>
</span>
href only works on certain elements. Use <a> anchor instead of <span>.
Generally speaking it is not a good idea to wrap clickable elements inside other clickable elements. It's bad for accessibility and tab navigation and it can lead to easy missclicks from your users.
The right thing to do would be to put your two buttons next to each others to indicate that there is in fact two separate actions your users can take related to the file.
I have an application with drawer navigation that uses buttons to navigate to different screens.
In terms of accessibility, should I use accessibilityRole='button' or accessibilityRole='link' for the buttons.?
React Native AccessibilityRole docs say
link Used when the element should be treated as a link.
For external links accessibilityRole='link' is clearly the best option. But should I use it for internal navigation, too?
Note: I do not use deep links in my application.
Thank you for your help.
The Link component
renders a component that can navigate to a screen on press.
The Button component is a component that performs a certain action if the user presses it. A Button could be considered a Link if its onPress function navigates to a screen, by definition of the Link component. The Link could be styled to look exactly like a Button and vice versa. There would be no difference.
If we refer to general URL linking which includes deep linking, then we notice that the link functionality needs a UI component as well in order to function. This could be Markdown, the Link component or again the Button.
I personally would use accessibilityRole='button' for every UI component that is the actual Button component or functions (and 'looks') like a button in my application (TouchableOpacity, Pressable, ...), since this is what a user whose disability prevents him from noticing needs to know or wants to visualize. This includes the Drawer buttons.
I would use accessibilityRole='link' for text which is styled too look like a link (text with some highlighting) and navigates somewhere (this could be a website as well).
In general, I would keep in mind that the user wants to visualize the component. While a button, that navigates to a screen, is technically a link by definition of its functionality, it is not a 'typical link' when speaking of visual appereance (but again, we could style our button exactly like that...).
What is generally more important is the accessibilityHint which
helps users understand what will happen when they perform an action on the accessibility element when that result is not clear from the accessibility label.
The 'what will happen if I click' is certainly more important than 'what the component looks like'.
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'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.
I'm using angular 2 in my web application.
My application uses a lot of bootstrap modals.
I noticed that the modals contained inside a sub-route component are not showed correctly.
Infact, the modals contained inside the navbar element (the navbar is in the main state and always visible) are shown correctly, but those that are contained in the sub-route (so the html is loaded dinamically) present a bug... the shadow seems to be above the dialog itself, so it is impossible to press the buttons.
This is a screenshot:
As you can see the backdrop is above the dialog. This happen only on mobile devices.
What am I doing wrong?
I would avoid to keep all the modals inside the navbar and then open them with global events...
Thanks a lot
EDIT: I found this document:
If the modal container or its parent element has a fixed or relative
position, the modal will not show properly. Always make sure that the
modal container and its parent elements don’t have any special
positioning applied. The best practice is to place a modal’s HTML just
before the closing </body> tag, or even better in a top-level position
in the document just after the opening <body> tag. This is the best
way to avoid other components affecting the modal’s appearance and
functionality.
But is this the html of my modals (a lot of modals) is always in the dom. Isn't a heavy solution?
I fixed the problem using the following javascript code:
$('#myModal').appendTo("body").modal('show');
Thanks to Adam Albright for his post.