Pivot - bit BlazorUI

Pivot

Tab
TabPage

The Pivot control and related tabs pattern are used for navigating frequently accessed, distinct content categories. Pivots allow for navigation between two or more contentviews and relies on text headers to articulate the different sections of content. Tapping on a pivot item header navigates to that header's section content. Tabs are a visual variant of Pivot that use a combination of icons and textor just icons to articulate section content.

Usage

Basic

<BitPivot>
    <BitPivotItem HeaderText="File">
        <h3>Pivot #1</h3>
        <div>
            Once upon a time, stories wove connections between people, a symphony of voices crafting shared dreams.
            Each word carried meaning, each pause brought understanding. Placeholder text reminds us of that moment
            when possibilities are limitless, waiting for content to emerge. The spaces here are open for growth,
            for ideas that change minds and spark emotions. This is where the journey begins—your words will lead the way.
        </div>
    </BitPivotItem>
    <BitPivotItem HeaderText="Shared with me">
        <h3>Pivot #2</h3>
        <div>
            Every story starts with a blank canvas, a quiet space waiting to be filled with ideas, emotions, and dreams.
            These placeholder words symbolize the beginning—a moment of possibility where creativity has yet to take shape.
            Imagine this text as the scaffolding of something remarkable, a foundation upon which connections and
            inspirations will be built. Soon, these lines will transform into narratives that provoke thought,
            spark emotion, and resonate with those who encounter them. Until then, they remind us of the beauty
            in potential—the quiet magic of beginnings, where everything is still to come, and the possibilities
            are boundless. This space is yours to craft, yours to shape, yours to bring to life.
        </div>
    </BitPivotItem>
    <BitPivotItem HeaderText="Recent">
        <h3>Pivot #3</h3>
        <div>
            In the beginning, there is silence—a blank canvas yearning to be filled, a quiet space where creativity waits
            to awaken. These words are temporary, standing in place of ideas yet to come, a glimpse into the infinite
            possibilities that lie ahead. Think of this text as a bridge, connecting the empty spaces of now with the
            vibrant narratives of tomorrow. It whispers of the stories waiting to be told, of the thoughts yet to be
            shaped into meaning, and the emotions ready to resonate with every reader.
        </div>
    </BitPivotItem>
</BitPivot>

Icon and Count

<BitPivot>
    <BitPivotItem HeaderText="Files" IconName="@BitIconName.Info">
        <h1>Pivot #1: Files</h1>
        <div>
            Once upon a time, stories wove connections between people, a symphony of voices crafting shared dreams.
            Each word carried meaning, each pause brought understanding. Placeholder text reminds us of that moment
            when possibilities are limitless, waiting for content to emerge. The spaces here are open for growth,
            for ideas that change minds and spark emotions. This is where the journey begins—your words will lead the way.
        </div>
    </BitPivotItem>
    <BitPivotItem HeaderText="Shared with me" ItemCount="32">
        <h1>Pivot #2: Shared with me</h1>
        <div>
            Every story starts with a blank canvas, a quiet space waiting to be filled with ideas, emotions, and dreams.
            These placeholder words symbolize the beginning—a moment of possibility where creativity has yet to take shape.
            Imagine this text as the scaffolding of something remarkable, a foundation upon which connections and
            inspirations will be built. Soon, these lines will transform into narratives that provoke thought,
            spark emotion, and resonate with those who encounter them. Until then, they remind us of the beauty
            in potential—the quiet magic of beginnings, where everything is still to come, and the possibilities
            are boundless. This space is yours to craft, yours to shape, yours to bring to life.
        </div>
    </BitPivotItem>
    <BitPivotItem HeaderText="Recent" IconName="@BitIconName.Info" ItemCount="12">
        <h1>Pivot #3: Recent</h1>
        <div>
            In the beginning, there is silence—a blank canvas yearning to be filled, a quiet space where creativity waits
            to awaken. These words are temporary, standing in place of ideas yet to come, a glimpse into the infinite
            possibilities that lie ahead. Think of this text as a bridge, connecting the empty spaces of now with the
            vibrant narratives of tomorrow. It whispers of the stories waiting to be told, of the thoughts yet to be
            shaped into meaning, and the emotions ready to resonate with every reader.
        </div>
    </BitPivotItem>
</BitPivot>

Size

<BitPivot Size="@BitSize.Large">
    <BitPivotItem HeaderText="Large File">
        <h1>Pivot #1: Large File</h1>
        <div>
            Once upon a time, stories wove connections between people, a symphony of voices crafting shared dreams.
            Each word carried meaning, each pause brought understanding. Placeholder text reminds us of that moment
            when possibilities are limitless, waiting for content to emerge. The spaces here are open for growth,
            for ideas that change minds and spark emotions. This is where the journey begins—your words will lead the way.
        </div>
    </BitPivotItem>
    <BitPivotItem HeaderText="Large Shared with me">
        <h1>Pivot #2: Large Shared with me</h1>
        <div>
            Every story starts with a blank canvas, a quiet space waiting to be filled with ideas, emotions, and dreams.
            These placeholder words symbolize the beginning—a moment of possibility where creativity has yet to take shape.
            Imagine this text as the scaffolding of something remarkable, a foundation upon which connections and
            inspirations will be built. Soon, these lines will transform into narratives that provoke thought,
            spark emotion, and resonate with those who encounter them. Until then, they remind us of the beauty
            in potential—the quiet magic of beginnings, where everything is still to come, and the possibilities
            are boundless. This space is yours to craft, yours to shape, yours to bring to life.
        </div>
    </BitPivotItem>
    <BitPivotItem HeaderText="Large Recent">
        <h1>Pivot #3: Large Recent</h1>
        <div>
            In the beginning, there is silence—a blank canvas yearning to be filled, a quiet space where creativity waits
            to awaken. These words are temporary, standing in place of ideas yet to come, a glimpse into the infinite
            possibilities that lie ahead. Think of this text as a bridge, connecting the empty spaces of now with the
            vibrant narratives of tomorrow. It whispers of the stories waiting to be told, of the thoughts yet to be
            shaped into meaning, and the emotions ready to resonate with every reader.
        </div>
    </BitPivotItem>
