|  | HTML |  |

|  | Splash! |  |

|  | PostScript |  |

| Template Toolkit Examples: Splash! Library: Boxes with Tab Sets |

| tabset

|  | tabsbox |  |

dropbox |

# Boxes with Tab Sets

The splash/tabsbox template generates a set of tabs attached to a box.

Source #1:

    [%  tabs = [
     	{ link => '#wait',  text => 'Wait'  }
     	{ link => '#meet',  text => 'Meet'  }
     	{ link => '#shade', text => 'Shade' }
        ]
    %]

    [% WRAPPER splash/tabsbox %]

    <h3>A Pattern Language</h3>

    More extracts taken from 'A Pattern Language'
    by Christopher Alexander, et al.
    <br>
    Oxford University Press, 1977,
    ISBN 0-19-501919-9

    [% END %]

Output #1:

|  | Wait |  |

|  | Meet |  |

|  | Shade |  |

### A Pattern Language

More extracts taken from 'A Pattern Language' by Christopher Alexander, et al.
Oxford University Press, 1977, ISBN 0-19-501919-9

Source #2:

    <a name="wait"> </a>

    [% WRAPPER splash/tabsbox select=1 %]

    <h3>A Place to Wait</h3>

    In places where people end up waiting
    (for a bus, for an appointment, for a
    plane), create a situation which makes
    the waiting positive. Fuse the waiting
    with some other activity - newspaper,
    coffee, pool tables, horseshoes;
    something which draws people in who
    are not simply waiting.

    [% END %]

Output #2:

|  | Wait |  |

|  | Meet |  |

|  | Shade |  |

### A Place to Wait

In places where people end up waiting (for a bus, for an appointment, for a plane), create a situation which makes the waiting positive. Fuse the waiting with some other activity - newspaper, coffee, pool tables, horseshoes; something which draws people in who are not simply waiting.

Source #3:

    <a name="meet"> </a>

    [% WRAPPER splash/tabsbox
         select = 2
         width  = '80%'
         fill   = 'grey75'
         pad    = 10
         tablocate = 'center'
    %]

    <h3>Small Meeting Rooms</h3>

    The larger meetings are, the less people
    get out of them.  But institutions often
    put their money and attention into large
    meeting rooms and lecture halls.

    [% END %]

Output #3:

|  | Wait |  |

|  | Meet |  |

|  | Shade |  |

### Small Meeting Rooms

The larger meetings are, the less people get out of them. But institutions often put their money and attention into large meeting rooms and lecture halls.

Source #4:

    <a name="shade"> </a>

    [% WRAPPER splash/tabsbox
         select = 3
         border = 1
         invert = 1
         pad    = 10
    %]

    <h3>Tapestry of Light and Dark</h3>

    Create alternating areas of light and dark
    throughout the building, in such a way that
    people naturally walk toward the light,
    whenever they are going to important places:
    seats, entrances, stairs, passages, places of
    special beauty, and make other areas darker,
    to increase the contrast.

    [% END %]

Output #4:

### Tapestry of Light and Dark

Create alternating areas of light and dark throughout the building, in such a way that people naturally walk toward the light, whenever they are going to important places: seats, entrances, stairs, passages, places of special beauty, and make other areas darker, to increase the contrast.

|  | Wait |  |

|  | Meet |  |

|  | Shade |  |