# Footer ## Description The BitFooter component renders a bar at the bottom of a site or an application, holding whatever content belongs there: a copyright line, legal links, social icons or a toolbar of actions. It renders a semantic footer element - the contentinfo landmark of the page - and lays its content out in a horizontal line whose color, variant, size, alignment, wrapping, gutters and spacing are all parameters. It can stay in the flow or be pinned to the bottom of the viewport, revealing itself only while the page is scrolled up, or sliding out of the way on demand. ## Parameters | Name | Type | Default Value | Description | | :--- | :--- | :------------ | :---------- | | Absolute | `bool` | false | Renders the footer with an absolute position at the bottom of its nearest positioned ancestor. Fixed takes precedence over it, and it takes precedence over Sticky. | | Alignment | `BitAlignment?` | null | Gets or sets the horizontal distribution of the content of the BitFooter (the CSS justify-content of the container). Baseline and Stretch act on the cross axis (the vertical alignment) instead. | | Bordered | `bool` | false | Renders a divider line on the top edge of the BitFooter to separate it from the content above. | | ChildContent | `RenderFragment?` | null | Gets or sets the content to be rendered inside the BitFooter. | | Classes | `BitFooterClassStyles?` | null | Custom CSS classes for different parts of the BitFooter. | | Color | `BitColor?` | null | The general color of the BitFooter. It is applied through the Variant: as the background color in the Fill variant, and as the text and border color in the Outline and Text variants. | | Elevated | `bool` | false | Renders the BitFooter with a shadow cast upwards, to lift it above the content it overlaps. | | Fixed | `bool` | false | Renders the footer with a fixed position at the bottom of the page. It takes precedence over Absolute and Sticky when more than one of them is set. | | Gap | `string?` | null | Gets or sets the space between the children of the BitFooter (the CSS gap of the container). It takes any CSS length or the two value form of the gap shorthand. | | Height | `int?` | null | Gets or sets the height of the BitFooter (in pixels). The height includes the paddings and the border of the footer, and a Fixed or Sticky footer adds the bottom safe area inset of the device on top of it. | | Hidden | `bool` | false | Slides the BitFooter out of the view, and brings it back when it is turned off again. A hidden footer is also marked inert, so nothing inside it can be clicked or reached with the keyboard while it is out of the view. | | NoGutter | `bool` | false | Removes the default paddings around the content of the BitFooter, so it can span the full width of the footer. | | OnRevealChanged | `EventCallback<bool>` | | Callback for when the reveal state of the footer changes. The provided value is true when the footer is revealed. Only invoked while Reveal is enabled. | | Reveal | `bool` | false | Slides the footer out of the view while the page is scrolled down and brings it back while the page is scrolled up. It only has an effect on a Fixed or Sticky footer, since the others have nothing to slide over. | | RevealOffset | `int?` | null | Gets or sets how far (in pixels) the scroll has to travel from the top before a Reveal footer starts hiding itself. The footer stays revealed while the scroll is still within this offset. | | Size | `BitSize?` | null | The size of the BitFooter, which determines the paddings around its content. | | Sticky | `bool` | false | Renders the footer with a sticky position at the bottom of the viewport. Unlike Fixed, it stays in the normal flow, so it never overlaps the content. | | Styles | `BitFooterClassStyles?` | null | Custom CSS styles for different parts of the BitFooter. | | Translucent | `bool` | false | Softens the background of the BitFooter and blurs what passes behind it, for the frosted glass look of a footer pinned over scrolling content. Only the Fill variant has a background to soften. | | Variant | `BitVariant?` | null | The visual variant of the BitFooter. | | VerticalAlign | `BitAlignment?` | null | Gets or sets the vertical alignment of the content of the BitFooter (the CSS align-items of the container). Only Start, End, Center, Baseline and Stretch align a line on the cross axis, so the three space distributions are ignored here. | | Wrap | `bool` | false | Lets the content of the BitFooter wrap onto more than one line instead of being squeezed into a single one. The lines are packed by VerticalAlign and separated by the row part of Gap. | | AriaLabel | `string?` | null | Gets or sets the accessible label for the component, used by assistive technologies. | | Class | `string?` | null | Gets or sets the CSS class name(s) to apply to the rendered element. | | Dir | `BitDir?` | null | Gets or sets the text directionality for the component's content. | | ForceAnimation | `bool` | false | Gets or sets a value indicating whether the component's animations play at their full duration even when reduced motion is requested. | | HtmlAttributes | `Dictionary<string, object>` | new Dictionary<string, object>() | Captures additional HTML attributes to be applied to the rendered element, in addition to the component's parameters. | | Id | `string?` | null | Gets or sets the unique identifier for the component's root element. | | IsEnabled | `bool` | true | Gets or sets a value indicating whether the component is enabled and can respond to user interaction. | | Style | `string?` | null | Gets or sets the CSS style string to apply to the rendered element. | | TabIndex | `string?` | null | Gets or sets the tab order index for the component when navigating with the keyboard. | | Visibility | `BitVisibility` | BitVisibility.Visible | Gets or sets the visibility state (visible, hidden, or collapsed) of the component. | ## Public Members | Name | Type | Default Value | Description | | :--- | :--- | :------------ | :---------- | | IsRevealed | `bool` | true | Gets a value indicating whether the footer is currently revealed. It reports the scroll driven reveal state alone, so it is always true unless Reveal is enabled, and stays true for a footer slid out of the view with Hidden. | | UniqueId | `Guid` | Guid.NewGuid() | Gets the readonly unique identifier for the component's root element, assigned when the component instance is constructed. | | RootElement | `ElementReference` | | Gets the reference to the root HTML element associated with this component. | ## Enums ### BitAlignment Enum | Name | Value | Description | | :--- | :--- | :---------- | | Start | 0 | Packs the content at the start of the line, or at the top of the footer. | | End | 1 | Packs the content at the end of the line, or at the bottom of the footer. | | Center | 2 | Packs the content at the center of the line, or in the middle of the footer. | | SpaceBetween | 3 | Distributes the free space between the items, with no space at the two edges. Ignored by VerticalAlign. | | SpaceAround | 4 | Distributes the free space around the items, so the edges get half of what sits between the items. Ignored by VerticalAlign. | | SpaceEvenly | 5 | Distributes the free space evenly between the items and at the two edges. Ignored by VerticalAlign. | | Baseline | 6 | Aligns the content on its baseline (the cross axis of the footer). | | Stretch | 7 | Stretches the content to the full height of the footer (the cross axis). | ### BitColor Enum | Name | Value | Description | | :--- | :--- | :---------- | | Primary | 0 | Primary general color. | | Secondary | 1 | Secondary general color. | | Tertiary | 2 | Tertiary general color. | | Info | 3 | Info general color. | | Success | 4 | Success general color. | | Warning | 5 | Warning general color. | | SevereWarning | 6 | SevereWarning general color. | | Error | 7 | Error general color. | | PrimaryBackground | 8 | Primary background color. | | SecondaryBackground | 9 | Secondary background color. | | TertiaryBackground | 10 | Tertiary background color. | | PrimaryForeground | 11 | Primary foreground color. | | SecondaryForeground | 12 | Secondary foreground color. | | TertiaryForeground | 13 | Tertiary foreground color. | | PrimaryBorder | 14 | Primary border color. | | SecondaryBorder | 15 | Secondary border color. | | TertiaryBorder | 16 | Tertiary border color. | ### BitSize Enum | Name | Value | Description | | :--- | :--- | :---------- | | Small | 0 | The small size. | | Medium | 1 | The medium size. | | Large | 2 | The large size. | ### BitVariant Enum | Name | Value | Description | | :--- | :--- | :---------- | | Fill | 0 | Fill styled variant. | | Outline | 1 | Outline styled variant. | | Text | 2 | Text styled variant. | ### BitVisibility Enum | Name | Value | Description | | :--- | :--- | :---------- | | Visible | 0 | The content of the component is visible. | | Hidden | 1 | The content of the component is hidden, but the space it takes on the page remains (visibility:hidden). | | Collapsed | 2 | The component is hidden (display:none). | ### BitDir Enum | Name | Value | Description | | :--- | :--- | :---------- | | Ltr | 0 | Ltr (left to right) is to be used for languages that are written from the left to the right (like English). | | Rtl | 1 | Rtl (right to left) is to be used for languages that are written from the right to the left (like Arabic). | | Auto | 2 | Auto lets the user agent decide. It uses a basic algorithm as it parses the characters inside the element until it finds a character with a strong directionality, then applies that directionality to the whole element. | ## Sub Classes ### BitFooterClassStyles Properties | Name | Type | Default Value | Description | | :--- | :--- | :------------ | :---------- | | Root | `string?` | null | Custom CSS classes/styles for the root element of the BitFooter. | | Container | `string?` | null | Custom CSS classes/styles for the container element of the BitFooter that wraps its content. | ## Examples \n**Basic**: ```razor I'm a Footer I'm a Footer with a fixed 80px height I'm a disabled Footer ``` \n**Variant**: ```razor Fill Outline Text ``` \n**Alignment**: ```razor ``` \n**Wrap**: ```razor ``` \n**Border & elevation**: ```razor Bordered Elevated Bordered & Elevated ``` \n**Gutter**: ```razor With the default gutter ``` \n**Gap**: ```razor ``` \n**Position**: ```razor ``` \n**Reveal**: ```razor ``` ```csharp private bool isFooterRevealed = true; ``` \n**Hidden**: ```razor ``` ```csharp private bool isSelectionMode; ``` \n**Translucent**: ```razor ``` \n**Accessibility**: ```razor Discard Save ``` \n**Usage**: ```razor

Made with ♥ by bit platform

``` \n**Color**: ```razor Primary Secondary Tertiary Info Success Warning SevereWarning Error PrimaryBackground SecondaryBackground TertiaryBackground PrimaryForeground SecondaryForeground TertiaryForeground PrimaryBorder SecondaryBorder TertiaryBorder ``` \n**Size**: ```razor Small Medium Large ``` \n**Style & Class**: ```razor Styled Footer Classed Footer Styles Classes ``` \n**RTL**: ```razor ```