UI Initiative - Premium Framework7 Templates & Plugins

Today I want to thank everyone who support and will support my projects :raised_hands:. For you, today, I introduce UI Initiative - Premium templates & plugins for Framework7 and Swiper which are free for projects’ patrons! :tada:

Right now there are 11 items in the UI Initiative catalog, but this collection will consistently grow, and you can expect a few new products every month! :rocket:

Let me know in the comments what kind of apps templates and plugins you would like to see in the catalog?

11 Likes

This is so cool man, amazing job as always :heart_eyes:
Keep it up :partying_face:

1 Like

Hello there!

The page is not working.

Awesome, thanks a lot for that!

1 Like

Hi @nolimits4web
this is a really well done addition to your family of libraries!
Awesome!
andy

@nolimits4web One question, though: Will there be Framework7 VUE versions for the templates or plugins?
e.g. GameCards.f7.jsx or the other React-components/examples?

If not, I’d recommend keeping the examples with F7core and vanilla JS, because it’s much easier to follow, if you’re not used to React…

Hi @tiptronic, thanks!

Right now all templates (except AppStore and WhatsApp) are for Framework7-Core only, and I went with JSX syntax intentionally as it is really easy to port to React (uses same JSX) and Svelte (syntax very similar to JSX). As for Vue, it also supports JSX:

So JSX is kind of the most universal solution here, because coding all templates for 4 frameworks (core, react, vue & svelte) would be very time-consuming task and not really maintainable.

As for F7 plugins, like Tel Input and Avatar Picker, they are provided with separate components for all frameworks.

Anyway, if you have hard time understanding stuff there and need help, let me know, and I can help convert required files/components for you to Vue

hi @nolimits4web

