P8IxD/Components

1Name,Description,Code2Avatar,Placeholder for Avatar Image and Avatar Fallback,"        <Avatar>3          <design-placeholder></design-placeholder>4        </Avatar>"5Avatar Fallback,An element that renders when the image hasn't loaded. 'AvatarFallback' must be used within 'Avatar',"        <AvatarFallback>6          <design-placeholder></design-placeholder>7        </AvatarFallback>"8Avatar Image,The image to render for Avatar. 'AvatarImage' must be used within 'Avatar',"        <AvatarImage height={128} width={128}>9          <design-placeholder></design-placeholder>10        </AvatarImage>"11Button,"Component that looks like a button with text ""button""",        <Button>Button</Button>12Frame,A HTML div,"        <div>13          <design-placeholder></design-placeholder>14        </div>"15Input,A form input field,        <Input height={32} width={32}></Input>16Label,Component based on the native label element with a design-placeholder,"        <Label>17          <design-placeholder></design-placeholder>18        </Label>"19Menubar,Component for menubar. Needs to contain MenubarMenu,"        <Menubar>20          <design-placeholder></design-placeholder>21        </Menubar>"22Menubar Checkbox Item,Adds an item that can be checked to menu. 'MenubarCheckboxItem' must be used within 'MenubarMenu',"        <MenubarCheckboxItem>23          <design-placeholder></design-placeholder>24        </MenubarCheckboxItem>"25Menubar Content,The component that pops out when a menu is open. 'MenubarContent' must be used within 'MenubarMenu',"        <MenubarContent>26          <design-placeholder></design-placeholder>27        </MenubarContent>"28Menubar Group,Used to group multiple of MenubarItem.,        <MenubarGroup></MenubarGroup>29Menubar Item,The component that contains the menubar items. 'MenubarItem' must be used within 'MenubarMenu',"        <MenubarItem>30          <design-placeholder></design-placeholder>31        </MenubarItem>"32Menubar Label,Used to render a label in Menubar,"        <MenubarLabel>33          <design-placeholder></design-placeholder>34        </MenubarLabel>"35Menubar Portal,"When used, portals the content part into the body. 'MenubarPortal' must be used within 'MenubarMenu'",        <MenubarPortal></MenubarPortal>36Menubar Radio Group,Used to group multiple of MenubarRadioItem,        <MenubarRadioGroup></MenubarRadioGroup>37Menubar Radio Item,An item that can be controlled and rendered like a radio. 'MenubarRadioItem' must be used within 'MenubarMenu',"        <MenubarRadioItem value=""Value"">38          <design-placeholder></design-placeholder>39        </MenubarRadioItem>"40Menubar Separator,Used to visually separate items in  'MenubarMenu'.,"        <MenubarSeparator>41          <design-placeholder></design-placeholder>42        </MenubarSeparator>"43Menubar Shortcut,Specifies the keyboard shortcut associated with the menu item.,"        <MenubarShortcut>44          <design-placeholder></design-placeholder>45        </MenubarShortcut>"46Menubar Sub,Contains all the parts of a submenu. 'MenubarSub' must be used within 'MenubarMenu',        <MenubarSub></MenubarSub>47Menubar Sub Content,The component that pops out when a submenu is open. 'MenubarSubContent' must be used within 'MenubarSub',"        <MenubarSubContent>48          <design-placeholder></design-placeholder>49        </MenubarSubContent>"50Menubar Sub Trigger,An item that opens a submenu. MenubarSubTrigger' must be used within 'MenubarSub',"        <MenubarSubTrigger>51          <design-placeholder></design-placeholder>52        </MenubarSubTrigger>"53Menubar Trigger,"The button that toggles the content. By default, the 'MenubarContent' will position itself against the trigger. 'MenubarTrigger' must be used within 'MenubarMenu'","        <MenubarTrigger>54          <design-placeholder></design-placeholder>55        </MenubarTrigger>"56Navigation Menu, A collection of links for navigating websites ,"        <NavigationMenu>57          <design-placeholder></design-placeholder>58        </NavigationMenu>"59Navigation Menu Content,Contains the content associated with each trigger. 'NavigationMenuContent' must be used within 'NavigationMenuItem',"        <NavigationMenuContent>60          <design-placeholder></design-placeholder>61        </NavigationMenuContent>"62Navigation Menu Indicator,"An optional indicator element that renders below the lsit, is used to highlight the currently active trigger. 'NavigationMenuIndicator' must be used within 'NavigationMenu' ","        <NavigationMenuIndicator>63          <design-placeholder></design-placeholder>64        </NavigationMenuIndicator>"65Navigation Menu Item,"A top level menu item, contains a link or trigger with content combination ",        <NavigationMenuItem></NavigationMenuItem>66Navigation Menu Link,A navigational link. 'NavigationMenuLink' must be used within 'NavigationMenu',        <NavigationMenuLink></NavigationMenuLink>67Navigation Menu List,Contains the top level menu items. 'NavigationMenuList' must be used within 'NavigationMenu',"        <NavigationMenuList>68          <design-placeholder></design-placeholder>69        </NavigationMenuList>"70Navigation Menu Trigger,The button that toggles the content. 'NavigationMenuTrigger' must be used within 'NavigationMenuItem',"        <NavigationMenuTrigger>71          <design-placeholder></design-placeholder>72        </NavigationMenuTrigger>"73Navigation Menu Viewport,An optional viewport element that is used to render active content outside of the list. 'NavigationMenuViewport' must be used within 'NavigationMenu',        <NavigationMenuViewport></NavigationMenuViewport>74Tabs,"A set of layered sections of content, known as tab paneæs, that are displayed one at a time ",        <Tabs></Tabs>75Tabs Content,Contains the content associated with each trigger. 'TabsContent' must be used within 'Tabs',"        <TabsContent value=""Value"">76          <design-placeholder></design-placeholder>77        </TabsContent>"78Tabs List,Contains the triggers that are aligned along the edge of the active content. 'TabsList' must be used within 'Tabs',"        <TabsList>79          <design-placeholder></design-placeholder>80        </TabsList>"81Tabs Trigger,The button that activates its associated content. 'TabsTrigger' must be used within 'TabsContent',"        <TabsTrigger value=""Value"">82          <design-placeholder></design-placeholder>83        </TabsTrigger>"84Text,Input of paragraphs ,        <span>Text</span>85