</BitPivot>

HeaderType

<BitPivot HeaderType="@BitPivotHeaderType.Tab">
    <BitPivotItem HeaderText="File tab">
        <h1>Pivot #1: File tab</h1>
        <div>
            Once upon a time, stories wove connections between people, a symphony of voices crafting shared dreams.
            Each word carried meaning, each pause brought understanding. Placeholder text reminds us of that moment
            when possibilities are limitless, waiting for content to emerge. The spaces here are open for growth,
            for ideas that change minds and spark emotions. This is where the journey begins—your words will lead the way.
        </div>
    </BitPivotItem>
    <BitPivotItem HeaderText="Shared with me tab">
        <h1>Pivot #2: Shared with me tab</h1>
        <div>
            Every story starts with a blank canvas, a quiet space waiting to be filled with ideas, emotions, and dreams.
            These placeholder words symbolize the beginning—a moment of possibility where creativity has yet to take shape.
            Imagine this text as the scaffolding of something remarkable, a foundation upon which connections and
            inspirations will be built. Soon, these lines will transform into narratives that provoke thought,
            spark emotion, and resonate with those who encounter them. Until then, they remind us of the beauty
            in potential—the quiet magic of beginnings, where everything is still to come, and the possibilities
            are boundless. This space is yours to craft, yours to shape, yours to bring to life.
        </div>
    </BitPivotItem>
    <BitPivotItem HeaderText="Recent tab">
        <h1>Pivot #3: Recent tab</h1>
        <div>
            In the beginning, there is silence—a blank canvas yearning to be filled, a quiet space where creativity waits
            to awaken. These words are temporary, standing in place of ideas yet to come, a glimpse into the infinite
            possibilities that lie ahead. Think of this text as a bridge, connecting the empty spaces of now with the
            vibrant narratives of tomorrow. It whispers of the stories waiting to be told, of the thoughts yet to be
            shaped into meaning, and the emotions ready to resonate with every reader.
        </div>
    </BitPivotItem>
</BitPivot>

Binding

<BitPivot @bind-SelectedKey="selectedKey">
    <BitPivotItem Key="1" HeaderText="Samples">
        <h1>Pivot #1: Samples</h1>
        <div>
            Once upon a time, stories wove connections between people, a symphony of voices crafting shared dreams.
            Each word carried meaning, each pause brought understanding. Placeholder text reminds us of that moment
            when possibilities are limitless, waiting for content to emerge. The spaces here are open for growth,
            for ideas that change minds and spark emotions. This is where the journey begins—your words will lead the way.
        </div>
    </BitPivotItem>
    <BitPivotItem Key="2" HeaderText="Files">
        <h1>Pivot #2: Files</h1>
        <div>
            Every story starts with a blank canvas, a quiet space waiting to be filled with ideas, emotions, and dreams.
            These placeholder words symbolize the beginning—a moment of possibility where creativity has yet to take shape.
            Imagine this text as the scaffolding of something remarkable, a foundation upon which connections and
            inspirations will be built. Soon, these lines will transform into narratives that provoke thought,
            spark emotion, and resonate with those who encounter them. Until then, they remind us of the beauty
            in potential—the quiet magic of beginnings, where everything is still to come, and the possibilities
            are boundless. This space is yours to craft, yours to shape, yours to bring to life.
        </div>
    </BitPivotItem>
    <BitPivotItem Key="3" HeaderText="Recent">
        <h1>Pivot #3: Recent</h1>
        <div>
            In the beginning, there is silence—a blank canvas yearning to be filled, a quiet space where creativity waits
            to awaken. These words are temporary, standing in place of ideas yet to come, a glimpse into the infinite
            possibilities that lie ahead. Think of this text as a bridge, connecting the empty spaces of now with the
            vibrant narratives of tomorrow. It whispers of the stories waiting to be told, of the thoughts yet to be
            shaped into meaning, and the emotions ready to resonate with every reader.
        </div>
    </BitPivotItem>
    <BitPivotItem Key="4" HeaderText="Last">
        <h1>Pivot #4: Last</h1>
        <div>
            In this space, potential reigns supreme. It is a moment suspended in time, where imagination dances freely and
            each word has the power to transform into something extraordinary. Here lies the start of something new—an
            opportunity to craft, inspire, and create. Whether it's a tale of adventure, a reflection of truth, or an
            idea that sparks change, these lines are yours to fill, to shape, and to make uniquely yours. The journey
            begins here, in this quiet moment where everything is possible.
        </div>
    </BitPivotItem>
</BitPivot>

<BitButton Variant="BitVariant.Outline"
            IconName="@BitIconName.CaretSolidLeft"
            IsEnabled="@(selectedKey != "1")"
            OnClick="(() => selectedKey = (int.Parse(selectedKey) - 1).ToString())">
    Prev
</BitButton>
<BitButton Variant="BitVariant.Outline"
            IconName="@BitIconName.CaretSolidRight"
            IsEnabled="@(selectedKey != "4")"
            OnClick="(() => selectedKey = (int.Parse(selectedKey) + 1).ToString())">
    Next
</BitButton>
@code {
    private string selectedKey = "1";
}

Detached

Hello I am Fooooooooooooo

<div style="border:1px solid gray;padding:10px;">
    @if (detachedSelectedKey == "Foo")
    {
        <div>Hello I am Fooooooooooooo</div>
    }
    else if (detachedSelectedKey == "Bar")
    {
        <div>Hello I am Barrrrrrrrrrrr</div>
    }
    else if (detachedSelectedKey == "Bas")
    {
        <div>Hello I am Bassssssssssss</div>
    }
    else if (detachedSelectedKey == "Biz")
    {
        <div>Hello I am Bizzzzzzzzzzzz</div>
    }
