다트 웹 UI 템플릿의 요소를 어떻게 스타일링합니까?

내가 참조 된 스타일 시트다트 웹 UI 템플릿의 요소를 어떻게 스타일링합니까?

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

문제는 내가 스타일이 UL에 적용 할 얻을 수 있다는 것입니다 항목이

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

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

와 사용자 정의 구성 요소를 말한다. 스타일 요소를 ul 요소 자체에 넣지 않으면 작동하지 않습니다. 범위가 지정된 특성을 사용하려고 시도했으나 작동하지 않습니다. ul의 클래스가 "elem_foo"가되는 이상한 일을합니다.

출처

2013-05-03 jz87

감사합니다.

을 내 주요 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) <x-foo> 대신 <div is="x-foo">의 형식을 사용합니다. 나는 첫 번째 폼이 어떻게 하위 호환성을 가지는지, 그리고 어떻게 엘리먼트를 찾을 것인가에 대해 더 분명하게 생각한다.

2) 내 <template> 태그 안에 <style scoped>을 넣습니다.

웹 UI는 범위 스타일 태그를보고 CSS 파일을 생성합니다.

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

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

웹 UI는 생성 된 CSS 파일에 대한 링크를 기본 HTML 파일에 추가합니다.

출처

2013-05-03 04:43:17

/왜/어떻게 작동하는지 설명 할 수 있습니까? –

"참고 : 범위가 지정된 스타일은 아직 지원되지 않습니다." 따라서 이것은 내가 생각한 범위 스타일을 만들기위한 해킹 된 해결 방법 (?) 일뿐입니다. 실제 범위 스타일이 작동하기 시작하면이 페이지 [Appearance section] (http://www.dartlang.org/articles/web-ui/spec.html#appearance)가 업데이트됩니다. 하나는 지원 될 때 작성된 CSS를 자동으로 스코프한다고 가정합니다. – Ciantic

다트 웹 UI 템플릿의 요소를 어떻게 스타일링합니까?

답변

관련 문제