balm ui تنزيل - تنزيل كود مصدر balm ui

balm ui

بيانات الموقع

1.0.0

تنزيل

بالموي

واجهة مستخدم مواد الجيل التالي لـ Vue.js

مقدمة

BalmUI هي مكتبة واجهة مستخدم لتصميم المواد معيارية وقابلة للتخصيص لـ Vue 3.

balm-ui@8 يدعم Vue 2

سمات

واجهة مستخدم من فئة المؤسسات مصممة لتطبيقات الويب
مجموعة من مكونات Vue/المكونات الإضافية/التوجيهات/الأدوات المساعدة عالية الجودة خارج الصندوق
تخصيص موضوع قوي في كل التفاصيل
دمج مجموعة كاملة من أحدث أيقونات المواد
جميع المكونات والمكونات الإضافية قابلة للتخصيص بدرجة كبيرة، ويمكن استخدامها بشكل فردي
دعم TypeScript (تحديث)

التوثيق والعروض التوضيحية

قم بزيارة موقع Material.balmjs.com
قم بزيارة v8.material.balmjs.com (لـ Vue 2)

بداية سريعة

متطلبات

[email protected]+
Balm CLI أو Vue CLI/Vite أو سلاسل الأدوات الأخرى

1. لبلسم CLI

1.0 إنشاء مشروع

balm init vue my-project
cd my-project

1.1 تثبيت `balm-ui`

yarn add balm-ui
# OR
npm install --save balm-ui

1.2 التكوين

تحديث balm.config.js

احصل على أيقونات المواد دون تنزيل (أو تنزيلها واستخراجها إلى my-project/app/fonts )

 const api = ( mix ) => {
  if ( mix . env . isDev ) {
    mix . copy ( 'node_modules/balm-ui/fonts/*' , 'app/fonts' ) ;
  }
} ;

قم بتحرير my-project/config/balmrc.js لاستخدام Dart Sass

 module . exports = {
  styles : {
    extname : 'scss'
  }
  // Other Options...
} ;

1.3 الاستخدام

الاستخدام الافتراضي

قم بتحرير my-project/app/styles/global/_vendors.scss
```
 /* import BalmUI styles */
@use ' balm-ui/dist/balm-ui ' ;
```
نوصي باستخدام Sass في /path/to/project-name/styles/_vendors.scss ، ويمكنك استخدام أسلوب أكثر تقدمًا لواجهة BalmUI.

قم بتحرير my-project/app/scripts/main.js

 import { createApp } from 'vue' ;
import App from '@/views/layouts/app' ;
import BalmUI from 'balm-ui' ; // Official Google Material Components
import BalmUIPlus from 'balm-ui/dist/balm-ui-plus' ; // BalmJS Team Material Components

const app = createApp ( App ) ;

app . use ( BalmUI ) ; // Mandatory
app . use ( BalmUIPlus ) ; // Optional

app . mount ( '#app' ) ;

الاستخدام المستقل

قم بتحرير my-project/app/styles/global/_vendors.scss

 @use ' balm-ui/components/core ' ;
@use ' balm-ui/components/button/button ' ;
@use ' balm-ui/components/icon/icon ' ;
@use ' balm-ui/components/dialog/dialog ' ;
@use ' balm-ui/plugins/alert/alert ' ;

قم بتحرير my-project/app/scripts/main.js

 import { createApp } from 'vue' ;
import App from '@/views/layouts/app' ;
import UiButton from 'balm-ui/components/button' ;
import $alert from 'balm-ui/plugins/alert' ;

const app = createApp ( App ) ;

app . use ( UiButton ) ;
app . use ( $alert ) ;

app . mount ( '#app' ) ;

1.4 التطوير والاختبار

npm run dev

تحرير مكون vue: my-project/app/scripts/views/components/hello.vue

 < template >
  < div class =" hello " >
    ...
    <!-- Add a test button -->
    < ui-button @click =" $alert('Hello BalmUI') " > Click Me </ ui-button >
  </ div >
</ template >

1.5 التجميع والنشر

npm run prod

2. بالنسبة إلى Vue CLI أو Vite

2.0 إنشاء مشروع

vue-cli
```
vue create my-project

cd my-project
```

vite

 # npm 6.x
npm init @vitejs/app my-project --template vue

# npm 7+, extra double-dash is needed:
npm init @vitejs/app my-project -- --template vue

# yarn
yarn create @vitejs/app my-project --template vue

cd my-project

2.1 تثبيت `balm-ui`

yarn add balm-ui
# OR
npm install --save balm-ui

2.2 التكوين

vue-cli

 // vue.config.js
module . exports = {
  runtimeCompiler : true ,
  // NOTE: set alias via `configureWebpack` or `chainWebpack`
  configureWebpack : {
    resolve : {
      alias : {
        'balm-ui-plus' : 'balm-ui/dist/balm-ui-plus.js' ,
        'balm-ui-css' : 'balm-ui/dist/balm-ui.css'
      }
    }
  }
  // chainWebpack: (config) => {
  //   config.resolve.alias
  //     .set('balm-ui-plus', 'balm-ui/dist/balm-ui-plus.js')
  //     .set('balm-ui-css', 'balm-ui/dist/balm-ui.css');
  // }
} ;

vite

 // vite.config.js
import { defineConfig } from 'vite' ;
import vue from '@vitejs/plugin-vue' ;

export default defineConfig ( {
  plugins : [ vue ( ) ] ,
  resolve : {
    alias : {
      vue : 'vue/dist/vue.esm-bundler.js' ,
      'balm-ui-plus' : 'balm-ui/dist/balm-ui-plus.esm.js' ,
      'balm-ui-css' : 'balm-ui/dist/balm-ui.css'
    }
  }
} ) ;

2.3 الاستخدام

تحرير my-project/src/main.js

 import { createApp } from 'vue' ;
import App from './App.vue' ;

import BalmUI from 'balm-ui' ; // Official Google Material Components
import BalmUIPlus from 'balm-ui-plus' ; // BalmJS Team Material Components
import 'balm-ui-css' ;

const app = createApp ( App ) ;

app . use ( BalmUI ) ;
app . use ( BalmUIPlus ) ;

app . mount ( '#app' ) ;

3. بالنسبة إلى `<script>`

 <!DOCTYPE html >
< html lang =" en " >
  < head >
    < meta charset =" UTF-8 " />
    < meta name =" viewport " content =" width=device-width, initial-scale=1.0 " />
    < title > Hello BalmUI </ title >
    < link rel =" stylesheet " href =" https://unpkg.com/balm-ui/dist/balm-ui.css " />
  </ head >
  < body >
    < div id =" app " >
      < ui-button icon =" add " @click =" $alert(message) " > SayHi </ ui-button >
    </ div >
    < script src =" https://unpkg.com/vue " > </ script >
    < script src =" https://unpkg.com/balm-ui " > </ script >
    < script src =" https://unpkg.com/balm-ui/dist/balm-ui-plus.js " > </ script >
    < script >
      const app = Vue . createApp ( {
        setup ( ) {
          var message = 'Hello BalmUI' ;

          return {
            message
          } ;
        }
      } ) ;

      app . use ( BalmUI ) ;
      app . use ( BalmUIPlus ) ;

      app . mount ( '#app' ) ;
    </ script >
  </ body >
</ html >

يتمتع ؟

المساهمة

يسعدنا أن تساهم في جعل BalmUI أفضل مما هو عليه اليوم! يرجى التأكد من قراءة دليل المساهمة قبل تقديم طلب السحب. يمكنك إرسال أي أفكار كطلبات سحب أو كمشاكل في GitHub.