Framework7 カスタムビルド

カスタムビルド

Framework7には、必要なコンポーネント/モジュールのみを含めることができるカスタムライブラリバージョンを構築できるGulpビルダーが付属しています。以下が必要です。

1. Framework7 GitHubリポジトリをダウンロードしてローカルフォルダに解凍します

2. Node.jsをインストールします（インストールされていない場合）

3. ターミナルで次のコマンドを実行して、Gulpをインストールします（インストールされていない場合）

   $ npm install --global gulp

4. 次に、必要な依存関係をインストールする必要があります。ダウンロードして解凍したFramework7リポジトリのあるフォルダに移動し、ターミナルで実行します

   $ npm install

5. scripts/build-config.jsファイルをダウンロードしたフォルダのどこかにコピーし、例えばscripts/my-config.jsにリネームします
6. このファイルを開き、不要なコンポーネントを削除するか、カラーテーマと含まれる色を修正します

   /* my-config.js */
   const config = {
     rtl: false, // change to true to generate RTL styles
   
     // remove any components you don't need
     components: [
       // Modals
       'dialog',
       'popup',
       'login-screen',
       'popover',
       'actions',
       'sheet',
       'toast',
   
       // Loaders
       'preloader',
       'progressbar',
   
       // List Components
       'sortable',
       'swipeout',
       'accordion',
       'contacts-list',
       'virtual-list',
       'list-index',
   
       // Timeline
       'timeline',
   
       // Tabs
       'tabs',
   
       // Panel
       'panel',
   
       // Card
       'card',
   
       // Chip
       'chip',
   
       // Form Components
       'form',
       'input',
       'checkbox',
       'radio',
       'toggle',
       'range',
       'stepper',
       'smart-select',
   
       // Grid
       'grid',
   
       // Pickers
       'calendar',
       'picker',
   
       // Page Components
       'infinite-scroll',
       'pull-to-refresh',
   
       // Data table
       'data-table',
   
       // FAB
       'fab',
   
       // Searchbar
       'searchbar',
   
       // Messages
       'messages',
       'messagebar',
   
       // Swiper
       'swiper',
   
       // Photo Browser
       'photo-browser',
   
       // Notifications
       'notification',
   
       // Autocomplete
       'autocomplete',
   
       // Tooltip
       'tooltip',
   
       // Gauge
       'gauge',
   
       // Skeleton
       'skeleton',
   
       // Color Picker
       'color-picker',
   
       // Tree View
       'treeview',
   
       // WYSIWYG Editor
       'text-editor',
   
       // Pie Chart
       'pie-chart',
   
       // Area Chart
       'area-chart',
   
       // Breadcrumbs
       'breadcrumbs',
   
       // Typography
       'typography',
     ],
     // include/exclude dark theme styles
     darkTheme: true,
     // include/exclude light theme styles
     lightTheme: true,
     // include/exclude themes
     themes: [
       'ios',
       'md',
     ],
   };
   
   module.exports = config;
   

7. これで、Framework7のカスタムバージョンを構築する準備ができました。実行する必要があります

   $ npm run build-core:prod -- --config scripts/my-config.js --output path/to/output/folder

8. 以上です。これで、指定された出力フォルダに新しく生成されたjsファイルとcssファイルが表示されます

ESモジュール

WebpackやRollupのようなバンドラーを使用する場合、そのビルドプロセスなしで、必要なコンポーネントのみをインポートすることで、必要なFramework7 JSコンポーネントのみを使用できます

// Import core framework
import Framework7 from 'framework7';

// Import additional components
import Searchbar from 'framework7/components/searchbar';
import Calendar from 'framework7/components/calendar';
import Popup from 'framework7/components/popup';

// Install F7 Components using .use() method on Framework7 class:
Framework7.use([Searchbar, Calendar, Popup]);

// Init app
var app = new Framework7({/*...*/});

インポートできるコンポーネントは次のとおりです（その他すべてのコンポーネントはコアの一部です）

Less.js

Framework7のスタイルはLess.jsで構築されています。アプリ/プロジェクトでLessとNPMを使用している場合は、必要なコンポーネントのみを使用して、カスタムFramework7スタイルシートを簡単に作成できます。

独自のframework7.lessファイルを作成します

// core
@import 'framework7/less';

// import only components you need
@import 'framework7/components/searchbar/less';
@import 'framework7/components/calendar/less';
@import 'framework7/components/popup/less';

さらに、カスタムframework7.lessファイルでFramework7のメインカラーテーマと必要な色を指定することもできます

// core
@import 'framework7/less';

// import only components you need
@import 'framework7/components/searchbar/less';
@import 'framework7/components/calendar/less';
@import 'framework7/components/popup/less';

// include/exclude themes
@includeIosTheme: true;
@includeMdTheme: true;

// include/exclude dark theme
@includeDarkTheme: true;
// include/exclude light theme
@includeLightTheme: true;

// Theme color
@themeColor: #007aff;

// Extra colors
@colors: {
  red: #ff3b30;
  green: #4cd964;
  blue: #2196f3;
  pink: #ff2d55;
  yellow: #ffcc00;
  orange: #ff9500;
  purple: #9c27b0;
  deeppurple: #673ab7;
  lightblue: #5ac8fa;
  teal: #009688;
  lime: #cddc39;
  deeporange: #ff6b22;
  gray: #8e8e93;
  white: #ffffff;
  black: #000000;
};

// change to true to generate RTL styles
@rtl: false;