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;
...
}
}
- 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();
}
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
Libraries
- abstract_component
- chart_widget
- fields/checkbox_field
- fields/date_field
- fields/date_time_field
- dialogs
- file_chooser
- form_panel
- headed_panel
- fields/list_field
- load_indicator
- mixins
- modal_state_panel
- fields/num_field
- tables/object_table
- pager
- panel
- fields/radio_field
- tables/repository
- tables/repository_table
- fields/select_field
- labels/simple_image
- labels/simple_label
- labels/simple_link
- tables/simple_table
- tab_panel
- tables/table_with_header_copy
- fields/text_area_field
- fields/text_field
- theme_controller
- utils