+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Skip to content
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ cascade¶
+
cascade offers a drop-in replacement for DropdownMenu with support for nested menus, smooth height animations and 0dp vertical content paddings.
implementation "me.saket.cascade:cascade-compose:2.3.0"
+implementation "androidx.compose.material3:material3:…" // https://d.android.com/jetpack/androidx/releases/compose-material3
+var isMenuVisible by rememberSaveable { mutableStateOf(false) }
+
+CascadeDropdownMenu(
+ expanded = isMenuVisible,
+ onDismissRequest = { isMenuVisible = false }
+) {
+ DropdownMenuItem(
+ text = { Text("Horizon") },
+ children = {
+ DropdownMenuItem(
+ text = { Text("Zero Dawn") },
+ onClick = { … }
+ )
+ DropdownMenuItem(
+ text = { Text("Forbidden West") },
+ onClick = { … }
+ )
+ }
+ )
+}
+
+
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/compose/navigation/index.html b/compose/navigation/index.html
new file mode 100644
index 0000000..753852a
--- /dev/null
+++ b/compose/navigation/index.html
@@ -0,0 +1,540 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Skip to content
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Navigation¶
+For sub-menus, cascade will automatically navigate back when their title is clicked. For manual navigation, CascadeState#navigateBack() can be used.
val state = rememberCascadeState()
+CascadeDropdownMenu(
+ state = state,
+ …
+) {
+ DropdownMenuItem(
+ text = { Text("Remove") },
+ childrenHeader = {
+ // childrenHeader is an optional parameter. If you don't provide one, cascade
+ // will automatically use the text composable ("Remove" in this example).
+ DropdownMenuHeader { Text("Are you sure?") }
+ },
+ children = {
+ DropdownMenuItem(
+ text = { Text("Burn them all") },
+ onClick = { … }
+ )
+ DropdownMenuItem(
+ text = { Text("Take me back") },
+ onClick = { state.navigateBack() }
+ )
+ },
+ )
+}
+
+
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/compose/theming/index.html b/compose/theming/index.html
new file mode 100644
index 0000000..740827b
--- /dev/null
+++ b/compose/theming/index.html
@@ -0,0 +1,623 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Skip to content
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Theming¶
+Because cascade reuses the same components as DropdownMenu, you can follow the
+official material3 documentation for theming menus and expect the
+specs to work with cascade.
CascadeDropdownMenu¶
+| Design attribute | +Theme token | +
|---|---|
| Shape | +MaterialTheme.shapes.extraSmall |
+
| Background color | +MaterialTheme.colorScheme.surface |
+
DropdownMenuHeader¶
+| Design attribute | +Theme token | +
|---|---|
| Content color | +LocalContentColor with 60% opacity |
+
| Text style | +MaterialTheme.typography.labelLarge with 90% font size and letter spacing |
+
DropdownMenuItem¶
+| Design attribute | +Theme token | +
|---|---|
| Icon size | +24dp minimum |
+
| Colors | +MenuItemColors |
+
| Text style | +MaterialTheme.typography.labelLarge |
+
+
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/index.html b/index.html
new file mode 100644
index 0000000..479f358
--- /dev/null
+++ b/index.html
@@ -0,0 +1,542 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Skip to content
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ cascade¶
+
cascade builds nested popup menus with smooth height animations. It is designed to be a drop-in replacement for both PopupMenu and DropdownMenu, so using it in your project is beautifully only a word away. Try out the sample app to see it in action.
implementation "me.saket.cascade:cascade:2.3.0"
+implementation "me.saket.cascade:cascade-compose:2.3.0"
+
+
+
+
+
+
+
+
+See additional documentation for,
+-
+
- Compose UI +
- Views +
+
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/overrides/main.html b/overrides/main.html
new file mode 100644
index 0000000..e2a1603
--- /dev/null
+++ b/overrides/main.html
@@ -0,0 +1,17 @@
+{% extends "base.html" %}
+
+{% block extrahead %}
+
+{% if page and page.meta and page.meta.title %}
+
+{% elif page and page.title and not page.is_homepage %}
+
+{% else %}
+
+{% endif %}
+
+
+
+
+
+{% endblock %}
diff --git a/search/search_index.json b/search/search_index.json
new file mode 100644
index 0000000..330fa03
--- /dev/null
+++ b/search/search_index.json
@@ -0,0 +1 @@
+{"config":{"lang":["en"],"separator":"[\\s\\-]+","pipeline":["stopWordFilter"]},"docs":[{"location":"","title":"cascade","text":"cascade builds nested popup menus with smooth height animations. It is designed to be a drop-in replacement for both PopupMenu and DropdownMenu, so using it in your project is beautifully only a word away. Try out the sample app to see it in action.
implementation \"me.saket.cascade:cascade:2.3.0\"\nimplementation \"me.saket.cascade:cascade-compose:2.3.0\"\n- DropdownMenu(\n+ CascadeDropdownMenu(\n expanded = expanded,\n onDismissRequest = { expanded = false }\n) { \n DropdownMenuItem(\u2026)\n DropdownMenuItem(\u2026)\n}\n- val popup = PopupMenu(context, anchor)\n+ val popup = CascadePopupMenu(context, anchor)\n popup.inflate(R.menu.nicolas_cage_movies)\n popup.show()\nSee additional documentation for,
- Compose UI
- Views
cascade offers a drop-in replacement for DropdownMenu with support for nested menus, smooth height animations and 0dp vertical content paddings.
implementation \"me.saket.cascade:cascade-compose:2.3.0\"\nimplementation \"androidx.compose.material3:material3:\u2026\" // https://d.android.com/jetpack/androidx/releases/compose-material3\nvar isMenuVisible by rememberSaveable { mutableStateOf(false) }\nCascadeDropdownMenu(\nexpanded = isMenuVisible,\nonDismissRequest = { isMenuVisible = false }\n) {\nDropdownMenuItem(\ntext = { Text(\"Horizon\") },\nchildren = {\nDropdownMenuItem(\ntext = { Text(\"Zero Dawn\") },\nonClick = { \u2026 }\n)\nDropdownMenuItem(\ntext = { Text(\"Forbidden West\") },\nonClick = { \u2026 }\n)\n}\n)\n}\nFor sub-menus, cascade will automatically navigate back when their title is clicked. For manual navigation, CascadeState#navigateBack() can be used.
val state = rememberCascadeState()\nCascadeDropdownMenu(\nstate = state, \u2026\n) {\nDropdownMenuItem(\ntext = { Text(\"Remove\") },\nchildrenHeader = {\n// childrenHeader is an optional parameter. If you don't provide one, cascade\n// will automatically use the text composable (\"Remove\" in this example).\nDropdownMenuHeader { Text(\"Are you sure?\") }\n},\nchildren = {\nDropdownMenuItem(\ntext = { Text(\"Burn them all\") },\nonClick = { \u2026 }\n)\nDropdownMenuItem(\ntext = { Text(\"Take me back\") },\nonClick = { state.navigateBack() }\n)\n},\n)\n}\nBecause cascade reuses the same components as DropdownMenu, you can follow the official material3 documentation for theming menus and expect the specs to work with cascade.
CascadeDropdownMenu","text":"Design attribute Theme token Shape MaterialTheme.shapes.extraSmall Background color MaterialTheme.colorScheme.surface"},{"location":"compose/theming/#dropdownmenuheader","title":"DropdownMenuHeader","text":"Design attribute Theme token Content color LocalContentColor with 60% opacity Text style MaterialTheme.typography.labelLarge with 90% font size and letter spacing"},{"location":"compose/theming/#dropdownmenuitem","title":"DropdownMenuItem","text":"Design attribute Theme token Icon size 24dp minimum Colors MenuItemColors Text style MaterialTheme.typography.labelLarge"},{"location":"views/","title":"cascade","text":"cascade offers a drop-in replacement for PopupMenu. For guidance on creating & nesting menus, the official documentation can be followed while replacing any usages of PopupMenu with CascadePopupMenu.
implementation \"me.saket.cascade:cascade:2.3.0\"\n- val popup = PopupMenu(context, anchor)\n+ val popup = CascadePopupMenu(context, anchor)\n popup.inflate(R.menu.nicolas_cage_movies)\n popup.show()\nToolbar uses PopupMenu for showing overflow menu without offering any way to change this. If you're replacing all PopupMenu usages in your project with cascade, there are a few ways you could achieve consistency by forcing Toolbar to use cascade:
-
The safest way is to extract out your toolbar menu items with
app:showAsAction=\"ifRoom\"into their own menu that is shown usingcascademanually. -
Alternatively,
cascadeoffers an override using reflection but is currently incompatible with Proguard:
toolbar.overrideAllPopupMenus { context, anchor ->\nCascadePopupMenu(context, anchor)\n}\n// The lambda can be collapsed into a reference\n// if you're only using the two-param constructor.\ntoolbar.overrideAllPopupMenus(with = ::CascadePopupMenu)\ncascade was originally inspired by Google Drive's that uses a variety of complex controls. For apps that want to create something similar, a batteries-included CascadePopupWindow is provided for use with custom layouts.
val customMenuView: View = \u2026\nval popup = CascadePopupWindow(context)\npopup.contentView.addView(customMenuView) // Also see contentView.goBack().\npopup.show(anchor)\nI really like Google Drive's popup menu that smoothly animates between sub-menus. Is there any existing library that recreates this? pic.twitter.com/bnalL56pcR
\u2014 Saket Narayan (@saketme) October 5, 2020"},{"location":"views/navigation/","title":"Navigation","text":"For sub-menus, cascade will automatically navigate back when their title is clicked. For manual navigation, cascade provides a back navigator:
val popup = CascadePopupMenu(context, anchor)\npopup.menu.addSubMenu(\"Remove\").also {\nit.setHeaderTitle(\"Are you sure?\")\nit.add(\"Burn them all\")\nit.add(\"Take me back\").setOnMenuItemClickListener {\npopup.navigateBack()\n}\n}\nYou can also provide your own back navigator. This injection is useful if a navigator is needed before an instance of cascade can be created.
val backNavigator = CascadeBackNavigator()\nCascadePopupMenu(context, anchor, backNavigator)\ncascade is great for apps that prefer applying dynamic themes at runtime, which PopupMenu makes it extremely hard to do so. By providing a CascadePopupMenu.Styler object, you can adjust colors, spacings and text styles from Kotlin (example).
CascadePopupMenu(\nstyler = CascadePopupMenu.Styler(\u2026)\n)\nBy default, cascade will pick up values from your theme in the same way as PopupMenu would.
<style name=\"AppTheme\">\n<item name=\"popupMenuStyle\">@style/PopupMenuStyle</item>\n<item name=\"colorControlNormal\">@color/menu_icon_color</item>\n<item name=\"android:textColorPrimary\">@color/menu_item_text_color</item>\n<item name=\"android:textColorSecondary\">@color/menu_title_text_color</item>\n</style>\n<style name=\"PopupMenuStyle\" parent=\"@style/Widget.AppCompat.PopupMenu\">\n<item name=\"android:popupBackground\">...</item>\n<item name=\"android:popupElevation\">...</item>\n</style>\n
+
+
+
+ Skip to content
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Custom layouts¶
+cascade was originally inspired by Google Drive's that uses a variety of complex controls. For apps that want to create something similar, a batteries-included CascadePopupWindow is provided for use with custom layouts.
val customMenuView: View = …
+
+val popup = CascadePopupWindow(context)
+popup.contentView.addView(customMenuView) // Also see contentView.goBack().
+popup.show(anchor)
++ + + + + + + +I really like Google Drive's popup menu that smoothly animates between sub-menus. Is there any existing library that recreates this? pic.twitter.com/bnalL56pcR
— Saket Narayan (@saketme) October 5, 2020
+
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/views/index.html b/views/index.html
new file mode 100644
index 0000000..ff3ba96
--- /dev/null
+++ b/views/index.html
@@ -0,0 +1,572 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Skip to content
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ cascade¶
+
cascade offers a drop-in replacement for PopupMenu. For guidance on creating & nesting menus, the official documentation can be followed while replacing any usages of PopupMenu with CascadePopupMenu.
- val popup = PopupMenu(context, anchor)
++ val popup = CascadePopupMenu(context, anchor)
+ popup.inflate(R.menu.nicolas_cage_movies)
+ popup.show()
+Consistency with Toolbar's overflow menu¶
+Toolbar uses PopupMenu for showing overflow menu without offering any way to change this. If you're replacing all PopupMenu usages in your project with cascade, there are a few ways you could achieve consistency by forcing Toolbar to use cascade:
-
+
-
+
The safest way is to extract out your toolbar menu items with
+app:showAsAction="ifRoom"into their own menu that is shown usingcascademanually.
+ -
+
Alternatively,
+cascadeoffers an override using reflection but is currently incompatible with Proguard:
+
+
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/views/navigation/index.html b/views/navigation/index.html
new file mode 100644
index 0000000..e4b6ba1
--- /dev/null
+++ b/views/navigation/index.html
@@ -0,0 +1,529 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Skip to content
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Navigation¶
+For sub-menus, cascade will automatically navigate back when their title is clicked. For manual navigation, cascade provides a back navigator:
val popup = CascadePopupMenu(context, anchor)
+
+popup.menu.addSubMenu("Remove").also {
+ it.setHeaderTitle("Are you sure?")
+ it.add("Burn them all")
+ it.add("Take me back").setOnMenuItemClickListener {
+ popup.navigateBack()
+ }
+}
+You can also provide your own back navigator. This injection is useful if a navigator is needed before an instance of cascade can be created.
+
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/views/theming/index.html b/views/theming/index.html
new file mode 100644
index 0000000..aaf0b67
--- /dev/null
+++ b/views/theming/index.html
@@ -0,0 +1,532 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Skip to content
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Theming¶
+cascade is great for apps that prefer applying dynamic themes at runtime, which PopupMenu makes it extremely hard to do so. By providing a CascadePopupMenu.Styler object, you can adjust colors, spacings and text styles from Kotlin (example).
By default, cascade will pick up values from your theme in the same way as PopupMenu would.
<style name="AppTheme">
+ <item name="popupMenuStyle">@style/PopupMenuStyle</item>
+ <item name="colorControlNormal">@color/menu_icon_color</item>
+ <item name="android:textColorPrimary">@color/menu_item_text_color</item>
+ <item name="android:textColorSecondary">@color/menu_title_text_color</item>
+</style>
+
+<style name="PopupMenuStyle" parent="@style/Widget.AppCompat.PopupMenu">
+ <item name="android:popupBackground">...</item>
+ <item name="android:popupElevation">...</item>
+</style>
+
+
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file