6

GitHub - yessGlory17/flutter-style-javascript: my funny project 🤣

 2 years ago
source link: https://github.com/yessGlory17/flutter-style-javascript
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.
neoserver,ios ssh client

flutter-style-javascript

This project is for experimental purposes only.

Usage

  • Create a HTML file and put body tag id 'app'
  • Create Javscript file and connect HTML file ('<script src="main.js" type="module"></script>')
  • import fsjs.minjs with cdn
    https://cdn.jsdelivr.net/gh/yessGlory17/flutter-style-javascript/fsjs.min.js

Example

import {
    Div,
    Button,
    Text,
    TextTypes,
    Style
} from 'https://cdn.jsdelivr.net/gh/yessGlory17/flutter-style-javascript/fsjs.min.js';

Div({
    childs:[
        Text({
        content:'Heeey',
        type:TextTypes.H1
        }),
        Button({
            text: Text({content:'press',type:TextTypes.H1}),
            onClick:()=>console.log('hello world'),
            style:Style({
                backgroundColor:'green'
            })
        })
    ],
    style:Style({
        width:'300px',
        height:'200px',
        backgroundColor:'red'
    })
})

Output

Components

  • Button
  • Text (H1,H2,H3,H4,H5,H6,p)
  • Style (width,height,border,border-radius,background-color)
  • Picture
  • Input (text, file, password, etc.)
  • Navbar
  • Bottom Navigation Bar
  • Animation

Library

  • Main Widget Class
  • Statefull Widget
  • Stateless Widget

State

  • State Pattern Implementation

Examples

  • Counter App
  • CRUD App

report

Recommend

About Joyk


Aggregate valuable and interesting links.
Joyk means Joy of geeK