</div>
<hr />
<BitPivot HeaderOnly="true"
          DefaultSelectedKey="Foo"
          OnItemClick="@(item => detachedSelectedKey = item?.Key)">
    <BitPivotItem HeaderText="Foo" Key="Foo"></BitPivotItem>
    <BitPivotItem HeaderText="Bar" Key="Bar"></BitPivotItem>
    <BitPivotItem HeaderText="Bas" Key="Bas"></BitPivotItem>
    <BitPivotItem HeaderText="Biz" Key="Biz"></BitPivotItem>
</BitPivot>
@code {
    private string detachedSelectedKey = "Foo";
}

Events

Last header clicked:

<BitPivot OnItemClick="@(item => selectedPivotItem = item)">
    <BitPivotItem HeaderText="Foo">
        <h1>Pivot #1: Foo</h1>
        <div>
            Once upon a time, stories wove connections between people, a symphony of voices crafting shared dreams.
            Each word carried meaning, each pause brought understanding. Placeholder text reminds us of that moment
            when possibilities are limitless, waiting for content to emerge. The spaces here are open for growth,
            for ideas that change minds and spark emotions. This is where the journey begins—your words will lead the way.
        </div>
    </BitPivotItem>
    <BitPivotItem HeaderText="Bar">
        <h1>Pivot #2: Bar</h1>
        <div>
            Every story starts with a blank canvas, a quiet space waiting to be filled with ideas, emotions, and dreams.
            These placeholder words symbolize the beginning—a moment of possibility where creativity has yet to take shape.
            Imagine this text as the scaffolding of something remarkable, a foundation upon which connections and
            inspirations will be built. Soon, these lines will transform into narratives that provoke thought,
            spark emotion, and resonate with those who encounter them. Until then, they remind us of the beauty
            in potential—the quiet magic of beginnings, where everything is still to come, and the possibilities
            are boundless. This space is yours to craft, yours to shape, yours to bring to life.
        </div>
    </BitPivotItem>
    <BitPivotItem HeaderText="Bas">
        <h1>Pivot #3: Bas</h1>
        <div>
            In the beginning, there is silence—a blank canvas yearning to be filled, a quiet space where creativity waits
            to awaken. These words are temporary, standing in place of ideas yet to come, a glimpse into the infinite
            possibilities that lie ahead. Think of this text as a bridge, connecting the empty spaces of now with the
            vibrant narratives of tomorrow. It whispers of the stories waiting to be told, of the thoughts yet to be
            shaped into meaning, and the emotions ready to resonate with every reader.
        </div>
    </BitPivotItem>
    <BitPivotItem HeaderText="Biz">
        <h1>Pivot #4: Biz</h1>
        <div>
            In this space, potential reigns supreme. It is a moment suspended in time, where imagination dances freely and
            each word has the power to transform into something extraordinary. Here lies the start of something new—an
            opportunity to craft, inspire, and create. Whether it's a tale of adventure, a reflection of truth, or an
            idea that sparks change, these lines are yours to fill, to shape, and to make uniquely yours. The journey
            begins here, in this quiet moment where everything is possible.
        </div>
    </BitPivotItem>
</BitPivot>

<div>Last header clicked: <b>@selectedPivotItem?.HeaderText</b></div>
@code {
    private BitPivotItem selectedPivotItem;
}

Templates

<BitPivot>
    <BitPivotItem>
        <Header>
            <span style="color:red">Header #1</span>
        </Header>
        <Body>
            <h1>Pivot #1</h1>
            <div>
                Once upon a time, stories wove connections between people, a symphony of voices crafting shared dreams.
                Each word carried meaning, each pause brought understanding. Placeholder text reminds us of that moment
                when possibilities are limitless, waiting for content to emerge. The spaces here are open for growth,
                for ideas that change minds and spark emotions. This is where the journey begins—your words will lead the way.
            </div>
        </Body>
    </BitPivotItem>
    <BitPivotItem ItemCount="99">
        <Header>
            <i style="color:green" class="bit-icon bit-icon--HeartFill"></i>
            <span style="color:blue">Header #2</span>
            <i style="color:green" class="bit-icon bit-icon--HeartFill"></i>
        </Header>
        <Body>
            <h1>Pivot #2</h1>
            <div>
                Every story starts with a blank canvas, a quiet space waiting to be filled with ideas, emotions, and dreams.
                These placeholder words symbolize the beginning—a moment of possibility where creativity has yet to take shape.
                Imagine this text as the scaffolding of something remarkable, a foundation upon which connections and
                inspirations will be built. Soon, these lines will transform into narratives that provoke thought,
                spark emotion, and resonate with those who encounter them. Until then, they remind us of the beauty
                in potential—the quiet magic of beginnings, where everything is still to come, and the possibilities
                are boundless. This space is yours to craft, yours to shape, yours to bring to life.
            </div>
        </Body>
    </BitPivotItem>
    <BitPivotItem IconName="@BitIconName.Inbox">
        <Header>
            <span style="color:rebeccapurple">Header <i style="color:purple" class="bit-icon bit-icon--HeartFill"></i> #3</span>
        </Header>
        <Body>
            <h1>Pivot #3</h1>
            <div>
                In the beginning, there is silence—a blank canvas yearning to be filled, a quiet space where creativity waits
                to awaken. These words are temporary, standing in place of ideas yet to come, a glimpse into the infinite
                possibilities that lie ahead. Think of this text as a bridge, connecting the empty spaces of now with the
                vibrant narratives of tomorrow. It whispers of the stories waiting to be told, of the thoughts yet to be
                shaped into meaning, and the emotions ready to resonate with every reader.
            </div>
        </Body>
    </BitPivotItem>
</BitPivot>

Alignment

