Hello, I'm Kagol, personal public:Front-end open source planet。
We are very pleased to announce that on October 28, 2024, theTinyVue Posted.v3.19.0 🎉。
This 3.19.0 release has the following major changes:
- All components are fully upgraded to the new design specification of OpenTiny Design, which makes the UI more beautiful and in line with modern aesthetics.
- riseVirtualTree Virtual Tree Component.
- riseVirtualScrollBox Virtualize container components.
- riseSticky Sticky layout components.
Please refer to the detailed Release Notes:/opentiny/tiny-vue/releases/tag/v3.19.0
A total of 16 contributors were involved in the development of this release, of whichNowitzki41 / Simon-He95 / BWrong It's a new friend!
- Nowitzki41 - New contributors✨
- Simon-He95 - New contributors✨
- BWrong - New contributors✨
- shenjunjian
- kagol
- zzcr
- gimmyhehe
- GaoNeng-wWw
- *ping0628
- gweesin
- James-9696
- chenxi-20
- MomoPoppy
- AcWrong02
- Davont
- Youyou-smiles
And thanks to friends old and new for their hard work on TinyVue!
You can update@opentiny/[email protected] Conduct the experience!
Let's take a look at what updates have been made!
Completely upgraded new UI, more in line with modern aesthetics
Since the TinyVue component library was open-sourced last year, we've been getting feedback that our UI isn't beautiful enough, the style is outdated, and it doesn't quite satisfy the current stage of aesthetics.
So we spent a lot of time optimizing the component UI, fully adapted to the new OpenTiny Design design specification, and finally released it in v3.19.0!
The overall effect is as follows:
If you install the v3.19.0 version of the TinyVue component library, the default effect is the new design specification.
# Install dependencies
npm i @opentiny/[email protected]
<script setup lang="ts">;
// Introduce the TinyVue components
import { TinyButton, TinyAlert } from '@opentiny/vue'
</script>; // Introduce TinyVue components.
<template>.
<div>
<tiny-button> cancel </tiny-button>
<tiny-button type="primary">OK</tiny-button>
</div>
<tiny-alert description="TinyVue is a cross-end, cross-framework set of enterprise-grade UI component libraries, supporting Vue 2 and Vue 3, PC and mobile." ></tiny-alert>
</template>
Rendering:
For a comparison of the results of the old and new UI, you can read the following article:
- TinyVue Component Library UI has been upgraded to be more in line with modern aesthetics!
Add VirtualTree virtual tree component
Speaking of virtual scrolling for Tree components, go back to July 12, 2023 Developerzouzhixiang An issue submitted:✨ [Feature]: can tree tree control add virtual scrolling? #317。
Now the Tree component finally supports virtual scrolling! 🎉🎉🎉🎉🎉🎉🎉🎉
Let's experience it together!
Just configure the data source and height.
<script setup>
import { computed } from 'vue'
import { TinyVirtualTree } from '@opentiny/vue'
const treeOp = computed(() => ({
nodeKey: 'label',
data:
}))
<template>
<tiny-virtual-tree
height="600"
:tree-op="treeOp"
></tiny-virtual-tree>
</template>
The effect is as follows:
For more features of the VirtualTree component, please visit the TinyVue website:/tiny-vue/zh-CN/smb-theme/components/virtual-tree
Add VirtualScrollBox virtualization container component
We not only implement the virtual scrolling of Tree, but also extract a generic virtual scrolling component, you can use this component in any list class scenario, so that the big data list has the ability to scroll virtually, let's take the table component as an example, to implement a horizontal and vertical direction can be virtual scrolling of the table.
<template>
<tiny-virtual-scroll-box v-bind="config">
<template #default="{ params: { viewRows, viewCols, isScrollX, isScrollY, isTop, isBottom, isLeft, isRight } }">
<div
v-for="viewRow in viewRows"
:key=""
:style=""
:class="rowClass({ viewRow, isScrollY, isTop, isBottom })"
>
<div
v-for="viewCol in viewCols"
:key=""
:style="colStyle({ viewRow, viewCol })"
:class="colClass({ viewCol, isScrollX, isLeft, isRight })"
>
<div class="vs-grid-cell">
{{ + ',' + }}
</div>
</div>
</div>
</template>
</tiny-virtual-scroll-box>
</template>
<script setup>
import { reactive } from 'vue'
import { TinyVirtualScrollBox } from '@opentiny/vue'
const genColumn = (total) => {
const columns = []
const columnSizes = []
for (let i = 1; i <= total; i++) {
(`c-${i}`)
// Column widths in 120 until (a time) 180
((120 + () * 60))
}
return { columns, columnSizes }
}
const genRow = (total) => {
const rows = []
const rowSizes = []
for (let i = 1; i <= total; i++) {
(`r-${i}`)
// be high on 24 until (a time) 36
((24 + () * 12))
}
return { rows, rowSizes }
}
// generating 10000 columns
const { columns, columnSizes } = genColumn(10000)
// generating 20000 classifier for objects in rows such as words
const { rows, rowSizes } = genRow(20000)
const config = reactive({
width: 900,
height: 400,
rowBuffer: 120,
columnBuffer: 240,
columns,
columnSizes,
rows,
rowSizes,
fixedColumns: [[0], [1]],
fixedRows: [[0], [1]],
spanConfig: [[3, 3, 2, 2]]
})
const rowClass = ({ viewRow, isScrollY, isTop, isBottom }) => {
return {
[]: true,
'vs-row': true,
'vs-fixed-top-last': && !isTop && isScrollY,
'vs-fixed-bottom-first': && !isBottom && isScrollY,
'vs-is-last-row':
}
}
const colClass = ({ viewCol, isScrollX, isLeft, isRight }) => {
return {
[]: true,
'vs-cell': true,
'vs-fixed-left-last': && !isLeft && isScrollX,
'vs-fixed-right-first': && !isRight && isScrollX,
'vs-is-last-col':
}
}
const colStyle = ({ viewRow, viewCol }) => {
return { height: , ... }
}
</script>
<style scoped>
/* Style section omitted */
</style>
The effect is as follows:
Virtual trees can also be combined withVirtualScrollBox + Tree component for implementation, you can refer to the following link for the specific code:
/tiny-vue/zh-CN/smb-theme/components/virtual-scroll-box#tree
For more features of VirtualScrollBox component, please visit TinyVue official website:/tiny-vue/zh-CN/smb-theme/components/virtual-scroll-box
Add Sticky sticky layout component
Sticky Components and CSSposition: sticky attribute achieves the same effect, when the component is in the screen range, it will follow the normal layout arrangement, when the component rolls out of the screen range, it will always be fixed at the top of the screen.
The "ceiling" effect can be effective in certain scenarios to improve the usability and user experience of a web page.
- navigation bar: The Sticky component is often used to fix the navigation bar at the top of a page. As the user scrolls through the page, the navigation bar stays at the top of the viewport, allowing the user to access links to other pages at any time. This design enhances the user experience, especially on pages with long content.
- article title: In long articles, you can set the chapter title to Sticky, which will be fixed at the top of the viewport when the user scrolls to the chapter, helping the user to better understand where they are currently reading and the structure of the content.
It's very easy to use, just wrap the element that needs to be "topped" with a Sticky component.
<tiny-sticky>.
<h2>🎉TinyVue v3.19.0 is officially released, fully upgraded to the new design specification, so that the UI is more in line with modern aesthetics, and add virtual trees, sticky layouts, and other 3 new components ~ </h2>
</tiny-sticky>.
The default is "top", you can also configure "bottom", set the offset, level, etc..
- offset: offset distance, default is
0px - position: adsorption position, the available values are
top(default) /bottom - z-index: element level, defaults to
100
The effect is as follows:
For more features of Sticky components, please visit TinyVue official website:/tiny-vue/zh-CN/smb-theme/components/sticky
Contact Us
GitHub：/opentiny/tiny-vue(Welcome Star ⭐)
Official website:/tiny-vue
Station B:/15284299
Personal Blog:/blogs
Small assistant WeChat: opentiny-official
Public: OpenTiny