Nos bénévoles n'ont pas encore traduit cet article en Français. Aidez-nous à réaliser cette tâche !
An element used for window resizing. If you place a custom resizing button inside the resizer, the user will be able to resize the window by dragging it. The resizer will send a command event after the resize is complete.
Note: Starting in Gecko 2.0, you can also specify a target element using the element
attribute, to use the resizer
to resize the specified element instead of the window.
Examples
Resizing a window
<window xmlns="https://www.mozilla.org/keymaster/gat...re.is.only.xul" hidechrome="true" windowtype="main" orient="vertical" sizemode="normal" width="400" height="300" persist="screenX screenY width height"> <hbox flex="1"> <vbox width="2" style="background-color: grey;"> <resizer dir="topleft" height="2" style="cursor: nw-resize;"/> <resizer dir="left" flex="1" style="cursor: w-resize;"/> <resizer dir="bottomleft" height="2" style="cursor: sw-resize;"/> </vbox> <vbox flex="1"> <resizer dir="top" height="2" style="background-color: grey; cursor: n-resize;"/> <browser flex="1" id="browser" type="content-primary"/> <resizer dir="bottom" height="2" style="background-color: grey; cursor: s-resize;"/> </vbox> <vbox width="2" style="background-color: grey; overflow: hidden;"> <resizer dir="topright" height="2" style="cursor: ne-resize;"/> <resizer dir="right" flex="1" style="cursor: e-resize;"/> <resizer dir="bottomright" height="2" style="cursor: se-resize;"/> </vbox> </hbox> </window>
Resizing an element
<stack style="border: 1px solid black;"> <button id="button" label="Resizable" left="18" top="18" right="18" bottom="18"/> <resizer dir="topleft" style="background: black; -moz-appearance: none;" element="button" left="0" top="0" width="16" height="16"/> <resizer dir="topright" style="background: black; -moz-appearance: none;" element="button" right="0" top="0" width="16" height="16"/> <resizer dir="bottomleft" style="background: black; -moz-appearance: none;" element="button" left="0" bottom="0" width="16" height="16"/> <resizer dir="bottomright" style="background: black; -moz-appearance: none;" element="button" right="0" bottom="0" width="16" height="16"/> </stack>
Attributes
-
dir
- Type: one of the values below
- The direction that the window is resized.
-
-
left
- Resized to the left.
-
right
- Resized to the right.
-
top
- Resized up.
-
bottom
- Resized down.
-
bottomstart
- Resized down and toward the start of the line (toward the left for left-to-right locales, toward the right for right-to-left locales).
-
bottomend
- Resized down and toward the end of the line (toward the right for left-to-right locales, toward the left for right-to-left locales).
-
bottomleft
- Resized down and to the left.
-
bottomright
- Resized down and to the right.
-
topleft
- Resized up and to the left.
-
topright
- Resized up and to the right.
-
type
- Type: string
- Set this to the value "window" for a resizing grip that appears in the bottom corner of the window, used for resizing the window. As some platforms provide this resizing grip automatically, this type of resizer element will be hidden and ensure that the window does not get an extra resizer.
Inherited from XUL element |
Properties
Inherited Properties |
Methods
Related
TBD