Hello, my name is Kagol.
I am very happy to announce to you that on October 24, 2023, OpenTiny Vue released v3.11.0.
Every time a major version of OpenTiny is released, it will bring you some practical new features. On 8.14, we released version v3.10.0, which added 4 new components. The component Demo supports switching between Options and Composition api.
OpenTiny Vue 3.10.0 version released: Component Demo supports Composition writing method, and 4 new components are added
This version 3.11.0 mainly adds the following new components:
- RichTextEditor rich text editor component – by Caesar-ch
- ColorPicker color picker component – by GaoNeng-wWw
- CalendarView calendar view component – by kagol
- Divider dividing line component – by vaebe
A total of 23 contributors participated in the development of this version, 14 of which are new contributors. New friends are welcome
Here are the new contributors:
- @jack-zishan made their first contribution in #392
- @LinboLen made their first contribution in #478
- @vaebe made their first contribution in #471
- @allenli178 made their first contribution in #488
- @Binks123 made their first contribution in #500
- @yoyo201626 made their first contribution in #513
- @wkif made their first contribution in #512
- @chenguang1994 made their first contribution in #518
- @Zuowendong made their first contribution in #503
- @gweesin made their first contribution in #554
- @shonen7 made their first contribution in #567
- @xlearns made their first contribution in #574
- @ianxinnew made their first contribution in #617
- @Xppp0217 made their first contribution in #610
Thanks also to our old friends for their hard work on OpenTiny!
Special thanks to pe-3/Caesar-ch/GaoNeng-wWw/vaebe/Binks123.
You can update @opentiny/[email protected]
to experience it!
RichTextEditor rich text editor
This component was contributed by Caesar-ch classmate
Although the rich text editor is not a high-frequency component, it is almost one of the necessary components in specific fields, such as demand management, content editing, article creation, etc.
In order to meet the needs of these businesses, we launched the RichTextEditor rich text component. It is currently only the first version and only includes the following basic functions:
- Bold, italics, underline, strikethrough
- Quote
- Inline code, code block
- Ordered list, unordered list, task list
- superscript, subscript
- Undo, redo
- Align left, right, center
- Paragraph, H1-H6 title
- Font size, line spacing
- Highlight, text color, background color
- clear format
- Hyperlink
- upload image
- Insert/edit table
The follow-up will continue to be enriched, and friends are welcome to participate in the co-construction.
It’s very simple to use:
<template> <tiny-rich-text-editor></tiny-rich-text-editor> </template> <script lang="ts" setup> import {<!-- --> RichTextEditor as TinyRichTextEditor } from '@opentiny/vue' </script>
The following is the rendering:
The toolbar can be configured via custom-toolbar:
<template> <tiny-rich-text-editor :customToolBar="customToolBar"></tiny-rich-text-editor> </template> <script setup lang="jsx"> import {<!-- --> ref } from 'vue' import {<!-- --> RichTextEditor as TinyRichTextEditor } from '@opentiny/vue' const customToolBar = ref(['bold', 'italic']) </script>
The effect is as follows:
More functions are waiting for you to experience!
ColorPicker color picker
The ColorPicker
color picker component is used in applications and interfaces to let users select colors. It is an interactive element, usually consisting of a color spectrum, hue circle and color value input box, through which the user can select the desired color. The main function of ColorPicker is to enable users to precisely select specific colors for use in various elements of the application.
This component was contributed by GaoNeng, who also wrote an article summarizing the entire development process of the ColorPicker component.
GaoNeng: How do I contribute new components to OpenTiny?
ColorPicker is very simple to use:
<template> <tiny-color-picker v-model="color" /> </template> <script setup lang="ts"> import {<!-- --> ref } from 'vue' import {<!-- --> ColorPicker as TinyColorPicker } from '@opentiny/vue' const color = ref('#66ccff') </script>
The effect is as follows:
This component is very powerful and in addition to selecting colors in the color palette, it also supports:
- Transparency adjustment
- Predefined colors
- color history
- Color selection panel used alone
More functions are waiting for you to experience!
Transparency adjustment:
Predefined colors:
Color history:
Color panel used alone:
CalendarView calendar view
Everyone knows the DatePicker date picker. This component selects a date through a date table. The enlarged version of the date table is the calendar table. Let’s take a look at the comparison chart.
DatePicker date table:
CalendarView calendar table:
Welcome to experience!
Divider dividing line
This component was contributed by classmate vaebe
The dividing line is relatively simple and currently mainly supports:
- Horizontal and vertical dividing lines
- Add dividing line copywriting and adjust copywriting position
- Custom divider style
The effect is as follows:
Welcome to experience!
About OpenTiny
OpenTiny is an enterprise-level Web front-end development solution that provides a cross-end and cross-frame UI component library, adapts to multiple terminals such as PC/mobile terminals, supports Vue2/Vue3/Angular multi-technology stacks, and has a flexible and scalable low-code engine. , including theme configuration system/middle and backend templates/CLI command line and other rich efficiency improvement tools, which can help developers develop web applications efficiently.
Core highlights:
Cross-end and cross-framework
: Using the Renderless component design architecture, a set of codes supports both Vue2/Vue3, PC/Mobile side, and supports function-level logic customization and full template replacement, providing flexibility Good, strong secondary development capabilities.Rich components
: There are 100+ components on the PC side and 30+ components on the mobile side, including high-frequency components Table, Tree, Select, etc., with built-in virtual scrolling to ensure a smooth experience in big data scenarios. In addition to the industry In addition to common components, we also provide some unique features, such as: Split panel splitter, IpAddress IP address input box, Calendar calendar, Crop image cropping, etc.Low-code engine
: TinyEngine low-code engine enables developers to customize the low-code platform. It is the base of the low-code platform and provides basic capabilities such as visual page building. It can be combined online or secondary developed by downloading the source code to customize your own low-code platform in real time. Suitable for low-code platform development in multiple scenarios, such as: resource orchestration, server-side rendering, model driver, mobile terminal, large screen terminal, page layout, etc.Configurable component
: The component supports both template and configuration methods, and is suitable for low-code platforms. Currently, the team has integrated OpenTiny into the internal low-code platform and has made a lot of optimizations for the low-code platform.Complete surrounding ecosystem
: Provides TinyNG component library based on Angular + TypeScript, provides TinyPro mid- and back-end templates containing 10+ practical functions and 20+ typical pages, and provides TinyCLI engineering tools covering the entire front-end development process , providing a powerful online theme configuration platform TinyTheme
Welcome to the OpenTiny open source community.
Add WeChat assistant: opentiny-official and join in the co-construction!
OpenTiny official website: https://opentiny.design/
Vue component library: https://opentiny.design/tiny-vue
Low-code engine: https://opentiny.design/tiny-engine
Angular component library: https://opentiny.design/tiny-ng
OpenTiny code repository: https://github.com/opentiny/ (Stars welcome?)
Recommended articles from previous issues
- OpenTiny Vue supports Vue2.7!
- Boy, it’s time to upgrade to Vue3!
- ?GaoNeng: How do I contribute new components to OpenTiny?
- ?xiaoy: But because of love, I am willing to face all difficulties, and the OpenTiny community has added a front-end programmer contributor.
- ?Contributor recruitment: Front-end Vuer, please keep this “Vue Component Unit Testing” guide to give yourself more security
- OpenTiny front-end component library is officially open source! Facing the future, born for developers
- From self-research to open source TinyVue component library
- A OpenTiny, Vue2 and Vue3 are supported!
- How to start my first open source contribution (if you have not participated in open source contribution before, please read this article)