<BitPivot Alignment="BitAlignment.Center">
    <BitPivotItem HeaderText="File">
        <h1>Pivot #1</h1>
        <div>
            Once upon a time, stories wove connections between people, a symphony of voices crafting shared dreams.
            Each word carried meaning, each pause brought understanding. Placeholder text reminds us of that moment
            when possibilities are limitless, waiting for content to emerge. The spaces here are open for growth,
            for ideas that change minds and spark emotions. This is where the journey begins—your words will lead the way.
        </div>
    </BitPivotItem>
    <BitPivotItem HeaderText="Shared with me">
        <h2>Pivot #2</h2>
        <div>
            Every story starts with a blank canvas, a quiet space waiting to be filled with ideas, emotions, and dreams.
            These placeholder words symbolize the beginning—a moment of possibility where creativity has yet to take shape.
            Imagine this text as the scaffolding of something remarkable, a foundation upon which connections and
            inspirations will be built. Soon, these lines will transform into narratives that provoke thought,
            spark emotion, and resonate with those who encounter them. Until then, they remind us of the beauty
            in potential—the quiet magic of beginnings, where everything is still to come, and the possibilities
            are boundless. This space is yours to craft, yours to shape, yours to bring to life.
        </div>
    </BitPivotItem>
    <BitPivotItem HeaderText="Recent">
        <h3>Pivot #3</h3>
        <div>
            In the beginning, there is silence—a blank canvas yearning to be filled, a quiet space where creativity waits
            to awaken. These words are temporary, standing in place of ideas yet to come, a glimpse into the infinite
            possibilities that lie ahead. Think of this text as a bridge, connecting the empty spaces of now with the
            vibrant narratives of tomorrow. It whispers of the stories waiting to be told, of the thoughts yet to be
            shaped into meaning, and the emotions ready to resonate with every reader.
        </div>
    </BitPivotItem>
</BitPivot>

Position

Pivot Position: Top

Pivot Position: Bottom

Pivot Position: Start

Pivot Position: End

<BitPivot Position="BitPivotPosition.Top">
    <BitPivotItem HeaderText="File">
        <h1>Pivot #1: File</h1>
        <div>
            Once upon a time, stories wove connections between people, a symphony of voices crafting shared dreams.
            Each word carried meaning, each pause brought understanding. Placeholder text reminds us of that moment
            when possibilities are limitless, waiting for content to emerge. The spaces here are open for growth,
            for ideas that change minds and spark emotions. This is where the journey begins—your words will lead the way.
        </div>
    </BitPivotItem>
    <BitPivotItem HeaderText="Shared">
        <h1>Pivot #2: Shared</h1>
        <div>
            Every story starts with a blank canvas, a quiet space waiting to be filled with ideas, emotions, and dreams.
            These placeholder words symbolize the beginning—a moment of possibility where creativity has yet to take shape.
            Imagine this text as the scaffolding of something remarkable, a foundation upon which connections and
            inspirations will be built. Soon, these lines will transform into narratives that provoke thought,
            spark emotion, and resonate with those who encounter them. Until then, they remind us of the beauty
            in potential—the quiet magic of beginnings, where everything is still to come, and the possibilities
            are boundless. This space is yours to craft, yours to shape, yours to bring to life.
        </div>
    </BitPivotItem>
    <BitPivotItem HeaderText="Recent">
        <h1>Pivot #3: Recent</h1>
        <div>
            In the beginning, there is silence—a blank canvas yearning to be filled, a quiet space where creativity waits
            to awaken. These words are temporary, standing in place of ideas yet to come, a glimpse into the infinite
            possibilities that lie ahead. Think of this text as a bridge, connecting the empty spaces of now with the
            vibrant narratives of tomorrow. It whispers of the stories waiting to be told, of the thoughts yet to be
            shaped into meaning, and the emotions ready to resonate with every reader.
        </div>
    </BitPivotItem>
</BitPivot>

<BitPivot Position="BitPivotPosition.Bottom">
    <BitPivotItem HeaderText="File">
        <h1>Pivot #1: File</h1>
        <div>
            Once upon a time, stories wove connections between people, a symphony of voices crafting shared dreams.
            Each word carried meaning, each pause brought understanding. Placeholder text reminds us of that moment
            when possibilities are limitless, waiting for content to emerge. The spaces here are open for growth,
            for ideas that change minds and spark emotions. This is where the journey begins—your words will lead the way.
        </div>
    </BitPivotItem>
    <BitPivotItem HeaderText="Shared">
        <h1>Pivot #2: Shared</h1>
        <div>
            Every story starts with a blank canvas, a quiet space waiting to be filled with ideas, emotions, and dreams.
            These placeholder words symbolize the beginning—a moment of possibility where creativity has yet to take shape.
            Imagine this text as the scaffolding of something remarkable, a foundation upon which connections and
            inspirations will be built. Soon, these lines will transform into narratives that provoke thought,
            spark emotion, and resonate with those who encounter them. Until then, they remind us of the beauty
            in potential—the quiet magic of beginnings, where everything is still to come, and the possibilities
            are boundless. This space is yours to craft, yours to shape, yours to bring to life.
        </div>
    </BitPivotItem>
    <BitPivotItem HeaderText="Recent">
        <h1>Pivot #3: Recent</h1>
        <div>
            In the beginning, there is silence—a blank canvas yearning to be filled, a quiet space where creativity waits
            to awaken. These words are temporary, standing in place of ideas yet to come, a glimpse into the infinite
            possibilities that lie ahead. Think of this text as a bridge, connecting the empty spaces of now with the
            vibrant narratives of tomorrow. It whispers of the stories waiting to be told, of the thoughts yet to be
            shaped into meaning, and the emotions ready to resonate with every reader.
        </div>
    </BitPivotItem>
</BitPivot>

