Elegant.Display

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.

Types


type DisplayBox

= DisplayBox

[['None', []], ['ContentsWrapper', ['Elegant.Display.Contents']]]

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.



type alias Contents =

{ outsideDisplay : Elegant.Display.OutsideDisplay, insideDisplay : Elegant.Display.InsideDisplay, maybeBox : Maybe.Maybe Elegant.Box.Box }



type OutsideDisplay

= OutsideDisplay

[['Inline', []], ['Block', ['Maybe.Maybe Elegant.Display.BlockDetails']], ['FlexItem', ['Maybe.Maybe Elegant.Flex.FlexItemDetails', 'Maybe.Maybe Elegant.Display.BlockDetails']], ['GridItem', ['Maybe.Maybe Elegant.Grid.GridItemDetails', 'Maybe.Maybe Elegant.Display.BlockDetails']]]

Represents the style from outside the display. Can be inline, block, or flex-item.



type InsideDisplay

= InsideDisplay

[['Flow', []], ['FlexContainer', ['Maybe.Maybe Elegant.Flex.FlexContainerDetails']], ['GridContainer', ['Maybe.Maybe Elegant.Grid.GridContainerDetails']]]

Represents the style from inside a display. Can be flow, or flex (and containing flex details).



type alias BlockDetails =

{ listStyleType : Maybe.Maybe Elegant.Display.ListStyleType, alignment : Maybe.Maybe Elegant.Display.Alignment, overflow : Maybe.Maybe Elegant.Overflow.FullOverflow, textOverflow : Maybe.Maybe Elegant.Display.TextOverflow, dimensions : Maybe.Maybe Elegant.Dimensions.Dimensions }

Contains all styles which can be applied to a block. It is automatically instanciated by Display.block.



type ListStyleType

[]

Represents the type of the list style. Can be none, disc, circle, square, decimal or georgian.



type Alignment

[]

Represents the alignment inside a block. Can be center, right, left or justify.



type TextOverflow

[]

Represents the text-overflow. Can be ellipsis.



defaultBlockDetails : Elegant.Display.BlockDetails


Modifiers

List


listStyleNone : Modifiers.Modifier Elegant.Display.BlockDetails

Set the list style to none.



listStyleDisc : Modifiers.Modifier Elegant.Display.BlockDetails

Set the list style to disc.



listStyleCircle : Modifiers.Modifier Elegant.Display.BlockDetails

Set the list style to circle.



listStyleSquare : Modifiers.Modifier Elegant.Display.BlockDetails

Set the list style to square.



listStyleDecimal : Modifiers.Modifier Elegant.Display.BlockDetails

Set the list style to decimal.



listStyleGeorgian : Modifiers.Modifier Elegant.Display.BlockDetails

Set the list style to georgian.


Alignment


alignment : Elegant.Display.Alignment -> Modifiers.Modifier Elegant.Display.BlockDetails

Accepts the alignment and modifies the block accordingly.



right : Elegant.Display.Alignment

Defines the alignment as right.



center : Elegant.Display.Alignment

Defines the alignment as center.



left : Elegant.Display.Alignment

Defines the alignment as left.



justify : Elegant.Display.Alignment

Defines the alignment as justify.


Overflow


overflow : Modifiers.Modifiers Elegant.Overflow.FullOverflow -> Modifiers.Modifier Elegant.Display.BlockDetails

Accepts a list of Overflow modifiers and modifies the block accordingly.



textOverflowEllipsis : Modifiers.Modifier Elegant.Display.BlockDetails

Modifies the block to give an text-overflow ellipsis.


Dimensions


dimensions : Modifiers.Modifiers Elegant.Dimensions.Dimensions -> Modifiers.Modifier Elegant.Display.BlockDetails

Accepts dimensions modifiers and modifies the block accordingly.



fullWidth : Modifiers.Modifier Elegant.Display.BlockDetails


Compilation


displayBoxToCouples : Elegant.Display.DisplayBox -> List.List ( String.String, String.String )

Compiles a DisplayBox to the corresponding CSS list of tuples. Handles only defined styles, ignoring Nothing fields.