Demo
Apples
No explicit default was set, so per standard functionality
this first tabpanel will be shown by default.
Here's a link just to test keyboard tabbing.
(it's odd talking about tabs, and tabs.)
Bananas
This is an example of a heading being used to populate the
tab's label, while also not removing heading
from the tabpanel. This is done by adding
the value "keep" to data-atabs-heading.
There are two headings here
The tab is getting its label from the
data-atabs-tab-label. The heading is
kept in the tabpanel because it does
not have the data-atabs-heading
attribute.
It wouldn't make much sense
If the contents of a tabpanel contain
additional sub headings, it wouldn't make sense to remove
the initial heading from the tabpanel.
Doing so would create a gap in the heading structure.
Special demo: enabled a disabled tab
There are some cases, e.g. in a multi-step process, where a user completes a task in an exposed tab panel or panels, and then by completion of that task a previously disabled tab becomes enabled.
The following button showcases how that could be implemented for the disabled "Mangos" tab.
Durian
The durian (/ˈdjʊəriən/)[2] is the edible fruit of several tree species belonging to the genus Durio. There are 30 recognised Durio species, native to Indonesia, Malaysia, the Philippines, and Thailand; at least nine of which produce edible fruit.[3][4] Durio zibethinus, native to Borneo and Sumatra, is the only species available in the international market.[citation needed] It has over 300 named varieties in Thailand and 100 in Malaysia, as of 1987. Other species are sold in their local regions.[3]
Named in some regions as the "king of fruits",[5] the durian is distinctive for its large size, strong odour, and thorn-covered rind. The fruit can grow as large as 30 centimetres (12 inches) long and 15 cm (6 in) in diameter, and it typically weighs 1 to 3 kilograms (2 to 7 pounds). Its shape ranges from oblong to round, the colour of its husk green to brown, and its flesh pale yellow to red, depending on the species.
Mangos (out of stock)
This text will never be visible, unless the tab is enabled via JS. Please refer to the demo button in the "Oranges" tab for an example how this could be achieved.
Lychee
Lychee, (Litchi chinensis), also spelled litchi or lichi, evergreen tree of the soapberry family (Sapindaceae), grown for its edible fruit. Lychee is native to Southeast Asia and has been a favourite fruit of the Cantonese since ancient times. The fruit is usually eaten fresh but can also be canned or dried.
Dragon Fruit
These fruits are commonly known in English as "dragon fruit", a name used since around 1963, apparently resulting from the leather-like skin and prominent scaly spikes on the fruit's exterior.[3] The names pitahaya and pitaya derive from Mexico, and pitaya roja in Central America and northern South America, possibly relating to pitahaya for names of tall cacti species with flowering fruit.[2][4] The fruit may also be known as a strawberry pear.[5]
Mangosteen
Mangosteen (Garcinia mangostana), also known as the purple mangosteen,[1] is a tropical evergreen tree with edible fruit native to tropical lands surrounding the Indian Ocean. Its origin is uncertain due to widespread prehistoric cultivation.[2][3] It grows mainly in Southeast Asia, southwest India and other tropical areas such as Colombia, Puerto Rico and Florida,[2][4][5] where the tree has been introduced. The tree grows from 6 to 25 metres (20 to 82 feet) tall.[2] The fruit of the mangosteen is sweet and tangy, juicy, somewhat fibrous, with fluid-filled vesicles (like the flesh of citrus fruits), with an inedible, deep reddish-purple colored rind (exocarp) when ripe.[2][4] In each fruit, the fragrant edible flesh that surrounds each seed is botanically endocarp, i.e., the inner layer of the ovary.[6][7] The seeds are of similar size and shape to almonds.
Mangosteen belongs to the same genus as the other, less widely known fruit, such as the button mangosteen (G. prainiana) or the charichuelo (G. madruno).