Quick Start
Install
快速开始最好的方式就是使用 vite
初始化项目工程,添加 mand-mobile-next
即可。
Use npm:
npm init @vite/app
选择 vue-ts
,初始化工程
Install mand-mobile-next
npm i mand-mobile-next@alpha
# or
yarn add mand-mobile-next@alpha
Use
Fully import
在 main.ts
写入以下内容
import { createApp } from 'vue'
import MandMobile from 'mand-mobile-next';
import 'mand-mobile-next/dist/es/mand-mobile-next.min.css';
import App from './App.vue';
const app = createApp(App)
app.use(MandMobile)
app.mount('#app')
On demand
在 main.ts
引入组件库所需的基础变量
import 'mand-mobile-next/dist/es/mand-mobile-next.vars.css';
在 vite
中按需引入
首先,安装 vite-plugin-style-import
:
npm install vite-plugin-style-import -D
#or
yarn add vite-plugin-style-import -D
然后修改 vite.config.ts
:
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import styleImport from 'vite-plugin-style-import'
export default defineConfig({
plugins: [
vue(),
styleImport({
libs: [{
libraryName: 'mand-mobile-next',
esModule: true,
ensureStyleFile: true,
resolveStyle: (name) => {
return `mand-mobile-next/dist/es/${name}/style.js`;
},
resolveComponent: (name) => {
return `mand-mobile-next/dist/es/${name}`;
},
}]
})
]
})
接下来,如果你只希望引入部分组件,比如 Button,需要在 main.js 中写入以下内容:
import { createApp } from 'vue'
import { Button } from 'mand-mobile-next';
import App from './App.vue';
const app = createApp(App)
app.component(Button.name, Button);
/* or
* app.use(ElButton)
* app.use(ElSelect)
*/
app.mount('#app')
或者直接在组件中使用:
import { Button } from 'mand-mobile-next';
export default {
components: {
MdButton: Button,
}
}
Custom Themes
Mand mobile next uses CSS var to implement theme switching, and users can implement custom themes by the following way
- In
main.ts
:
Import { useCssVar } from 'mand-mobile-next/dist/es/composable'.
const themeVars = {
'--md-color-primary': '#f44336',
}
useCssVar(themeVars)
- In the component
setup
:
<script setup ts>
import { useCssVar } from 'mand-mobile-next/dist/es/composable'.
import { ref } from 'vue'.
const themeVars = ref({
'--md-color-primary': '#f44336',
})
useCssVar(themeVars)
</script>
Base variables
/// Brand color
--md-color-primary : #4280EB // Brand color
/// Text color
--md-color-text-base : #111A34 // important information, such as first-level headings
--md-color-text-base-inverse : #FFF
--md-color-text-body : #41485d // General information, such as the main body of a first-level header
--md-color-text-minor : #666f83 // Secondary information, e.g. point of interest, summary
--md-color-text-caption : #858b9c // auxiliary information, such as list content description
--md-color-text-disabled : #c5cad5 // Disabled status
--md-color-text-placeholder : #c5cad5 // Default prompt input or placeholder
--md-color-text-highlight : var(--md-color-primary) // Highlighted state
--md-color-text-warn : #ff7d41 // point-of-interest, warning prompt
--md-color-text-error : #ff5257 // Strong hint for error
--md-color-text-link : #5878b4 // Text link
/// Border and background colors
--md-color-border-base : #e2e4ea // Borders for entries
--md-color-border-element : #c5cad5 // element border, e.g. button
--md-color-bg-base : #f9fafb // element, container background
--md-color-bg-inverse : #FFF
--md-color-bg-disabled : #e2e4ea // Disable element background
--md-color-bg-tap : #F9FAFB // Entry click state
--md-color-mask : rgba(37, 38, 45, .7) // popup mask
/// Text size
--md-font-heading-large : 60px
--md-font-heading-medium : 52px
--md-font-heading-normal : 44px
--md-font-caption-large : 36px
--md-font-caption-normal : 32px
--md-font-body-large : 28px
--md-font-body-normal : 26px
--md-font-minor-large : 24px
--md-font-minor-normal : 20px
--md-font-weight-light : 300
--md-font-weight-normal : 400
--md-font-weight-medium : 500
--md-font-weight-semibold : 600
/// Radius size
--md-radius-normal : 8px
--md-radius-circle : 50%.
/// Border size
--md-border-width-base : 2px
/// Spacing size
--md-h-gap-xs : 8px
--md-h-gap-sm : 12px
--md-h-gap-md : 20px
--md-h-gap-lg : 32px
--md-h-gap-sl : 40px
--md-v-gap-xs : 8px
--md-v-gap-sm : 12px
--md-v-gap-md : 20px
--md-v-gap-lg : 32px
--md-v-gap-sl : 40px
/// Transition
--md-ease-in-out-quint : cubic-bezier(.86, 0, .07, 1)
/// Opaqueness
--md-opacity-disabled : .3 // Disable opacity of the button, switch, agree
/// Font family
--md-font-family-normal : "Helvetica Neue",Helvetica, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Microsoft Ya Black",Arial, sans-serif
--md-font-family-number : DIDIFD-Medium, "Helvetica Neue",Helvetica, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", " Microsoft YaHei", Arial,sans-serif
component variables
TIP
You can check the corresponding component code to get