Skip to content

v0.6.0-v0.6.1

Pre-release
Pre-release
Compare
Choose a tag to compare
@pardnchiu pardnchiu released this 03 Dec 16:44
0.6.1
125f19d

Major Changes

  • Project name changed: The project name has been simplified to QuickUI, making it more concise and easier to remember.

Fixes

  • Fixed the behavior of :if when there is no :else and the value does not match. It now properly removes the corresponding element.

New Features

  • :lazyload
    The default effect has been changed to a gradient background animation. You can switch to a loading circle animation using :effect=circle.
  • Added i18n multilingual support:
    Supports setting multilingual content directly through an object format or dynamically loading language files, with support for dynamic language switching. 
    <body id="app">
    <h1>{{ i18n.greeting }}, {{ i18n.username }}: {{ username }}</h1>
    <button @click="change" data-lang="zh">切換至中文</button>
    <button @click="change" data-lang="zn">Switch to English</button>
</body>
<script>
const app = new QUI({
    id: "app",
    data: {
        username: "Pardn"
    },
    i18n: {
        zh: {
            greeting: "你好",
            username: "用戶名"
        },
        en: 
        {
            greeting: "Hello",
            username: "Username"
        }
    },
    i18nLang: "zh | en", // Choose language
    event: {
        change: e => {
            const _this = e.target;
            const lang = _this.dataset.lang;
            app.lang(lang);
        },
    }
});
</script>

Adjustments

  • Event binding simplified:
    :for in :@click can now be simplified to @click, further improving code clarity and readability.

Deprecated Features

  • For more details, see here.
Assets 2
Loading