Comments (5)
* 由于配置对接问题,这个想法暂时作废
from mdui.
可以在项目的入口文件中导入 mdui 文件:
import 'mdui/dist/css/mdui.min.css';
import 'mdui';
在需要用到 mdui 对象的地方可以导入:
import mdui from 'mdui';
部分组件需要进行初始化,可以在项目的入口文件中监听路由变更后,执行:
mdui.mutation();
具体组件的使用按文档说明就行,没有其他需要注意的地方了。
from mdui.
可以在项目的入口文件中导入 mdui 文件:
import 'mdui/dist/css/mdui.min.css'; import 'mdui';在需要用到 mdui 对象的地方可以导入:
import mdui from 'mdui';部分组件需要进行初始化,可以在项目的入口文件中监听路由变更后,执行:
mdui.mutation();具体组件的使用按文档说明就行,没有其他需要注意的地方了。
嗯,我先试一下
from mdui.
<template>
<div class="mdui-appbar mdui-appbar-fixed mdui-appbar-scroll-hide">
<div class="mdui-toolbar mdui-color-theme">
<button mdui-drawer="{target:'#left-drawer',overlay:true,swipe:true}" class="mdui-btn mdui-btn-icon">
<i class="mdui-icon material-icons">menu</i>
</button>
<a href="javascript:;" class="mdui-typo-headline">MDUI</a>
<a href="javascript:;" class="mdui-typo-title">Title</a>
<div class="mdui-toolbar-spacer"></div>
<a href="javascript:;" class="mdui-btn mdui-btn-icon">
<i class="mdui-icon material-icons">search</i>
</a>
<a href="javascript:;" class="mdui-btn mdui-btn-icon">
<i class="mdui-icon material-icons">refresh</i>
</a>
<a href="javascript:;" class="mdui-btn mdui-btn-icon">
<i class="mdui-icon material-icons">more_vert</i>
</a>
</div>
</div>
<div class="mdui-drawer mdui-color-white mdui-drawer-full-height mdui-drawer-close" id="left-drawer">
... drawer content ...
</div>
</template>
<script lang="ts" setup>
</script>
<style></style>
像这种 App Bar + Drawer 的组件,在 Vue 3 + Nuxt 3 上有什么比较好的触发解决方案吗(?
from mdui.
<template> <div class="mdui-appbar mdui-appbar-fixed mdui-appbar-scroll-hide"> <div class="mdui-toolbar mdui-color-theme"> <button mdui-drawer="{target:'#left-drawer',overlay:true,swipe:true}" class="mdui-btn mdui-btn-icon"> <i class="mdui-icon material-icons">menu</i> </button> <a href="javascript:;" class="mdui-typo-headline">MDUI</a> <a href="javascript:;" class="mdui-typo-title">Title</a> <div class="mdui-toolbar-spacer"></div> <a href="javascript:;" class="mdui-btn mdui-btn-icon"> <i class="mdui-icon material-icons">search</i> </a> <a href="javascript:;" class="mdui-btn mdui-btn-icon"> <i class="mdui-icon material-icons">refresh</i> </a> <a href="javascript:;" class="mdui-btn mdui-btn-icon"> <i class="mdui-icon material-icons">more_vert</i> </a> </div> </div> <div class="mdui-drawer mdui-color-white mdui-drawer-full-height mdui-drawer-close" id="left-drawer"> ... drawer content ... </div> </template> <script lang="ts" setup> </script> <style></style>
像这种 App Bar + Drawer 的组件,在 Vue 3 + Nuxt 3 上有什么比较好的触发解决方案吗(?
在入口文件中监听路由变更,执行 mdui.mutation();
就行,在 Nuxt 中或许需要进行判断仅在客户端运行。
from mdui.
Related Issues (20)
- Add ability to customize the margin for tooltips HOT 2
- mdui-text-area emits "input" event twice
- Suggestion (docs): Sort components alphabetically HOT 1
- Slider component buggy when "min" property is specified on SvelteKit dev server. HOT 2
- Remove predefined attribute values from components
- Textfield multi-line scrollbar looking weird
- 似乎没有办法修改使用了 mdui-icon 的组件的字体 HOT 3
- observeResize.js在路由后报错(vue3) HOT 1
- mdui-text-field number type covers text with label if value is not number
- TopAppBar组件的自动padding-top的页面错位问题 HOT 5
- TopAppBar not adding padding-top on body HOT 4
- Weird element appearance after page reload HOT 1
- Select 组件重复选择相同项目会清空选择 HOT 1
- Textfield 设置为 autosize 时,用js使其value=""(清空),高度不会自动复原,并且控制台有错误 HOT 1
- Feature Request: Add Material 3's Outlined text field HOT 1
- <mdui-button-icon icon="iconname"></mdui-button-icon> are used in the examples but never explained HOT 5
- Make snackbars stackable
- Webstorm documentation displays in chinese HOT 4
- 有几个小疑惑想请教一下 HOT 1
- mdui.dialog方法在传入body参数中包含mdui-select组件时,操作该mdui-select组件会意外关闭对话框
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from mdui.