Existing implementations
Mediawiki software
External libraries
Design documentation
- Design Style Guide: not covered
- Figma: https://www.figma.com/file/2Jb1lVkhEMDFxO20I5xwyA/WikimediaUI-%E2%80%93-Components-library?node-id=217%3A163
Implementation notes
Implementation requires two components, Tab and Tabs.
The parent Tabs component has a slot that should contain one or more child Tab components; each Tab component in turn has its own slot to contain arbitrary content from the end-user.
The parent Tabs component needs to know some things about its children (it needs to know the label prop of each child in order to construct a header row, for example); likewise each individual Tab looks to the parent to determine whether or not it is the active tab (a tab's v-show and aria-hidden attributes will change based on this).
We want to share this data between the parent and child components automatically (so that the user doesn't have to worry about manually passing certain props when composing slot contents). Vue's provide/inject API is used to accomplish this, and since we are using Typescript we can also ensure that the injected data is type-safe (see this blog post for more on using provide/inject in TS).