shenlant314 / c7

C7 is a canvas-based UI toolkit.

C7

C7 is a canvas-based UI toolkit.

中文版

Introduction

C7 re-implements the key technology of modern front-end development based on HTML <canvas> (without any third-party libraries), it includes:

• 10 commonly used components described in XML (e.g. <button>, <image>, and even <input>)
• Flex layout and commonly used CSS
• MVVM
• Scaffolding and development server out of the box (supports hot reload)
• Chinese input method editor (IME)

Preview address: c7js.github.io

Usage

1. Create a project with npx c7 project-name
2. Use vscode to open the project root directory to enjoy code highlighting
3. Run npm run build in the root directory of the project to start the development server (the code will also be packaged into the /public directory)
4. Use a browser to visit http://127.0.0.1:3000/
5. Modify main.c7 in the /src directory, the browser will update and modify in real time (and package it to the /public directory at the same time)

Documentation

code structure

<style>
.hello {
    font-size: 50px;
}
</style>

<template>
    <text class="hello" content="hello { name } !"></text>
</template>

<script>
return {
    data: {
        name: 'world',
    },
}
</script>

built-in components

component name	supported props	supported CSS
<text>	content	font-size, color
<image>	path	width, height
<button>	label, @click
<input>	value, hint	width
<checkbox>	value, label
<radio>	value, label, option
<switch>	value
<color>	value
<slider>	value	width
<select>	value, options

Some notes

• Built-in components and container
  • The tag must have an end tag, and the prop value must be enclosed in double quotes
  • All components support id and class props, and CSS selectors can be used to add styles to them
  • <input> supported functions are:
    • Keyboard input characters, delete characters, move the caret left and right
    • Insert caret at mouse position
    • Mouse drag and drop to select, double click to select all
    • copy (command-c), paste (command-c), cut (command-x), select all (command-a)
    • Press shift to switch input method editor
  • You can use <div> as a container, but currently only supports single-level nesting (that is, you cannot nest another <div> in a <div>)
• CSS
  • Flex is the default and only layout method, no need to write "display: flex;"
  • The supported flex-related properties are: justify-content, align-items, flex-direction, flex-wrap, align-content, flex-flow
  • The box model can be applied to <div> but currently the only supported writing method is:
    • padding: length; (e.g. padding: 5px;)
    • border: border-width border-style border-color; (e.g. border: 1px solid black;)
    • margin: length; (e.g. margin: 5px;)
  • Naturally supports border-box, so width includes border and padding
  • CSS selector supports the selection of A's direct child B in the form of A B
• MVVM
  • The prop value can be a literal value or a variable of the form "{ xx }"
  • All input components (e.g. <input>, <checkbox>, <slider>) can use value="{ variable }" to achieve two-way binding

The developer says

I am the developer of C7, I spent 13 days developing C7, the purpose is to fully understand the top-level design and underlying principles of front-end development. I am currently looking for a suitable job, if you have a suitable position (preferably working remotely), welcome to send an email to [e-mail].