feat(form): flexContent-Option für Flex-Spalte im Formular-Inhalt
Der scrollbare Inhaltsbereich der Form kann bei Bedarf als Flex-Spalte gerendert werden, damit Masken-Kinder den verbleibenden Platz füllen und in sich scrollen können, statt die gesamte Maske scrollbar zu machen. Wirkt nur zusammen mit stickyButtons (Default true). Generated by Mistral Vibe. Co-Authored-By: Mistral Vibe <vibe@mistral.ai>
This commit is contained in:
1 parent
32afb35840
commit
929664453e
1 file changed
+16
-1
@@ -27,6 +27,13 @@ export interface iForm {
|
||||
* übergeben; die aufrufende Maske ist für Styling und Callbacks
|
||||
* verantwortlich. */
|
||||
extrabuttons?: m.Child[]
|
||||
/** Wenn true, wird der scrollbare Inhaltsbereich der Form als
|
||||
* Flex-Spalte gerendert. Masken können dann einzelne Kinder mit
|
||||
* flex-Styles ausstatten, z.B. einen Bereich, der den verbleibenden
|
||||
* Platz füllt (flex: '01 1 auto' + 'min-height': '0') und in sich
|
||||
* scrollt, statt die gesamte Maske scrollbar zu machen. Wirkt nur
|
||||
* zusammen mit stickyButtons (Default true). */
|
||||
flexContent?: boolean
|
||||
}
|
||||
|
||||
export const Form:m.ClosureComponent<iForm> = (vnode) => {
|
||||
@@ -126,6 +133,14 @@ export const Form:m.ClosureComponent<iForm> = (vnode) => {
|
||||
// Container, die Buttons bleiben am unteren Rand fixiert. Das
|
||||
// umschließende form-Element wird zum flex-Container, damit das
|
||||
// Layout auch bei Fenstergrößenänderung stabil bleibt.
|
||||
// Stil des scrollbaren Inhaltsbereichs; optional als Flex-Spalte
|
||||
// (flexContent), damit Masken-Kinder den verbleibenden Platz
|
||||
// füllen können.
|
||||
const contentStyle: any = {flex: '1', 'overflow-y': 'auto', 'padding-right': '8px'}
|
||||
if (vnode.attrs.flexContent === true) {
|
||||
contentStyle.display = 'flex'
|
||||
contentStyle['flex-direction'] = 'column'
|
||||
}
|
||||
if (stickyButtons) {
|
||||
return m("form", {
|
||||
style: {display: 'flex', 'flex-direction': 'column', height: '100%'},
|
||||
@@ -146,7 +161,7 @@ export const Form:m.ClosureComponent<iForm> = (vnode) => {
|
||||
}
|
||||
},
|
||||
// Scrollbarer Formular-Inhalt.
|
||||
m("div", {style: {flex: '1', 'overflow-y': 'auto', 'padding-right': '8px'}},
|
||||
m("div", {style: contentStyle},
|
||||
vnode.children
|
||||
),
|
||||
// Fixierter Button-Bereich.
|
||||
|
||||
Reference in new issue
Block a user