thanks - sounds good…
I never used React and therefore didn’t try to re-write things to get used in F7 / F7Vue, so I think it would be helpful to get 1 example, how to use jsx components in F7vue… (or can I just place the .jsx files into components and then import?
1.
e.g in cookingo there’s something like:
asyncComponent: () => import('../pages/item.f7.jsx'),
in routes.js. But since there’s no pages in cookingo, I am wondering how that translates to F7Vue…

  1. the readme in expanding collection states, there’s afully working example included, but it is not… For me there’s only the Swiper expanding-collection js and scss files…

Why there is no pages? They are in src/pages, so same translates to Vue:

asyncComponent: () => import('../pages/item.vue')

This is default F7’s async router components Navigation Router | Framework7 Vue Documentation

Thanks for noting, fixed, re-download the archive.

I think there are a lot of examples including official Vue JSX examples and guides. You need to install that Vue JSX plugin for Vite and you can use .jsx files instead of .vue with JSX syntax.

E.g. Vue component:

<template>
  <div>
    <button @click="onClick">Click</button>
    <p>Button was clicked {{count}} times</p>
  </div>
</template>
<script>
  import { ref } from 'vue';

  export default {
    setup() {
      const count = ref(0);
      const onClick = () => {
        count.value += 1;
      }

      return {
        count,
        onClick,
      }
    }
  }
</script>

same in JSX:

import { ref, defineComponent } from 'vue';

export default defineComponent({
  setup() {
    const count = ref(0);
    const onClick = () => {
      count.value += 1;
    }
    return () => (
      <div>
        <button onClick={onClick}>Click</button>
        <p>Button was clicked {count.value} times</p>
      </div>
    )
  }
})

In the download from yesterday there was simply no ‘pages’-folder. I re-downloaded today and now they show up.

Sorry for being unclear!
What I meant was:

  • Do I add the VueJSX plugin in vite.config.js or using npm?
  • With ‘example’ I meant a uiinitiative project showing a project with jsx support included.
  1. Ok, so you need to create a new F7-Vue project with F7-CLI.

  2. Then in addition you need to install and configure the Vue JSX plugin:

npm install @vitejs/plugin-vue-jsx

and add it to vite.config.js as shown here https://github.com/vitejs/vite/tree/main/packages/plugin-vue-jsx

  1. Then you need to port (convert) framework7-core code (pages and components) to Vue components (with JSX or not).

If you don’t feel comfortable with JSX then convert it to Vue components, for example CookinGo pages/item.f7.jsx transforms into the following .vue component:

<template>
  <f7-page class="item-page">
    <f7-navbar
      transparent
      :title="item.label"
      back-link="Back"
    >
      <template #right>
        <f7-link
          @click="toggleFavorites"
          :icon-ios="inFavorites() ? 'f7:heart_slash_fill' : 'f7:heart'"
          :icon-md="inFavorites() ? 'material:favorite' : 'material:favorite_border'"
        />
      </template>
    </f7-navbar>

    <div class="item-page-header">
      <img
        class="item-page-header-back-image"
        :src="item.image"
        :alt="item.label"
      />
      <img
        class="item-page-header-front-image"
        :src="item.image"
        :alt="item.label"
      />
      <div class="item-page-header-title">{{item.label}}</div>
      <div class="item-page-header-category">{{item.dishType}}</div>
    </div>
    <div class="item-page-props">
      <div>
        <f7-icon ios="f7:flame" md="material:local_fire_department" />
        <span>{{Math.round(item.calories)}} cal</span>
      </div>
      <div>
        <f7-icon ios="f7:person_2_fill" md="material:people" />
        <span>Servings {{item.yield}}</span>
      </div>
      <div v-if="item.totalTime">
        <f7-icon ios="f7:timer" md="material:timer" />
        <span>{{item.totalTime}} min</span>
      </div>
      <f7-link popup-open=".popup-nutrition">
        <f7-icon ios="f7:info_circle" md="material:info" />
        <span>
          Nutrition
          <i class="icon f7-icons">chevron_right</i>
        </span>
      </f7-link>
    </div>
    <div class="item-page-center-content">
      <f7-block-title medium>Ingredients</f7-block-title>
      <ingredients-list :item="item" />
    </div>

    <nutrition-popup :item="item" />
  </f7-page>
</template>
<script>
import { ref, defineComponent, onMounted } from 'vue';
import { f7, useStore } from 'framework7-vue';
import './item.less';
import IngredientsList from '../components/IngredientsList.vue';
import NutritionPopup from '../components/NutrionPopup.vue';

export default defineComponent({
  components: {
    IngredientsList,
    NutritionPopup
  },
  setup(props) {
    const { item } = props;
    const favoriteItems = useStore('favoriteItems');

    const inFavorites = () => {
      return favoriteItems.value.filter((favItem) => favItem.uri === item.uri)[0];
    };

    const notify = (message, icon) => {
      f7.toast
        .create({
          text: message,
          destroyOnClose: true,
          closeTimeout: 1000,
          horizontalPosition: 'center',
          position: 'center',
          icon,
        })
        .open();
    };

    const toggleFavorites = () => {
      if (inFavorites()) {
        f7.store.dispatch('removeFavoriteItem', item);
        notify(
          'Recipe removed from favorites',
          f7.theme.ios
            ? '<i class="icon f7-icons">heart_slash_fill</i>'
            : '<i class="icon material-icons">favorite_border</i>',
        );
      } else {
        f7.store.dispatch('addFavoriteItem', item);
        notify(
          'Recipe added to favorites',
          f7.theme.ios
            ? '<i class="icon f7-icons">heart</i>'
            : '<i class="icon material-icons">favorite</i>',
        );
      }
    };

    onMounted(() => {
      f7.store.dispatch('addRecentItem', item);
    });

    return {
      toggleFavorites,
      inFavorites,
      item,
    }
  }
});
</script>

Hi @nolimits4web

awesome - thanks for your notes! This will help me to get started in no time (if there’s time somewhen)!

Thanks for your time and patience!

It seems, the Expanding Collection example has some (caching issues). That’s what I see, if I open it on Safari (latest 11.6)…

While trying to see what’s going on in the example above, I noticed you didn’t use any Framework7 stuff on the uiinitiative.com page.

Imo it would have been a good use-case, how to deploy a minified F7 page on Netlify or Next. (it really looks nice, btw…)