How to design tabs like Google Chrome tabs?

How can I design a user interface with tabs like the one Google Chrome has, I mean each tab has to be able to:

1. Maximize
2. Close
3. Dragged and be stand alone.

I'm开发者_运维百科 using .net 2.0 (C#)

Thanks,

You may find it useful to look at an open source project such SharpDevelop I'm sure that have tabbed windows.

You could look in the chromium source code. The chromium project also seem to have a lot of resources for developers and many communication channels (http://www.chromium.org/developers)

I did it yesterday, but using sass and my own reset file as this screenshoot show.

You may notice in _widget_tab.scss that it support up to 24 tabs after the active one...

1. Feel free to customize it.
2. Also to replace &-active with .active or &:hover or &:focus to match your needs.
3. The _reset.css is optional but the result will look-like this JsFiddlle

Any how, these are my files :

1. _reset.scss

   /*
       Created on : Jun 12, 2015, 8:29:10 AM
       Author     : Upgrade <Salathiel Genese, Yimga Yimga at salathielgenese@gmail.com>
   */
   
   $tag-inline:span,a,rt,rp,dfn,abbr,q,cite,em,var,time,samp,i,b,sub,sup,small,strong,mark,ruby,ins,del,bdi,bdo,s,kbd,wbr,code;
   $tag-form  :form,fieldset,meter,select,legend,optgroup,label,option,datalist,input,output,keygen,textarea,button,progress;
   $tag-xture :body,aside,section,header,footer,nav,article,hgroup,address,h1,h2,h3,h4,h5,h6;
   $tag-media :img,area,map,embeb,object,param,source,iframe,canvas,track,audio,video,device;
   $tag-divide:div,pre,br,p,blocquote,hr,ol,dl,figcaption,ul,dt,figure,li,dd;
   $tag-table :table,caption,colgroup,col,tbody,thead,tfoot,tr,th,td;
   $tag-meta  :head,title,meta,base,link,style,noscript,script;
   $tag-menu  :menu,command,summary,details;
   
   html,#{$tag-inline},#{$tag-form},#{$tag-xture},#{$tag-media},#{$tag-divide},#{$tag-table},#{$tag-meta},#{$tag-menu}
   {
       margin: 0;
       padding: 0;
       display: none;
       border-radius: 0;
       outline-offset: 0;
       border-spacing: 0;
       border-collapse: collapse;
       border: 0 transparent none;
       outline: 0 transparent none;
   
       text-indent: 0;
       text-align: justify;
       text-transform: none;
       text-rendering: auto;
       text-decoration: none;
       text-shadow: 0 0 0 transparent none;
   
       speak: none;
       cursor: default;
       vertical-align: top;
       color: rgba(60,60,60,1);
       background-image: none;
       background-color: transparent;
       font: normal normal normal 0/0 sans-serif;
   
       -webkit-box-shadow: 0 0 0 transparent;
       -moz-box-shadow: 0 0 0 transparent;
       box-shadow: 0 0 0 transparent;
   
       -webkit-font-smoothing: antialiased;
       -moz-osx-font-smoothing: grayscale;
   
       -webkit-box-sizing: border-box;
       -moz-box-sizing: border-box;
       box-sizing: border-box;
   
       -webkit-margin-before: 0;
       -webkit-padding-start: 0;
       -webkit-margin-start: 0;
       -webkit-margin-after: 0;
       -webkit-margin-end: 0;
   
       -webkit-appearance: none;
       -moz-appearance: none;
       -ms-appearance: none;
       -o-appearance: none;
       appearance: none;
   }
   figure,legend,input,select,button,canvas,object,menu,img,area,map,embeb,audio,video
   {
       display: inline-block;
   }
   #{$tag-inline}
   {
       display: inline;
   }
   li
   {
       display: list-item;
   }
   html,form,fieldset,#{$tag-xture},iframe,div,pre,br,p,blocquote,hr,ol,dl,figcaption,ul,dt,figure,dd,command,summary,details,option
   {
       display: block;
   }
   table
   {
       display: table;
       >colgroup
       {
           display: table-column-group;
           >col
           {
               display: table-column;
           }
       }
       >caption
       {
           display: table-caption;
       }
       >thead
       {
           display: table-header-group;
       }
       >tbody
       {
           display: table-row-group;
       }
       >tfoot
       {
           display: table-footer-group;
       }
       >thead,>tbody,>tfoot
       {
           >tr
           {
               display: table-row;
               >th,td
               {
                   display: table-cell;
               }
           }
       }
   }
   #{$tag-inline},input,legend,label,button,li,dt,dd,command,summary
   {
       font: normal normal normal 12px/1 sans-serif;
   }
   header,h6,h5,h4,h3,h2,h1
   {
       font: normal normal normal 33px/1 serif;
   }
   @for $index from 1 through 6
   {
       h#{$index}
       {
           $index: 12 + 3 * $index;
           font: normal normal normal #{$index}px/1 serif;
       }
   }
   html>body
   {
       min-width: 100%;
       min-height: 100%;
   }

2. _widget_tab.scss

/*
    Created on : Jun 12, 2015, 11:46:31 AM
    Author     : Upgrade <Salathiel Genese, Yimga Yimga at salathielgenese@gmail.com>
*/
@mixin widget-tab()
{
    .tab-container
    {
        display: block;
        >.tab-bar
        {
            display: block;
            text-align: right;
        }
        @content;
    }
}
@include widget-tab
{
    .tab-bar-chrome-like
    {
        @extend .tab-bar;
        position: relative;
        padding: 5px 5px 0 5px;
        border-bottom: 7.5px rgba(180,180,180,1) solid;
        >.tab
        {
            margin: 0 5px;
            min-width: 75px;
            position: relative;
            font-family: serif;
            display: inline-block;
            border-radius: 5px 5px 0px 0px;
            padding: 7.5px 25px 7.5px 7.5px;
            background-color: rgba(220,220,220,1);
            &:before {
                width: 0;
                bottom: 0;
                height: 0;
                left: -24px;
                content: "";
                position: absolute;
                border: 12px rgba(220,220,220,1) solid;
                border-top-color: transparent;
                border-left-color: transparent;
            }
            &:after {
                width: 0;
                bottom: 0;
                height: 0;
                content: "";
                right: -23px;
                position: absolute;
                border: 12px rgba(220,220,220,1) solid;
                border-top-color: transparent;
                border-right-color: transparent;
            }
            &:nth-of-type(2n+1) {
                background-color: rgba(210,210,210,1);
                &:before {
                    border-right-color: rgba(210,210,210,1);
                    border-bottom-color: rgba(210,210,210,1);
                }
                &:after {
                    border-left-color: rgba(210,210,210,1);
                    border-bottom-color: rgba(210,210,210,1);
                }
            }
            >[data-sr]
            {
                right: 5px;
                opacity: 0;
                z-index: 2;
                padding: 2px 4px;
                border-radius: 50%;
                position: absolute;
                top: calc(50% - 8px);
                transition-duration: .7s;
                background-color: rgba(0,0,0,.05);
                &:before {
                    content: '×';
                }
                &:hover {
                    background-color: rgba(0,0,0,.1);
                }
            }
            &:hover>[data-sr] {
                opacity: 1;
            }
            &[data-sr]
            {
                min-width: 25px;
                padding: 7.5px 0;
                color: transparent;
            }
            &-active
            {
                @extend .tab;
                &, &:nth-of-type(n)
                    {
                    background-color: rgba(180,180,180,1);
                    &:before {
                        border-right-color: rgba(180,180,180,1);
                        border-bottom-color: rgba(180,180,180,1);
                    }
                    &:after {
                        border-left-color: rgba(180,180,180,1);
                        border-bottom-color: rgba(180,180,180,1);
                    }
                }
                @for $index from 1 through 25
                {
                    &:nth-last-of-type(#{$index}) {
                        z-index: $index - 1;
                        @for $sub-index from $index through 1
                        {
                            &~.tab:nth-last-of-type(#{$sub-index})
                            {
                                z-index: $sub-index - 1;
                            }
                        }
                    }
                }
            }
        }
    }
}

3. index.scss

@import "../libs/reset/scss/_reset.scss";
@import "_widget_tab.scss";

html>body
{
    >section
    {
        margin: 0 15px;
        overflow: hidden;
    }
}

4. The main index.html

<!DOCTYPE html>
<html>
    <head>
        <title>
            Choir...
        </title>
        <meta charset="UTF-8">
        <link rel="icon" href="#">
        <link rel="stylesheet" href="web/css/sillon.css">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
    </head>
    <body>
        <aside>
            Text...
        </aside>
        <section class="tab-container">
            <nav class="tab-bar-chrome-like">
                <a class="tab">
                    HTML5
                    <i data-sr></i>
                </a>
                <a class="tab">
                    SASS
                    <i data-sr></i>
                </a>
                <a class="tab-active">
                    Angular
                    <i data-sr></i>
                </a>
                <a class="tab">
                    Symfony
                    <i data-sr></i>
                </a>
                <a class="tab">
                    Spring
                    <i data-sr></i>
                </a>
                <a href="#" class="tab" data-sr>
                    .
                </a>
            </nav>
        </section>
    </body>
</html>

But Since there is no way yet to self reference code snippet, this the result

Try implementing each tab as a HTMLGenericControl("div") and then apply the following jquery scripts on the client side.

jQuery draggable tabs

As far as the minimising of the tabs, you could simply add a small image to the right of the tab content which toggles the width of the tab based on the jquery click event handler.