<BitPivot Position="BitPivotPosition.Start">
    <BitPivotItem HeaderText="File">
        <h1>Pivot #1: File</h1>
        <div>
            Once upon a time, stories wove connections between people, a symphony of voices crafting shared dreams.
            Each word carried meaning, each pause brought understanding. Placeholder text reminds us of that moment
            when possibilities are limitless, waiting for content to emerge. The spaces here are open for growth,
            for ideas that change minds and spark emotions. This is where the journey begins—your words will lead the way.
        </div>
    </BitPivotItem>
    <BitPivotItem HeaderText="Shared with me" Style="width:130px">
        <h1>Pivot #2: Shared with me</h1>
        <div>
            Every story starts with a blank canvas, a quiet space waiting to be filled with ideas, emotions, and dreams.
            These placeholder words symbolize the beginning—a moment of possibility where creativity has yet to take shape.
            Imagine this text as the scaffolding of something remarkable, a foundation upon which connections and
            inspirations will be built. Soon, these lines will transform into narratives that provoke thought,
            spark emotion, and resonate with those who encounter them. Until then, they remind us of the beauty
            in potential—the quiet magic of beginnings, where everything is still to come, and the possibilities
            are boundless. This space is yours to craft, yours to shape, yours to bring to life.
        </div>
    </BitPivotItem>
    <BitPivotItem HeaderText="Recent">
        <h1>Pivot #3: Recent</h1>
        <div>
            In the beginning, there is silence—a blank canvas yearning to be filled, a quiet space where creativity waits
            to awaken. These words are temporary, standing in place of ideas yet to come, a glimpse into the infinite
            possibilities that lie ahead. Think of this text as a bridge, connecting the empty spaces of now with the
            vibrant narratives of tomorrow. It whispers of the stories waiting to be told, of the thoughts yet to be
            shaped into meaning, and the emotions ready to resonate with every reader.
        </div>
    </BitPivotItem>
</BitPivot>

<BitPivot Position="BitPivotPosition.End">
    <BitPivotItem HeaderText="File">
        <h1>Pivot #1: File</h1>
        <div>
            Once upon a time, stories wove connections between people, a symphony of voices crafting shared dreams.
            Each word carried meaning, each pause brought understanding. Placeholder text reminds us of that moment
            when possibilities are limitless, waiting for content to emerge. The spaces here are open for growth,
            for ideas that change minds and spark emotions. This is where the journey begins—your words will lead the way.
        </div>
    </BitPivotItem>
    <BitPivotItem HeaderText="Shared with me" Style="width:130px">
        <h1>Pivot #2: Shared with me</h1>
        <div>
            Every story starts with a blank canvas, a quiet space waiting to be filled with ideas, emotions, and dreams.
            These placeholder words symbolize the beginning—a moment of possibility where creativity has yet to take shape.
            Imagine this text as the scaffolding of something remarkable, a foundation upon which connections and
            inspirations will be built. Soon, these lines will transform into narratives that provoke thought,
            spark emotion, and resonate with those who encounter them. Until then, they remind us of the beauty
            in potential—the quiet magic of beginnings, where everything is still to come, and the possibilities
            are boundless. This space is yours to craft, yours to shape, yours to bring to life.
        </div>
    </BitPivotItem>
    <BitPivotItem HeaderText="Recent">
        <h1>Pivot #3: Recent</h1>
        <div>
            In the beginning, there is silence—a blank canvas yearning to be filled, a quiet space where creativity waits
            to awaken. These words are temporary, standing in place of ideas yet to come, a glimpse into the infinite
            possibilities that lie ahead. Think of this text as a bridge, connecting the empty spaces of now with the
            vibrant narratives of tomorrow. It whispers of the stories waiting to be told, of the thoughts yet to be
            shaped into meaning, and the emotions ready to resonate with every reader.
        </div>
    </BitPivotItem>
</BitPivot>

Style & Class

Component's Style & Class:

Styles & Classes:

<style>
    .custom-class {
        margin: 1rem;
        padding-left: 0.25rem;
        box-shadow: 0 0 1rem lightskyblue;
    }

    .custom-selected-item {
        background-color: goldenrod;
    }

    .custom-header {
        overflow: hidden;
        border-radius: 1rem;
        border: 1px solid gray;
    }

    .custom-body {
        padding: 0.5rem;
        background-color: deepskyblue;
    }
</style>

<BitPivot Style="border: 1px solid tomato;">
    <BitPivotItem HeaderText="File">
        <h1>Pivot #1</h1>
        <div>
            Once upon a time, stories wove connections between people, a symphony of voices crafting shared dreams.
            Each word carried meaning, each pause brought understanding. Placeholder text reminds us of that moment
            when possibilities are limitless, waiting for content to emerge. The spaces here are open for growth,
            for ideas that change minds and spark emotions. This is where the journey begins—your words will lead the way.
        </div>
    </BitPivotItem>
    <BitPivotItem HeaderText="Shared with me">
        <h2>Pivot #2</h2>
        <div>
            Every story starts with a blank canvas, a quiet space waiting to be filled with ideas, emotions, and dreams.
            These placeholder words symbolize the beginning—a moment of possibility where creativity has yet to take shape.
            Imagine this text as the scaffolding of something remarkable, a foundation upon which connections and
            inspirations will be built. Soon, these lines will transform into narratives that provoke thought,
            spark emotion, and resonate with those who encounter them. Until then, they remind us of the beauty
            in potential—the quiet magic of beginnings, where everything is still to come, and the possibilities
            are boundless. This space is yours to craft, yours to shape, yours to bring to life.
        </div>
    </BitPivotItem>
    <BitPivotItem HeaderText="Recent">
        <h3>Pivot #3</h3>
        <div>
            In the beginning, there is silence—a blank canvas yearning to be filled, a quiet space where creativity waits
            to awaken. These words are temporary, standing in place of ideas yet to come, a glimpse into the infinite
            possibilities that lie ahead. Think of this text as a bridge, connecting the empty spaces of now with the
            vibrant narratives of tomorrow. It whispers of the stories waiting to be told, of the thoughts yet to be
            shaped into meaning, and the emotions ready to resonate with every reader.
        </div>
    </BitPivotItem>
</BitPivot>

