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)
Usage
- Create a project with
npx c7 project-name
- Use vscode to open the project root directory to enjoy code highlighting
- 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) - Use a browser to visit
http://127.0.0.1:3000/
- 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 c7js@qq.com.