Display contains everything about an element rendering. It is the basis of every style, for every element. Each element can be block, inline, flow or flex.
Represents a box and contains all the style inside. If the display is none, no style is included. Otherwise, the display type requires the corresponding styles. I.e. if using a flex container, then only styles applying to flex container can be used. If using a block container, only styles applying to block can be used, and so on.
You don't use it directly, but rather generating one with the corresponding
functions, then giving it to a function which needs one. If you want to bypass
it, you can use Display.displayBoxToCouples
, which generates the equivalent
CSS.
{ outsideDisplay : OutsideDisplay
, insideDisplay : InsideDisplay
, maybeBox : Maybe Elegant.Box.Box
}
Represents the style from outside the display. Can be inline, block, or flex-item.
Represents the style from inside a display. Can be flow, or flex (and containing flex details).
{ listStyleType : Maybe ListStyleType
, alignment : Maybe Alignment
, overflow : Maybe Elegant.Overflow.FullOverflow
, textOverflow : Maybe TextOverflow
, dimensions : Maybe Elegant.Dimensions.Dimensions
}
Contains all styles which can be applied to a block.
It is automatically instanciated by Display.block
.
Represents the type of the list style. Can be none, disc, circle, square, decimal or georgian.
Represents the alignment inside a block. Can be center, right, left or justify.
Represents the text-overflow. Can be ellipsis.
defaultBlockDetails : BlockDetails
listStyleNone : Modifiers.Modifier BlockDetails
Set the list style to none.
listStyleDisc : Modifiers.Modifier BlockDetails
Set the list style to disc.
listStyleCircle : Modifiers.Modifier BlockDetails
Set the list style to circle.
listStyleSquare : Modifiers.Modifier BlockDetails
Set the list style to square.
listStyleDecimal : Modifiers.Modifier BlockDetails
Set the list style to decimal.
listStyleGeorgian : Modifiers.Modifier BlockDetails
Set the list style to georgian.
alignment : Alignment -> Modifiers.Modifier BlockDetails
Accepts the alignment and modifies the block accordingly.
right : Alignment
Defines the alignment as right.
center : Alignment
Defines the alignment as center.
left : Alignment
Defines the alignment as left.
justify : Alignment
Defines the alignment as justify.
overflow : Modifiers Elegant.Overflow.FullOverflow -> Modifiers.Modifier BlockDetails
Accepts a list of Overflow modifiers and modifies the block accordingly.
textOverflowEllipsis : Modifiers.Modifier BlockDetails
Modifies the block to give an text-overflow ellipsis.
dimensions : Modifiers Elegant.Dimensions.Dimensions -> Modifiers.Modifier BlockDetails
Accepts dimensions modifiers and modifies the block accordingly.
fullWidth : Modifiers.Modifier BlockDetails
displayBoxToCouples : DisplayBox -> List ( String, String )
Compiles a DisplayBox to the corresponding CSS list of tuples.
Handles only defined styles, ignoring Nothing
fields.