feat: iOS 26 types with improvements (ActionBar, Switch) + .ns-{platform}-{sdkVersion} css root scoping (#10775)

This provides for better ability to target platform > sdk > majorVersion specific features.
For example, iOS 26 does not render titles when a background color is set on the actionbar. this allows that style to be overridden only on iOS 26 if desired.
This commit is contained in:
Nathan Walker
2025-08-07 12:06:10 -07:00
parent b35277c8f0
commit b6e1090b23
144 changed files with 28026 additions and 15652 deletions

View File

@@ -91,3 +91,12 @@
.list-group {
margin-top: 7;
}
.ns-ios-26 .action-bar {
/**
* Note: nativescript-theme-core auto adds background-color to actionbar
* doing so will cause iOS 26+ to not render titles when large title is enabled
* We can now scope specific styling behavior for platform sdk versions
*/
background-color: transparent;
}

View File

@@ -4,9 +4,9 @@
</ActionBar>
</Page.actionBar>
<GridLayout padding="20" class="a11y-demo-page">
<GridLayout class="a11y-demo-page">
<ScrollView>
<StackLayout>
<StackLayout padding="20">
<Button testID="openModalPageButton" text="Open Modal Page" class="view-item" tap="{{openModal}}" />
<Button testID="openNormalPageButton" text="Open Normal Page" class="view-item" tap="{{openNormal}}" />

View File

@@ -1,13 +1,14 @@
<Page xmlns="http://schemas.nativescript.org/tns.xsd" navigatingTo="navigatingTo" class="page">
<GridLayout padding="20">
<ScrollView>
<StackLayout>
<Button text="Image Async?" tap="{{save}}" />
<Image width="200" height="200" src="{{ src }}"/>
<Image marginTop="10" width="200" height="200" src="{{ savedData }}" />
<Image marginTop="10" width="50" height="50" imageSource="{{ resizedImage }}" />
</StackLayout>
</ScrollView>
</GridLayout>
<Page.actionBar>
<ActionBar title="Image Async" icon="" class="action-bar">
</ActionBar>
</Page.actionBar>
<ScrollView>
<StackLayout padding="20">
<Button text="Image Async?" tap="{{save}}" />
<Image width="200" height="200" src="{{ src }}"/>
<Image marginTop="10" width="200" height="200" src="{{ savedData }}" />
<Image marginTop="10" width="50" height="50" imageSource="{{ resizedImage }}" />
</StackLayout>
</ScrollView>
</Page>