<BitPivot Class="custom-class">
    <BitPivotItem HeaderText="File">
        <h1>Pivot #1</h1>
        <div>
            Once upon a time, stories wove connections between people, a symphony of voices crafting shared dreams.
            Each word carried meaning, each pause brought understanding. Placeholder text reminds us of that moment
            when possibilities are limitless, waiting for content to emerge. The spaces here are open for growth,
            for ideas that change minds and spark emotions. This is where the journey begins—your words will lead the way.
        </div>
    </BitPivotItem>
    <BitPivotItem HeaderText="Shared with me">
        <h2>Pivot #2</h2>
        <div>
            Every story starts with a blank canvas, a quiet space waiting to be filled with ideas, emotions, and dreams.
            These placeholder words symbolize the beginning—a moment of possibility where creativity has yet to take shape.
            Imagine this text as the scaffolding of something remarkable, a foundation upon which connections and
            inspirations will be built. Soon, these lines will transform into narratives that provoke thought,
            spark emotion, and resonate with those who encounter them. Until then, they remind us of the beauty
            in potential—the quiet magic of beginnings, where everything is still to come, and the possibilities
            are boundless. This space is yours to craft, yours to shape, yours to bring to life.
        </div>
    </BitPivotItem>
    <BitPivotItem HeaderText="Recent">
        <h3>Pivot #3</h3>
        <div>
            In the beginning, there is silence—a blank canvas yearning to be filled, a quiet space where creativity waits
            to awaken. These words are temporary, standing in place of ideas yet to come, a glimpse into the infinite
            possibilities that lie ahead. Think of this text as a bridge, connecting the empty spaces of now with the
            vibrant narratives of tomorrow. It whispers of the stories waiting to be told, of the thoughts yet to be
            shaped into meaning, and the emotions ready to resonate with every reader.
        </div>
    </BitPivotItem>
</BitPivot>

<BitPivot Styles="@(new() { HeaderIcon = "color: tomato;", HeaderText = "color: purple;" })">
    <BitPivotItem HeaderText="File" IconName="Info">
        <h1>Pivot #1</h1>
        <div>
            Once upon a time, stories wove connections between people, a symphony of voices crafting shared dreams.
            Each word carried meaning, each pause brought understanding. Placeholder text reminds us of that moment
            when possibilities are limitless, waiting for content to emerge. The spaces here are open for growth,
            for ideas that change minds and spark emotions. This is where the journey begins—your words will lead the way.
        </div>
    </BitPivotItem>
    <BitPivotItem HeaderText="Shared with me">
        <h2>Pivot #2</h2>
        <div>
            Every story starts with a blank canvas, a quiet space waiting to be filled with ideas, emotions, and dreams.
            These placeholder words symbolize the beginning—a moment of possibility where creativity has yet to take shape.
            Imagine this text as the scaffolding of something remarkable, a foundation upon which connections and
            inspirations will be built. Soon, these lines will transform into narratives that provoke thought,
            spark emotion, and resonate with those who encounter them. Until then, they remind us of the beauty
            in potential—the quiet magic of beginnings, where everything is still to come, and the possibilities
            are boundless. This space is yours to craft, yours to shape, yours to bring to life.
        </div>
    </BitPivotItem>
    <BitPivotItem HeaderText="Recent">
        <h3>Pivot #3</h3>
        <div>
            In the beginning, there is silence—a blank canvas yearning to be filled, a quiet space where creativity waits
            to awaken. These words are temporary, standing in place of ideas yet to come, a glimpse into the infinite
            possibilities that lie ahead. Think of this text as a bridge, connecting the empty spaces of now with the
            vibrant narratives of tomorrow. It whispers of the stories waiting to be told, of the thoughts yet to be
            shaped into meaning, and the emotions ready to resonate with every reader.
        </div>
    </BitPivotItem>
</BitPivot>

<BitPivot Classes="@(new() { Body = "custom-body", SelectedItem = "custom-selected-item", Header = "custom-header" })">
    <BitPivotItem HeaderText="File">
        <h1>Pivot #1</h1>
        <div>
            Once upon a time, stories wove connections between people, a symphony of voices crafting shared dreams.
            Each word carried meaning, each pause brought understanding. Placeholder text reminds us of that moment
            when possibilities are limitless, waiting for content to emerge. The spaces here are open for growth,
            for ideas that change minds and spark emotions. This is where the journey begins—your words will lead the way.
        </div>
    </BitPivotItem>
    <BitPivotItem HeaderText="Shared with me">
        <h2>Pivot #2</h2>
        <div>
            Every story starts with a blank canvas, a quiet space waiting to be filled with ideas, emotions, and dreams.
            These placeholder words symbolize the beginning—a moment of possibility where creativity has yet to take shape.
            Imagine this text as the scaffolding of something remarkable, a foundation upon which connections and
            inspirations will be built. Soon, these lines will transform into narratives that provoke thought,
            spark emotion, and resonate with those who encounter them. Until then, they remind us of the beauty
            in potential—the quiet magic of beginnings, where everything is still to come, and the possibilities
            are boundless. This space is yours to craft, yours to shape, yours to bring to life.
        </div>
    </BitPivotItem>
    <BitPivotItem HeaderText="Recent">
        <h3>Pivot #3</h3>
        <div>
            In the beginning, there is silence—a blank canvas yearning to be filled, a quiet space where creativity waits
            to awaken. These words are temporary, standing in place of ideas yet to come, a glimpse into the infinite
            possibilities that lie ahead. Think of this text as a bridge, connecting the empty spaces of now with the
            vibrant narratives of tomorrow. It whispers of the stories waiting to be told, of the thoughts yet to be
            shaped into meaning, and the emotions ready to resonate with every reader.
        </div>
    </BitPivotItem>
</BitPivot>

RTL

