framework7-cli/create/templates/vue/generate-home-page.js

Framework7 command line utility (CLI)

const indent = require('../../utils/indent');

module.exports = (options) => {
  const { name, template } = options;

  let description = '';
  if (template === 'single-view' || template === 'blank') {
    description = `
          <p>Here is your blank Framework7 app. Let's see what we have here.</p>
    `;
  }
  if (template === 'split-view') {
    description = `
          <p>This is an example of split view application layout, commonly used on tablets. The main approach of such kind of layout is that you can see different views at the same time.</p>

          <p>Each view may have different layout, different navbar type (dynamic, fixed or static) or without navbar.</p>

          <p>The fun thing is that you can easily control one view from another without any line of JavaScript just using "data-view" attribute on links.</p>
    `;
  }
  if (template === 'tabs') {
    description = `
          <p>This is an example of tabs-layout application. The main point of such tabbed layout is that each tab contains independent view with its own routing and navigation.</p>

          <p>Each tab/view may have different layout, different navbar type (dynamic, fixed or static) or without navbar like this tab.</p>
    `;
  }

  return indent(
    0,
    `
    <template>
      <f7-page name="home">
        <!-- Top Navbar -->
        ${
          template === 'blank'
            ? `
        <f7-navbar large>
          <f7-nav-title>${name}</f7-nav-title>
          <f7-nav-title-large>${name}</f7-nav-title-large>
        </f7-navbar>
        `.trim()
            : `
        <f7-navbar large :sliding="false">
          <f7-nav-left>
            <f7-link icon-ios="f7:menu" icon-md="material:menu" panel-open="left"></f7-link>
          </f7-nav-left>
          <f7-nav-title sliding>${name}</f7-nav-title>
          <f7-nav-right>
            <f7-link icon-ios="f7:menu" icon-md="material:menu" panel-open="right"></f7-link>
          </f7-nav-right>
          <f7-nav-title-large>${name}</f7-nav-title-large>
        </f7-navbar>
        `.trim()
        }
        ${
          template !== 'tabs'
            ? `
        <!-- Toolbar-->
        <f7-toolbar bottom>
          <f7-toolbar-pane>
            <f7-link>Left Link</f7-link>
            <f7-link>Right Link</f7-link>
          </f7-toolbar-pane>
        </f7-toolbar>

        `.trim()
            : ''
        }
        <!-- Page content-->
        <f7-block>
          ${description.trim()}
        </f7-block>
        ${
          template !== 'blank'
            ? `
        <f7-block-title>Navigation</f7-block-title>
        <f7-list strong inset dividersIos>
          <f7-list-item link="/about/" title="About"></f7-list-item>
          <f7-list-item link="/form/" title="Form"></f7-list-item>
        </f7-list>

        <f7-block-title>Modals</f7-block-title>
        <f7-block class="grid grid-cols-2 grid-gap">
          <f7-button fill popup-open="#my-popup">Popup</f7-button>
          <f7-button fill login-screen-open="#my-login-screen">Login Screen</f7-button>
        </f7-block>

        <f7-block-title>Panels</f7-block-title>
        <f7-block class="grid grid-cols-2 grid-gap">
          <f7-button fill panel-open="left">Left Panel</f7-button>
          <f7-button fill panel-open="right">Right Panel</f7-button>
        </f7-block>

        <f7-list strong inset dividersIos>
          <f7-list-item
            title="Dynamic (Component) Route"
            link="/dynamic-route/blog/45/post/125/?foo=bar#about"
          ></f7-list-item>
          <f7-list-item
            title="Default Route (404)"
            link="/load-something-that-doesnt-exist/"
          ></f7-list-item>
          <f7-list-item
            title="Request Data & Load"
            link="/request-and-load/user/123456/"
          ></f7-list-item>
        </f7-list>
        `.trim()
            : ''
        }
      </f7-page>
    </template>
  `,
  ).trim();
};