How to design tabs like Google Chrome tabs?

Question

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 stan

Answer 1

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

Answer 2

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

Answer 3

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)

Answer 4

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.