I am trying to make a responsive screen. I have used bootstrap classes in this way:
<container style="row">
<container style="col-md-4">
<label text="Demo text one"/>
</container>
<container style="col-md-4">
<label text="Demo text two"/>
</container>
<container style="col-md-4">
<label text="Demo text three"/>
</container>
</container>
I got reference of this from dashboard.xml from Hivemind component.
Is it a correct way of using bootstrap classes to achieve responsiveness in Moqui?
Since, I remember a similar question where we have discussed it as not an appropriate way to code. Here is the URL or that question:
https://stackoverflow.com/questions/25502820/what-are-the-possible-ways-to-make-an-ui-interface-using-moqui-framework
This is one of many sets of styles that are useful from Bootstrap for UI that is responsive to screen size. This isn't so much a Moqui questions as a Bootstrap one, and fortunately they have great documentation (see also the Components, JavaScript, and other pages there):
http://getbootstrap.com/css/
Note that Moqui currently uses quite a few of the Bootstrap styles, and is slowly being changed to use more over time, including a number of changes still not released in the current GitHub repository (for version 1.5.0).
Related
I like to use inline svg in my projects because it gives me great control over things like width, height, fill color, stroke width and stroke color using css and js(props). I usually create a vue.js SFC (single file component) for every SVG icon. Here's an example:
<!-- IconsArrowRight.vue -->
<template>
<svg
viewBox="0 0 14 14"
fill="currentColor"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M7.57026 0.888947L5.98842 2.46006L9.4199 5.89117L0.333374 5.89117L0.333374 8.10895H9.4199L5.98842 11.5401L7.57026 13.1112L13.6681 7.00006L7.57026 0.888947Z"
/>
</svg>
</template>
And then I would use it like this (I'm using tailwindCSS for styling):
<template>
<div>
<IconsArrowRight class="w-8 h-8 text-blue-500" />
</div>
</template>
I use more than 50 icons in my project, and I've created a vue.js component for each one; Is it a bad practice regarding production performance to have so many components just for icons? Should I use font-icons instead, or any other alternative method?
Using one .vue file for one .svg is totally fine IMO. It will not have any big impact performance-wise, just maybe take a bit longer when building your app but nothing that critical IMO.
Also, using it this way can have quite some flexibility in some rare situations regarding HTML specification.
Now, regarding the best approach ever, I'd probably say to use #unocss/preset-icons or any package based on Iconify simply because it will bring you all the available and imaginable icons on the fly, with no drawbacks and a LOT of flexibility + nice DX.
Here is an article in 4 parts that will explain all the reasoning behind this approach and how it can be integrated universally to any solution (even if not using Antfu's solution).
Most probably either using the svg as component or as font icon from performance side I would not consider any issue at all. Vue.js is a framework that can be used for large scale applications and your components are not heavy at all, they just use an SVG.
My personal preference would be to be used as font icons as you mentioned and use a component that you will be passing as props the font icon, so with this way you would have 1 component for all svgs.
About the styling, again using a prop to pass all the styles and bind that prop with the :class
This would be much cleaner I think,
Cheers
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 have the following code (only relevant attributes included):
<ice:inputText styleClass="myClass" />
renders as
<input class="myClass" />
which is perfectly fine, but
<ice:inputText styleClass="myClass" disabled="true" />
renders as
<input class="myClass-dis" disabled="true" />
so the original style class is no longer applied.
Now, of course I could change my CSS to accomodate for that, but I have several different classes for differently styled input fields, which would all need to then have their own -dis version. This is especially annoying since the disabled style is the same for all of them and the normal CSS way is perfectly suited to handle this: simply combine classes to add the desired look to whatever the standard style is.
So, is there a way to stop IceFaces from automatically affixing my style classes (e.g. like prepending form-IDs can be controlled)?
I created this NumberSpinner widget:
<input name="form_action_fy" id="form_action_fy" value="2010"
data-dojo-type="dijit.form.NumberSpinner"
data-dojo-smallDelta="1"
data-dojo-largeDelta="1"
data-dojo-constraints="{min:2010,max:2030,places:0}" />
When I load the page, the widget shows as expected. However, there are a couple of issues:
The value is empty and not 2010.
When I press the decrease button on the empty widget, I get 9000000000000000 and when I increase on the empty widget, I get -9000000000000000. It doesn't stick to the min/max specified.
And, the smallDelta and largeDelta do not work either.
What am I doing wrong here?
Thanks
Eric
In the new widget attribute style the properties that are passed to the constructor function are all put in the data-dojo-props attribute, instead of the ad-hoc attributes of old. In the cases where the docs still point to the older declarative style you might get better luck by looking for the programatic style examples instead.
<input name="form_action_fy" id="form_action_fy"
data-dojo-type="dijit.form.NumberSpinner"
data-dojo-props="
value:2010,
smallDelta:5,
largeDelta:10,
constraints:{min:2010,max:2200,places:0}"
/>
Live example: http://jsfiddle.net/missingno/cQfFt/
Do note that in Dojo 1.6 a couple of widgets are still in transition so some attributes might need to be duplicated in prop and attribute form. Things should be allright in 1.7 though.