javascript/NativeScript
1
0
Fork 0
mirror of https://github.com/NativeScript/NativeScript.git synced 2025-08-16 20:11:24 +08:00
Code Issues Packages Projects Releases Wiki Activity

Merge pull request #4146 from NativeScript/sibling-css-selector

Browse Source 
Sibling css selector
This commit is contained in:
Nikolay Tsonev
2017-05-10 14:20:10 +03:00
committed by GitHub
parent d482c5334c af38cf5f3e
commit c2aec26ccf
6 changed files with 191 additions and 16 deletions
Download Patch File Download Diff File Expand all files Collapse all files

36
apps/app/ui-tests-app/css/combinators.css Normal file
View File

@ -0,0 +1,36 @@
.direct-child--type > Button {
background-color: red;
color: white;
}
.direct-child--class > .test-child {
background-color: blue;
color: white;
}
.direct-sibling--type Button + Label {
background-color: green;
color: white;
}
.direct-sibling--id #test-child + #test-child-2 {
background-color: pink;
}
.direct-sibling--class .test-child + .test-child-2 {
background-color: yellow;
}
.direct-sibling--attribute Button[data="test-child"] + Button[data="test-child-2"] {
background-color: blueviolet;
color: white;
}
.direct-sibling--pseudo-selector Button + Button:disabled {
background-color: black;
color: white;
}
.sibling-test-label {
text-align: center;
}

66
apps/app/ui-tests-app/css/combinators.xml Normal file
View File

@ -0,0 +1,66 @@
<Page>
<ScrollView>
<StackLayout>
<StackLayout class="direct-child--type">
<Label text="Direct child test by type"/>
<Button text="I'm a direct child!"/>
<StackLayout>
<Button text="I'm not!"/>
</StackLayout>
</StackLayout>
<StackLayout class="direct-child--class">
<Label text="Direct child test by class"/>
<Button class="test-child" text="I'm a direct child!"/>
<StackLayout>
<Button class="test-child" text="I'm not!"/>
</StackLayout>
</StackLayout>
<StackLayout class="direct-sibling--type">
<Label text="Direct sibling test by type"/>
<Button text="I'm the ref"/>
<Label class="sibling-test-label" text="I'm a direct sibling!"/>
<Label text="I'm not!" class="sibling-test-label"/>
<Button text="I'm not either!"/>
<Label class="sibling-test-label" text="But I am!"/>
</StackLayout>
<StackLayout class="direct-sibling--id">
<Label text="Direct sibling test by id"/>
<Button id="test-child" text="I'm the ref"/>
<Button id="test-child-2" text="I'm a direct sibling!"/>
<Button id="test-child-3" text="I'm not!"/>
</StackLayout>
<StackLayout class="direct-sibling--class">
<Label text="Direct sibling test by class"/>
<Button class="test-child" text="I'm the ref"/>
<Button class="test-child-2" text="I'm a direct sibling!"/>
<Button class="test-child-2" text="I'm not!"/>
<Button class="test-child" text="I'm not either!"/>
<Label class="test-child-2 sibling-test-label" text="But I am!"/>
</StackLayout>
<StackLayout class="direct-sibling--attribute">
<Label text="Direct sibling test by attribute"/>
<Button data="test-child" text="I'm the ref"/>
<Button data="test-child-2" text="I'm a direct sibling!"/>
<Button data="test-child-2" text="I'm not!"/>
<Button data="test-child" text="I'm not either!"/>
<Button data="test-child-2" text="But I am!"/>
</StackLayout>
<StackLayout class="direct-sibling--pseudo-selector">
<Label text="Direct sibling test by pseudo-selector"/>
<Button text="I'm the ref"/>
<Button isEnabled="false" text="I'm a direct sibling!"/>
<Button text="I'm not!"/>
<Button text="I'm not either!"/>
<Button isEnabled="false" text="But I am!"/>
</StackLayout>
</StackLayout>
</ScrollView>
</Page>

1
apps/app/ui-tests-app/css/main-page.ts
View File

@ -45,6 +45,7 @@ export function pageLoaded(args: EventData) {
examples.set("border-playground", "css/border-playground");
examples.set("textview-hint-color", "css/textview-hint-color");
examples.set("hint-text-color", "css/hint-text-color");
examples.set("combinators", "css/combinators");
let viewModel = new SubMainPageViewModel(wrapLayout, examples);
page.bindingContext = viewModel;