simple_dart_web_widgets

Description:

simple dart web widgets

Simple dart web widgets #
A library of very simple Web-components on dart. Not compatible with Flutter.
Read in other languages: English, Русский.
Live showcase example: simple_dart_web_showcase
##The main principles of the library

OOP approach
The components should be simple, flexible and suitable for customization in each individual project.
No magic (no code generation, no React programming, no DI, etc.).

Separation for css and code #

Theme is defined in one CSS file.
System styles are extracted in the system_style.css file.

Component properties defined in the theme (via CSS) #

font
background
color
border
font
images
padding (for components)

Component properties defined in dart code #

stride
width
height
vertical
wrap
align
scrollable
fillContent
padding (for panels)

Names conventions #

The names of all CSS classes begin with a capital letter and correspond to the class names in Dart.

Panel #

There is only one component for composition in the library - the Panel class. Using a combination of panels, you can create any layouts.
Panel - is not intended to be inherited from it.
To create new panel-based components, use the abstract PanelComponent class. As a parameter, you need to pass the name of the new dart class.

Example:
class SomeNewComplexComponent extends PanelComponent {
SomeNewComplexComponent(): super('SomeNewComplexComponent') {
vertical = true;
...
}
}
copied to clipboard

Simple components that do not need composition are inherited from the Component class. You also need to pass the name of the new dart class as a parameter.

Example:
class SomeNewComponent extends Component {
SomeNewComponent(): super('SomeNewComponent') {

}

@override
Element nodeRoot = DivElement();
}
copied to clipboard
All components have a nodeRoot - which is placed in the DOM. Is possible access to the component style using nodeRoot.style - but only in emergency cases or during development.
Auxiliary CSS classes #

Active - highlights the active state of the component (for example, the current tab or a clamped button).
Disabled - highlights the disabled state of the component.

These classes are used only in MixinActivate and MixinDisable mixins - if you need to add activability or a ban on editing to your components, just mix these mixins into your new component.
Examples of using the library: #
For checking the appearance of themes, exist project: simple_dart_web_showcase
For create single page applications, it is recommended to use the library: simple_dart_web_views