当前位置:网站首页>View UI plus released version 1.2.0 and added image, skeleton and typography components
View UI plus released version 1.2.0 and added image, skeleton and typography components
2022-07-06 13:15:00 【View Design】
View UI Plus 1.2.0 The version is on 2022-06-13 Release .
Update log
Please go to the official website www.iviewui.com Check out the latest version of .
- New typesetting component
Typography
, Built in rich content layout UI, Support copy 、 Editable 、 Omit and other functions .Typography contain 5 A component :Typography Content structure
Title title
Paragraph The paragraph
Text Inline text
Link link
Add a skeleton screen component
Skeleton
.- New picture component
Image
. There are two components :Image picture
ImagePreview Preview picture
Repair part CSS Problems that go wrong in some environments .
Repair Row Components types Wrong question .
Repair Alert The component icon is not centered .
Update method
1. modify package.json
in view-ui-plus
Version number :
"dependencies": {
"view-ui-plus": "^1.2.0"
}
2. function npm update view-ui-plus
.
Content abstract
Image Picture components
The picture component can be used for various typesetting of a picture , Use fit
Property to set various zoom effects for the picture ,width
and height
You can set the width and height of the picture ,src
Specify the picture address , such as :
<Image
src="https://file.iviewui.com/images/image-demo-11.jpg"
fit="contain"
width="100px"
height="100px"
/>
Set properties lazy
You can load pictures lazily , By default, it will automatically find the latest one overflow The value is auto or scroll Parent element of . When scrolling to the visible area of the picture , Will load the picture . Of course , You can also set properties scroll-container
To specify the container . You can experience the lazy loading of pictures online here : https://run.iviewui.com/HoVFMqS7
besides , The picture component can also customize the loading prompt 、 Load failure prompt and other common attributes . You can see file API
ImagePreview Picture preview component
Picture preview can be done in Image
Open properties on the component preview
Use , Or directly used alone ImagePreview
Image preview component :
Picture preview needs to specify a set of picture addresses preview-list
And the default number of images displayed initial-index
.
Picture preview support Zoom in 、 narrow 、 rotate 、1:1 Look at the original picture 、 Forward and backward switching And so on , It also supports keyboard operation .
Online experience address :https://run.iviewui.com/T2V78Fay
Skeleton Frame screen assembly
The skeleton screen component is used to provide a placeholder combination where data needs to be loaded .
Basic effect , Include head image 、 title 、 The paragraph
The skeleton screen can also be customized , Such as length 、 Height 、 shape 、 Animation 、 Typesetting, etc
Typography Typesetting components
Show the title 、 The paragraph 、 List, etc , Often used in articles 、 Document layout .
Support common accessibility , Like copying 、 Editable 、 Ellipsis, etc .
Typography Every component of , Can be turned on Copy function , Just one parameter copyable
:
<Paragraph copyable> This is a piece of text that can be copied </Paragraph>
It also supports directly on the current paragraph Edit and save , Just turn it on editable
attribute :
Editing support from Default slot
Read , Or directly through v-model
Two way binding data :
<template>
<Paragraph editable @on-edit-end="handleSave1">{
{ content1 }}</Paragraph>
<Paragraph v-model="content2" editable />
</template>
<script>
export default {
data () {
return {
content1: ' Text that can be edited and saved directly ',
content2: ' Also support v-model Fast binding '
}
},
methods: {
handleSave1 (content) {
this.content1 = content;
}
}
}
</script>
For long paragraphs , You can also turn on properties ellipsis
Omit , And Tooltip
Display the complete content in the form of :
More complete content , succeed in inviting sb. View Design Official website view :iView / View Design A set of enterprise class UI Component libraries and front-end solutions
边栏推荐
猜你喜欢
图书管理系统小练习
Alibaba cloud microservices (I) service registry Nacos, rest template and feign client
TYUT太原理工大学2022数据库之关系代数小题
Counter attack of flour dregs: redis series 52 questions, 30000 words + 80 pictures in detail.
Fgui project packaging and Publishing & importing unity & the way to display the UI
Inheritance and polymorphism (I)
Alibaba cloud microservices (III) sentinel open source flow control fuse degradation component
121 distributed interview questions and answers
[algorithm] sword finger offer2 golang interview question 13: sum of numbers of two-dimensional submatrix
Interview Essentials: talk about the various implementations of distributed locks!
随机推荐
Music playback (toggle & playerprefs)
【快趁你舍友打游戏,来看道题吧】
Ten minutes to thoroughly master cache breakdown, cache penetration, cache avalanche
Fgui project packaging and Publishing & importing unity & the way to display the UI
First acquaintance with C language (Part 2)
[while your roommate plays games, let's see a problem]
TYUT太原理工大学2022数据库考试题型大纲
闇の連鎖(LCA+树上差分)
121 distributed interview questions and answers
4.30动态内存分配笔记
The earth revolves around the sun
TYUT太原理工大学往年数据库简述题
图书管理系统小练习
View UI Plus 发布 1.2.0 版本,新增 Image、Skeleton、Typography组件
View UI Plus 发布 1.1.0 版本,支持 SSR、支持 Nuxt、增加 TS 声明文件
167. Sum of two numbers II - input ordered array - Double pointers
[algorithm] sword finger offer2 golang interview question 12: the sum of the left and right sub arrays is equal
Role movement in the first person perspective
Record: solution of 404 error of servlet accessing database in dynamic web project
How do architects draw system architecture blueprints?