semantic_ui_angular_dart 0.1.6

  • README.md
  • CHANGELOG.md
  • Installing
  • Versions
  • 38

semantic_ui_angular_dart

Semantic UI for Angular Dart.

Demo

Pub

Dartdocs

Setup

pubspec.yaml:

dependencies:
  semantic_ui_angular_dart: 

HTML:

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.2.6/semantic.min.css"/>
<!-- Calendar -->
<link rel="stylesheet" href="packages/semantic_ui_angular_dart/calendar.min.css"/>

<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.2.6/semantic.min.js"></script>
<!-- Calendar -->
<script type="text/javascript" src="packages/semantic_ui_angular_dart/calendar.min.js"></script>

Dart:

import 'package:semantic_ui_angular_dart/semantic_ui_angular_dart.dart';

Usage

Calendar

[WIP]

https://github.com/mdehoog/Semantic-UI-Calendar

HTML:

<div [semantic_ui_calendar]="startDateSettings" [(ngModel)]="startDate" class="ui calendar">
    <div class="ui input left icon">
        <i class="calendar icon"></i>
        <input type="text" placeholder="Start date"/>
    </div>
</div>

Dart:

var startDateSettings = { 'type': 'date' };
var startDate = DateTime.parse('2016-10-01');

NOTE: Currently does not work with select.

HTML:

<div semantic_ui_dropdown [(ngModel)]="gender" class="ui dropdown">
    <input type="hidden" name="gender">
    <i class="dropdown icon"></i>
    <div class="default text">Gender</div>
    <div class="menu">
        <div class="item" data-value="male">Male</div>
        <div class="item" data-value="female">Female</div>
    </div>
</div>

Dart:

var gender;

Progress

HTML:

<div (semantic_ui_progress)="initProgress($event)" [percent]="30" class="ui progress">
    <div class="bar">
        <div class="progress"></div>
    </div>
    <div class="label">Uploading Files</div>
</div>

Dart:

Progress progress;

initProgress(Progress progress) {
  this.progress = progress;
}

HTML:

<div (semantic_ui_sidebar)="initSidebar($event)" class="ui sidebar">
    ...
</div>
<div class="pusher">
    <div class="ui container">
        <button (click)="onToggleSidebarButtonClicked()" class="ui basic icon button">
            <i class="large content icon"></i>
        </button>
        ...
    </div>
</div>

Dart:

Sidebar sidebar;

onToggleSidebarButtonClicked() {
    sidebar.toggle();
}

initSidebar(Sidebar sidebar) {
    this.sidebar = sidebar;
}

Tab

HTML:

<div semantic_ui_tab class="ui tabular menu">
    <div class="active item" data-tab="tab-1">Tab 1</div>
    <div class="item" data-tab="tab-2">Tab 2</div>
    <div class="item" data-tab="tab-3">Tab 3</div>
</div>
<div class="ui active tab" data-tab="tab-1">
    <p>
        ...
    </p>
</div>
<div class="ui tab" data-tab="tab-2">
    <p>
        ...
    </p>
</div>
<div class="ui tab" data-tab="tab-3">
    <p>
        ...
    </p>
</div>

Changelog

0.1.6

  • Updated semantic_ui_calendar directive to support 'startCalendar' and 'endCalendar' settings.

0.1.5

  • Added semantic_ui_progress directive.

0.1.4

  • Added semantic_ui_tab directive.

0.1.3

  • Added semantic_ui_dropdown directive.

0.1.2

  • Fix for sidebar pusher issue.

0.1.0

  • Added directive namespace.
  • Added semantic_ui_calendar directive.

0.0.5

  • Added SEMANTIC_UI_DIRECTIVES.
  • Updated README.

0.0.4

  • Updated README.

0.0.3

  • Fixed error in pubspec.yaml.

0.0.2

  • Fix for 'Could not find Directive/Pipe entry for name' error.

0.0.1

  • Initial version, created by Stagehand

Use this package as a library

1. Depend on it

Add this to your package's pubspec.yaml file:


dependencies:
  semantic_ui_angular_dart: "^0.1.6"

2. Install it

You can install packages from the command line:

with pub:


$ pub get

Alternatively, your editor might support pub get. Check the docs for your editor to learn more.

3. Import it

Now in your Dart code, you can use:


      import 'package:semantic_ui_angular_dart/semantic_ui_angular_dart.dart';
  