<BitPivot Dir="BitDir.Rtl" OverflowBehavior="@BitPivotOverflowBehavior.Scroll">
    <BitPivotItem HeaderText="اسناد" IconName="@BitIconName.Info">
        لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ و با استفاده از طراحان گرافیک است.
        چاپگرها و متون بلکه روزنامه و مجله در ستون و سطرآنچنان که لازم است و
        برای شرایط فعلی تکنولوژی مورد نیاز و کاربردهای متنوع با هدف بهبود ابزارهای کاربردی می باشد.
    </BitPivotItem>
    <BitPivotItem HeaderText="آخرین ها" ItemCount="8">
        کتابهای زیادی در شصت و سه درصد گذشته، حال و آینده شناخت فراوان جامعه و متخصصان را می طلبد تا با نرم افزارها
        شناخت بیشتری را برای طراحان رایانه ای علی الخصوص طراحان خلاقی و فرهنگ پیشرو در زبان فارسی ایجاد کرد.
    </BitPivotItem>
    <BitPivotItem HeaderText="شخصی" IconName="@BitIconName.Info" ItemCount="6">
        در این صورت می توان امید داشت که تمام و دشواری موجود در ارائه
        راهکارها و شرایط سخت تایپ به پایان رسد وزمان مورد نیاز شامل حروفچینی دستاوردهای
        اصلی و جوابگوی سوالات پیوسته اهل دنیای موجود طراحی اساسا مورد استفاده قرار گیرد
    </BitPivotItem>
</BitPivot>

<BitPivot Dir="BitDir.Rtl" Position="BitPivotPosition.Start">
    <BitPivotItem HeaderText="اسناد">
        لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ و با استفاده از طراحان گرافیک است.
        چاپگرها و متون بلکه روزنامه و مجله در ستون و سطرآنچنان که لازم است و
        برای شرایط فعلی تکنولوژی مورد نیاز و کاربردهای متنوع با هدف بهبود ابزارهای کاربردی می باشد.
        لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ و با استفاده از طراحان گرافیک است.
        چاپگرها و متون بلکه روزنامه و مجله در ستون و سطرآنچنان که لازم است و
        برای شرایط فعلی تکنولوژی مورد نیاز و کاربردهای متنوع با هدف بهبود ابزارهای کاربردی می باشد.
    </BitPivotItem>
    <BitPivotItem HeaderText="آخرین ها">
        کتابهای زیادی در شصت و سه درصد گذشته، حال و آینده شناخت فراوان جامعه و متخصصان را می طلبد تا با نرم افزارها
        شناخت بیشتری را برای طراحان رایانه ای علی الخصوص طراحان خلاقی و فرهنگ پیشرو در زبان فارسی ایجاد کرد.
        کتابهای زیادی در شصت و سه درصد گذشته، حال و آینده شناخت فراوان جامعه و متخصصان را می طلبد تا با نرم افزارها
        شناخت بیشتری را برای طراحان رایانه ای علی الخصوص طراحان خلاقی و فرهنگ پیشرو در زبان فارسی ایجاد کرد.
    </BitPivotItem>
    <BitPivotItem HeaderText="شخصی">
        در این صورت می توان امید داشت که تمام و دشواری موجود در ارائه
        راهکارها و شرایط سخت تایپ به پایان رسد وزمان مورد نیاز شامل حروفچینی دستاوردهای
        اصلی و جوابگوی سوالات پیوسته اهل دنیای موجود طراحی اساسا مورد استفاده قرار گیرد.
        در این صورت می توان امید داشت که تمام و دشواری موجود در ارائه
        راهکارها و شرایط سخت تایپ به پایان رسد وزمان مورد نیاز شامل حروفچینی دستاوردهای
        اصلی و جوابگوی سوالات پیوسته اهل دنیای موجود طراحی اساسا مورد استفاده قرار گیرد.
    </BitPivotItem>
</BitPivot>

<BitPivot Dir="BitDir.Rtl" Position="BitPivotPosition.End">
    <BitPivotItem HeaderText="اسناد">
        لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ و با استفاده از طراحان گرافیک است.
        چاپگرها و متون بلکه روزنامه و مجله در ستون و سطرآنچنان که لازم است و
        برای شرایط فعلی تکنولوژی مورد نیاز و کاربردهای متنوع با هدف بهبود ابزارهای کاربردی می باشد.
        لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ و با استفاده از طراحان گرافیک است.
        چاپگرها و متون بلکه روزنامه و مجله در ستون و سطرآنچنان که لازم است و
        برای شرایط فعلی تکنولوژی مورد نیاز و کاربردهای متنوع با هدف بهبود ابزارهای کاربردی می باشد.
    </BitPivotItem>
    <BitPivotItem HeaderText="آخرین ها">
        کتابهای زیادی در شصت و سه درصد گذشته، حال و آینده شناخت فراوان جامعه و متخصصان را می طلبد تا با نرم افزارها
        شناخت بیشتری را برای طراحان رایانه ای علی الخصوص طراحان خلاقی و فرهنگ پیشرو در زبان فارسی ایجاد کرد.
        کتابهای زیادی در شصت و سه درصد گذشته، حال و آینده شناخت فراوان جامعه و متخصصان را می طلبد تا با نرم افزارها
        شناخت بیشتری را برای طراحان رایانه ای علی الخصوص طراحان خلاقی و فرهنگ پیشرو در زبان فارسی ایجاد کرد.
    </BitPivotItem>
    <BitPivotItem HeaderText="شخصی">
        در این صورت می توان امید داشت که تمام و دشواری موجود در ارائه
        راهکارها و شرایط سخت تایپ به پایان رسد وزمان مورد نیاز شامل حروفچینی دستاوردهای
        اصلی و جوابگوی سوالات پیوسته اهل دنیای موجود طراحی اساسا مورد استفاده قرار گیرد.
        در این صورت می توان امید داشت که تمام و دشواری موجود در ارائه
        راهکارها و شرایط سخت تایپ به پایان رسد وزمان مورد نیاز شامل حروفچینی دستاوردهای
        اصلی و جوابگوی سوالات پیوسته اهل دنیای موجود طراحی اساسا مورد استفاده قرار گیرد.
    </BitPivotItem>
</BitPivot>

API

BitPivot parameters

