wed 0.0.3 wed: ^0.0.3 copied to clipboard
A web Dart framework, for create declarative UIs.
Wed Framework #
The Wed Framework is a simple web framework for Dart, inspired by React and using Flutter syntax. It provides a set of basic components and a global method for rendering the application.
Getting Started #
Installing #
To use the Wed framework, first you'll need to create a new Dart web project and add the wed package to your pubspec.yaml file:
dependencies:
wed: ^0.0.2
Or just run the following command:
$ dart pub add wed
Using #
Then, you can import the package into your project and start using the provided components:
import 'dart:html';
import 'package:wed/src/tags/button/button.dart';
import 'package:wed/src/tags/button/button_props.dart';
import 'package:wed/wed.dart';
final app = querySelector("#app") as DivElement;
void main() {
const styles = CssBaseStyle(
backgroundColor: 'red',
height: '100px',
width: '100px',
alignItems: 'center',
justifyContent: 'center',
display: 'flex',
);
final child = Button(
props: ButtonProps(
text: 'Click me',
onClick: () => print('Clicked'),
styles: CssBaseStyle(
height: '50px',
width: '150px',
textAlign: 'center',
),
),
);
final component = Div(
key: '',
ref: '',
props: ComponentBaseProps(
styles: styles,
children: [child],
),
);
renderApp(component, app);
}
important: Change your index.html first div tag to have id as "app", to use the code below.
Classes and Helpers #
The Component
class is the base class for all components, and it contains a basic set of methods for rendering the component and updating its state.
Component
Class #
The Component
class contains the following methods:
render()
: This method returns aWidget
object that represents the component's current state.update()
: This method updates the component's state and triggers a re-render.setState()
: This method allows the component's state to be updated, triggering a re-render.
ComponentBaseProps
Class #
The ComponentBaseProps
class is the base class for all component props classes.
Div
Class #
The Div
class is a basic container component.
Button
Class #
The Button
class is a basic button component.
CSS #
The framework also provides a basic set of CSS classes and utilities.
CSSProps
Class #
The CSSProps
class is the base class for all CSS properties.
CSSBaseStyle
Class #
The CSSBaseStyle
class is the base class for all CSS styles.
BorderRadius
Class #
The BorderRadius
class represents the border radius property for CSS.
Project Structure #
The project is structured as follows:
web/ ├── lib/ │ ├── src/ │ │ ├── component/ │ │ │ ├── component_base_props.dart │ │ │ └── component.dart │ │ ├── css/ │ │ │ ├── props/ │ │ │ │ ├── border_radius.dart │ │ │ │ └── css_props.dart │ │ │ └── css_base_style.dart │ │ └── div.dart │ │ └── fundamentals.dart │ ├── tags/ │ │ ├── button/ │ │ │ ├── button_props.dart │ │ │ └── button.dart │ │ └── div.dart │ └── web.dart ├── pubspec.yaml ├── README.md └── LICENSE
Contributing #
Contributions are welcome! If you have any suggestions or improvements, please open an issue or submit a pull request.
Authors #
- Henrique Nascimento - Initial work - @HenriqueNas
License #
The Wed Framework is licensed under the MIT License.