Replies: 4 comments 9 replies
-
Sounds like a good idea worth discussing! |
Beta Was this translation helpful? Give feedback.
-
I developed el-text and created PR #11653, Waiting for approval, or ignoring some Element-Plus PR rules? because for the 1st contribution, I need you help :) |
Beta Was this translation helpful? Give feedback.
-
I will actively develop to align design guidelines merged PR. |
Beta Was this translation helpful? Give feedback.
-
Thank you @jw-foss @ryuhangyeong for giving me the opportunity to develop el-text and realize this idea. I hope to optimize the div and span in the example, this work may change a lot of files, so apply in advance. Official examples are the best reference to guide many engineers, and I hope that almost all examples like Naive-ui almost all use with own components. Sincerely hope it will be approved. e.g.<el-statistic :value="138">
<template #title>
- <div style="display: inline-flex; align-items: center">
- Ratio of men to women
- <el-icon style="margin-left: 4px" :size="12">
- <Male />
- </el-icon>
- </div>
+ <el-text>
+ Ratio of men to women
+ <el-icon style="margin-left: 4px" :size="12">
+ <Male />
+ </el-icon>
+ </el-text>
</template>
<template #suffix>/100</template>
</el-statistic> -<div class="m-4">
- <p>Child options expand when clicked (default)</p>
- <el-cascader v-model="value" :options="options" @change="handleChange" />
-</div>
+<el-row class="m-4">
+ <el-text tag="p">Child oel-text tag="p"tions expand when clicked (default)</el-text>
+ <el-cascader v-model="value" :options="options" @change="handleChange" />
+</el-row> and more... |
Beta Was this translation helpful? Give feedback.
-
Most developers who use Element-Plus are applicable to information applications (for example: ERP, CMS, more CRUD...)
I see that although Element-Plus is powerful enough, there are still many people who can't use Element-Plus and Theme well.
I tried to use only Element-Plus + Vue-charts + Unocss in my company project, and I was pleasantly surprised to find that almost all div span css (Vue style tag) were destroyed, and the efficiency was greatly improved.
However, there are still a few places where span css(Vue style tag) cannot be avoided
Because of such a small flaw, I can't express it clearly to other developers "Element-Plus only, forget inefficiency DIV+CSS"
solution
Develop el-block, which is simply a span, which may have optional attributes of div and span
Improved
All nodes of vue template use element-plus components. Unify the style with element-plus theme (only modify the style variable in :root)
Complete upgrade from div+css to Element-Plus + Theme
TODO list
Note (2023-03-16)
After cleaned up span and div, removed
1374
lines of code(div/span/css) replaced it with unocss.According to the #12084 code statistics, examples folder are total of
18075
lines of code, and1374
lines (7.6%) have been deleted. And very time-consuming for developers in non-english-speaking countries to HTML element set classname.So upgrading from
MIXED div + css
toONLY element-plus components + theme
can reduce the workload by atleast 10%
.Beta Was this translation helpful? Give feedback.
All reactions