Name	Type	Default value	Description
Alignment	BitAlignment?	null	Determines the alignment of the header section of the pivot.
ChildContent	RenderFragment?	null	The content of pivot.
Classes	BitPivotClassStyles?	null	Custom CSS classes for different parts of the pivot.
DefaultSelectedKey	string?	null	Default selected key for the pivot.
HeaderOnly	bool	false	Whether to skip rendering the tabpanel with the content of the selected tab.
HeaderType	BitPivotHeaderType	BitPivotHeaderType.Link	The type of the pivot header items.
MountAll	bool	false	Mounts all tabs at render time and hide non-selected tabs with CSS styles instead of not-rendering them (useful for processing/extracting data).
OnItemClick	EventCallback<BitPivotItem>		Callback for when the a pivot item is clicked.
OnChange	EventCallback<BitPivotItem>		Callback for when the selected pivot item changes.
OverflowBehavior	BitOverflowBehavior	BitOverflowBehavior.None	Overflow behavior when there is not enough room to display all of the links/tabs.
Position	BitPivotPosition	BitPivotPosition.Top	Position of the pivot header.
SelectedKey	string?	null	Key of the selected pivot item.
Size	BitSize?	null	The size of the pivot header items.
Styles	BitPivotClassStyles?	null	Custom CSS styles for different parts of the pivot.

BitComponentBase parameters

Name	Type	Default value	Description
AriaLabel	string?	null	The aria-label of the control for the benefit of screen readers.
Class	string?	null	Custom CSS class for the root element of the component.
Dir	BitDir?	null	Determines the component direction.
HtmlAttributes	Dictionary<string, object>	new Dictionary<string, object>()	Capture and render additional attributes in addition to the component's parameters.
Id	string?	null	Custom id attribute for the root element. if null the UniqueId will be used instead.
IsEnabled	bool	true	Whether or not the component is enabled.
Style	string?	null	Custom CSS style for the root element of the component.
Visibility	BitVisibility	BitVisibility.Visible	Whether the component is visible, hidden or collapsed.

BitComponentBase public members

Name	Type	Default value	Description
UniqueId	Guid	Guid.NewGuid()	The readonly unique id of the root element. it will be assigned to a new Guid at component instance construction.
RootElement	ElementReference		The ElementReference of the root element.

BitPivotItem properties

Name	Type	Default value	Description
Body	RenderFragment?	null	The content of the pivot item, It can be Any custom tag or a text (alias of ChildContent).
BodyClass	string?	null	The custom css class of the content of the pivot item.
BodyStyle	string?	null	The custom css style of the content of the pivot item.
ChildContent	RenderFragment?	null	The content of the pivot item, It can be Any custom tag or a text.
Header	RenderFragment?	null	The content of the pivot item header, It can be Any custom tag or a text.
HeaderText	string?	null	The text of the pivot item header, The text displayed of each pivot link.
IconName	string?	null	The icon name for the icon shown next to the pivot link.
ItemCount	int	0	Defines an optional item count displayed in parentheses just after the linkText.
Key	string?	null	A required key to uniquely identify a pivot item.

BitPivotClassStyles properties

Name	Type	Default value	Description
Root	string?	null	Custom CSS classes/styles for the root element of the BitPivot.
Header	string?	null	Custom CSS classes/styles for the header of the BitPivot.
Body	string?	null	Custom CSS classes/styles for the items body of the BitPivot.
HeaderItem	string?	null	Custom CSS classes/styles for the header item of the BitPivot.
SelectedItem	string?	null	Custom CSS classes/styles for the selected item of the BitPivot.
HeaderItemContent	string?	null	Custom CSS classes/styles for the header item content of the BitPivot.
HeaderIconContainer	string?	null	Custom CSS classes/styles for the header icon container of the BitPivot.
HeaderIcon	string?	null	Custom CSS classes/styles for the header icon of the BitPivot.
HeaderText	string?	null	Custom CSS classes/styles for the header text of the BitPivot.
HeaderItemCount	string?	null	Custom CSS classes/styles for the header item count of the BitPivot.

BitAlignment enum

Name	Value	Description
Start	0
End	1
Center	2
SpaceBetween	3
SpaceAround	4
SpaceEvenly	5
Baseline	6
Stretch	7

BitPivotHeaderType enum

Name	Value	Description
Tab	0	Renders pivot header items as Tab.
Link	1	Renders pivot header items as link.

BitSize enum

Name	Value	Description
Small	0	The small size.
Medium	1	The medium size.
Large	2	The large size.

BitOverflowBehavior enum

Name	Value	Description
None	0	Pivot links will overflow the container and may not be visible.
Menu	1	Display an overflow menu that contains the tabs that don't fit.
Scroll	2	Display a scroll bar below of the tabs for moving between them.

BitPivotPosition enum

Name	Value	Description
Top	0	Display header at the top.
Bottom	1	Display header at the Bottom.
Start	2	Display header at the start (Left for LTR and Right for RTL).
End	3	Display header at the end (Right for LTR and Left for RTL).

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.

Feedback

You can give us your feedback through our GitHub repo by filing a new Issue or starting a new Discussion.

Or you can review / edit this page on GitHub.

Or you can review / edit this component on GitHub.

On this page

Pivot TabTabPage

Tab

TabPage

Usage

Basic

Pivot #1

Icon and Count

Pivot #1: Files

Size

Pivot #1: Large File

HeaderType

Pivot #1: File tab

Binding

Pivot #1: Samples

Detached

Events

Pivot #1: Foo

Templates

Pivot #1

Alignment

Pivot #1

Position

Pivot #1: File

Pivot #1: File

Pivot #1: File

Pivot #1: File

Style & Class

Pivot #1

Pivot #1

Pivot #1

Pivot #1

RTL

API

BitPivot parameters

Name

Type

Default value

Description

BitComponentBase parameters

Name

Type

Default value

Description

BitComponentBase public members

Name

Type

Default value

Description

BitPivotItem properties

Name

Type

Default value

Description

BitPivotClassStyles properties

Name

Type

Default value

Description

BitAlignment enum

Name

Value

Description

BitPivotHeaderType enum

Name

Value

Description

BitSize enum

Name

Value

Description

BitOverflowBehavior enum

Name

Value

Description

BitPivotPosition enum

Name

Value

Description

BitVisibility enum

Name

Pivot

Tab
TabPage