Как стилизовать элементы в шаблонах Dart Web UI?

Скажем, у меня есть пользовательский компонент с

<head>
  <link rel="stylesheet" src="...">
</head>

<body>
  <element name="elem">
    <template>
      <ul class="foo">
...

где указанная таблица стилей имеет запись

ul .foo {
  list-style-type: none;
}

Проблема в том, что я не могу применить стиль к ul. Ничто из того, что я пробовал, не работает, если я не добавляю атрибут стиля к самому элементу ul. Я попытался поставить атрибут с областью действия, и это тоже не работает. Это делает странную вещь, когда класс ul становится «elem_foo».


dart dart-webui
person jz87    schedule 03.05.2013    source источник

Ответы (1)


arrow_upward
3
arrow_downward

Спасибо за вопрос! Вот как я это делаю:

В моем основном HTML:

<div is="x-click-counter">

В моем пользовательском элементе:

<element name="x-click-counter" constructor="CounterComponent" extends="div">
  <template>
    <button class="button1" on-click="increment()">Click me</button><br />
    <span>(click count: {{count}})</span>
    <style scoped>
      div[is=x-click-counter] span {
        color: red;
      }
    </style>
  </template>
  <script type="application/dart" src="xclickcounter.dart"></script>
</element>

Здесь происходит две вещи.

1) Я использую форму <div is="x-foo"> вместо <x-foo>. Мне нравится, что первая форма более совместима с предыдущими версиями и более четко определяет, как я найду элемент.

2) Я поставил <style scoped> внутри своего тега <template>.

Веб-интерфейс увидит тег стиля области и сгенерирует для вас файл CSS. Это выглядит так:

/* Auto-generated from components style tags. */
/* DO NOT EDIT. */

/* ==================================================== 
   Component x-click-counter stylesheet 
   ==================================================== */
div[is=x-click-counter] span {
  color: #f00;
}

Веб-интерфейс также добавляет ссылку на этот сгенерированный файл CSS в ваш основной файл HTML.

person Seth Ladd    schedule 03.05.2013
comment
Примечание: стиль с ограниченной областью пока не поддерживается. Таким образом, я предполагаю, что это просто хакерский обходной путь (?) для создания стилей с ограниченной областью действия. Я полагаю, что эта страница раздел "Внешний вид" будет обновляться при фактическом охвате стили начинают работать. Можно было бы предположить, что он автоматически определяет написанный css, когда он становится поддерживаемым. - person Ciantic; 23.05.2013