Tabs

Tabbed content panels for organizing related content into switchable views.

Basic Tabs

This is the content of Tab 1.

This is the content of Tab 2.

This is the content of Tab 3.

      @{
      var tabConfig = new Dictionary<string, PinesTabConfigItem>()
      {
          { "TabOne", new PinesTabConfigItem { TabName = "January", Order = 1 } },
          { "TabTwo", new PinesTabConfigItem { TabName = "February", Order = 2 } },
          { "TabThree", new PinesTabConfigItem { TabName = "March", Order = 3 } },
      };
  }

  <pines-tabs tab-config="tabConfig">
      <slot name="TabOne">
          <p>This is the content of Tab 1.</p>
      </slot>
      <slot name="TabTwo">
          <p>This is the content of Tab 2.</p>
      </slot>
      <slot name="TabThree">
          <p>This is the content of Tab 3.</p>
      </slot>
  </pines-tabs>