Version Uploaded Documentation Archive
0.1.6 Nov 30, 2016 Go to the documentation of semantic_ui_angular_dart 0.1.6 Download semantic_ui_angular_dart 0.1.6 archive
0.1.5 Nov 13, 2016 Go to the documentation of semantic_ui_angular_dart 0.1.5 Download semantic_ui_angular_dart 0.1.5 archive
0.1.4 Nov 8, 2016 Go to the documentation of semantic_ui_angular_dart 0.1.4 Download semantic_ui_angular_dart 0.1.4 archive
0.1.3 Nov 8, 2016 Go to the documentation of semantic_ui_angular_dart 0.1.3 Download semantic_ui_angular_dart 0.1.3 archive
0.1.2 Nov 7, 2016 Go to the documentation of semantic_ui_angular_dart 0.1.2 Download semantic_ui_angular_dart 0.1.2 archive
0.1.0 Nov 7, 2016 Go to the documentation of semantic_ui_angular_dart 0.1.0 Download semantic_ui_angular_dart 0.1.0 archive
0.0.5 Nov 7, 2016 Go to the documentation of semantic_ui_angular_dart 0.0.5 Download semantic_ui_angular_dart 0.0.5 archive
0.0.4 Nov 6, 2016 Go to the documentation of semantic_ui_angular_dart 0.0.4 Download semantic_ui_angular_dart 0.0.4 archive
0.0.3 Nov 6, 2016 Go to the documentation of semantic_ui_angular_dart 0.0.3 Download semantic_ui_angular_dart 0.0.3 archive
0.0.1 Nov 6, 2016 Go to the documentation of semantic_ui_angular_dart 0.0.1 Download semantic_ui_angular_dart 0.0.1 archive

Analysis

We analyzed this package on Jun 12, 2018, and provided a score, details, and suggestions below. Analysis was completed with status completed using:

  • Dart: 2.0.0-dev.60.0
  • pana: 0.11.3

Scores

Popularity:
Describes how popular the package is relative to other packages. [more]
0 / 100
Health:
Code health derived from static analysis. [more]
95 / 100
Maintenance:
Reflects how tidy and up-to-date the package is. [more]
46 / 100
Overall score:
Weighted score of the above. [more]
38
Learn more about scoring.

Platforms

Detected platforms: web, other

Primary library: package:semantic_ui_angular_dart/semantic_ui_angular_dart.dart with components: js.

Suggestions

  • Package is getting outdated.

    The package was released 79 weeks ago.

  • The description is too short.

    Add more detail about the package, what it does and what is its target use case. Try to write at least 60 characters.

  • Fix analysis and formatting issues.

    Analysis or formatting checks reported 13 hints.

    Run dartfmt to format lib/semantic_ui_angular_dart.dart.

    Run dartfmt to format lib/src/AbstractModule.dart.

    Similar analysis of the following files failed:

    • lib/src/CalendarDirective.dart (hint)
    • lib/src/DropdownDirective.dart (hint)
    • lib/src/Progress.dart (hint)
    • lib/src/ProgressDirective.dart (hint)
    • lib/src/Sidebar.dart (hint)
    • lib/src/SidebarDirective.dart (hint)
    • lib/src/TabDirective.dart (hint)
  • Package is pre-v1 release.

    While there is nothing inherently wrong with versions of 0.*.*, it usually means that the author is still experimenting with the general direction API.

  • Maintain an example.

    Create a short demo in the example/ directory to show how to use this package. Common file name patterns include: main.dart, example.dart or you could also use semantic_ui_angular_dart.dart.

Dependencies

Package Constraint Resolved Available
Direct dependencies
Dart SDK >=1.8.0 <2.0.0
angular2 >=2.0.0 <3.0.0 2.2.0 3.1.0+1
browser >=0.10.0 <0.11.0 0.10.0+3
http >=0.11.0 <0.12.0 0.11.3+16
Transitive dependencies
analyzer 0.29.5 0.32.1
args 0.13.7 1.4.3
async 1.13.3 2.0.7
barback 0.15.2+16
build 0.5.0 0.12.6
charcode 1.1.1
cli_util 0.1.3
code_transformers 0.5.1+5
collection 1.14.10
convert 2.0.1
crypto 2.0.3
csslib 0.14.4
dart_style 0.2.16 1.0.14
fixnum 0.10.7
glob 1.1.5
html 0.13.3+1
http_parser 3.1.2
intl 0.14.0 0.15.6
isolate 0.2.3 2.0.1
js 0.6.1
logging 0.11.3+1
meta 1.1.5
mime 0.9.6+1
observable 0.14.0+1 0.22.1+3
package_config 1.0.3
path 1.6.0
plugin 0.2.0+2
pool 1.3.5
protobuf 0.5.5 0.9.0
shelf 0.6.8 0.7.3+1
shelf_static 0.2.7+1
source_maps 0.10.5
source_span 1.4.0
stack_trace 1.9.2
stream_channel 1.6.7
string_scanner 1.0.2
typed_data 1.1.5
utf 0.9.0+4
watcher 0.9.7+8
yaml 2.1.14