CODEWITHSUNDEEP
dart
Hasan A Yousef
Hasan A Yousef

Reputation: 24988

Dartlang styling table in custom element

In my custom element, I used the below code to create table:

TableElement table = new TableElement();  var tBody;
 tBody = table.createTBody();
 table.style.width='100%';

 tBody.addRow()..addCell().nodes.add(update)
           ..style.color='green'
           ..addCell().text='hi'..style.color='orange'
           ..addCell().nodes.add(ueta);
tBody.addRow()..addCell().nodes.add(udate)..style.border='solid'..style.color='blue'..addCell().nodes.add(ustatus);
  1. The data had been presented correctly.
  2. I want to style - in the first row, the the cell of 'hi' by green, but it failed, and styled by orange.
  3. I want to make border and background colors for the cells, but could not know how to do so.

any thought?

thanks

Upvotes: 0

Views: 141

Answers (1)

Argenti Apparatus
Argenti Apparatus

Reputation: 4013

Instead of adding style to individual elements in Dart, use cascading style sheets (CSS)

In your html:

<html>
  <head>
    <script async type="application/dart" src="my_dart_app.dart"></script>
    <script async src="packages/browser/dart.js"></script>
    <link rel='stylesheet' href='my_dart_app.css'/>
  </head>
    ...
    ...

Then write the styles you want in my_dart_app.css. There are plenty of tutorials to be found. Start with http://www.w3schools.com/css/default.asp perhaps.

Note that when creating HTML elements you can add classes easily:

TableElement table = new TableElement();
  ..classes.add('my_table_class');

Upvotes: 1

Related Questions