1"use strict";(self.webpackChunk_patternfly_react_docs=self.webpackChunk_patternfly_react_docs||[]).push([[6768],{30866:function(t,e,n){n.r(e);var i=n(2784),a=n(52898);function s(){return s=Object.assign?Object.assign.bind():function(t){for(var e=1;e<arguments.length;e++){var n=arguments[e];for(var i in n)Object.prototype.hasOwnProperty.call(n,i)&&(t[i]=n[i])}return t},s.apply(this,arguments)}var o={id:"Text",section:"components",subsection:"",deprecated:!1,beta:!1,demo:!1,newImplementationLink:!1,source:"react",tabName:null,slug:"/components/text/react",sourceLink:"https://github.com/patternfly/patternfly-react/blob/main/packages/react-core/src/components/Text/examples/Text.md",relPath:"packages/react-core/src/components/Text/examples/Text.md",propComponents:[{name:"TextContent",description:"",props:[{name:"children",type:"React.ReactNode",description:"Content rendered within the TextContent"},{name:"className",type:"string",description:"Additional classes added to the TextContent",defaultValue:"''"},{name:"isVisited",type:"boolean",description:"Flag to indicate the all links in a the content block have visited styles applied if the browser determines the link has been visited",defaultValue:"false"}]},{name:"Text",description:"",props:[{name:"children",type:"React.ReactNode",description:"Content rendered within the Text",defaultValue:"null"},{name:"className",type:"string",description:"Additional classes added to the Text",defaultValue:"''"},{name:"component",type:"'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | 'p' | 'a' | 'small' | 'blockquote' | 'pre'",description:"The text component",defaultValue:"TextVariants.p"},{name:"isVisitedLink",type:"boolean",description:"Flag to indicate the link has visited styles applied if the browser determines the link has been visited",defaultValue:"false"},{name:"ouiaId",type:"number | string",description:"Value to overwrite the randomly generated data-ouia-component-id."},{name:"ouiaSafe",type:"boolean",description:"Set the value of data-ouia-safe. Only set to true when the component is in a static state, i.e. no animations are occurring. At all other times, this value must be false.",defaultValue:"true"}]},{name:"TextList",description:"",props:[{name:"children",type:"React.ReactNode",description:"Content rendered within the TextList",defaultValue:"null"},{name:"className",type:"string",description:"Additional classes added to the TextList",defaultValue:"''"},{name:"component",type:"'ul' | 'ol' | 'dl'",description:"The text list component",defaultValue:"TextListVariants.ul"},{name:"isPlain",type:"boolean",description:"Modifies the list to include plain styling",defaultValue:"false"}]},{name:"TextListItem",description:"",props:[{name:"children",type:"React.ReactNode",description:"Content rendered within the TextListItem",defaultValue:"null"},{name:"className",type:"string",description:"Additional classes added to the TextListItem",defaultValue:"''"},{name:"component",type:"'li' | 'dt' | 'dd'",description:"The text list item component",defaultValue:"TextListItemVariants.li"}]}],cssPrefix:["pf-v5-c-content"],examples:["Headings","Body","Unordered list","Ordered list","Plain list","Description list","Visited"]};o.examples={Headings:function(t){return i.createElement(a.en,s({},o,t,{code:"import React from 'react';\nimport { TextContent, Text, TextVariants } from '@patternfly/react-core';\n\nexport const TextHeadings: React.FunctionComponent = () => (\n <TextContent>\n <Text component={TextVariants.h1}>Hello World</Text>\n <Text component={TextVariants.h2}>Second level</Text>\n <Text component={TextVariants.h3}>Third level</Text>\n <Text component={TextVariants.h4}>Fourth level</Text>\n <Text component={TextVariants.h5}>Fifth level</Text>\n <Text component={TextVariants.h6}>Sixth level</Text>\n </TextContent>\n);\n",title:"Headings",lang:"ts"}))},Body:function(t){return i.createElement(a.en,s({},o,t,{code:"import React from 'react';\nimport { TextContent, Text, TextVariants } from '@patternfly/react-core';\n\nexport const TextBody: React.FunctionComponent = () => (\n <TextContent>\n <Text component={TextVariants.p}>\n Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla accumsan, metus ultrices eleifend gravida, nulla\n nunc varius lectus, nec rutrum justo nibh eu lectus. Ut vulputate semper dui. Fusce erat odio, sollicitudin vel\n erat vel, interdum mattis neque. Sub works as well!\n </Text>\n <Text component={TextVariants.p}>\n Quisque ante lacus, malesuada ac auctor vitae, congue{' '}\n <Text component={TextVariants.a} href=\"#\">\n non ante\n </Text>\n . Phasellus lacus ex, semper ac tortor nec, fringilla condimentum orci. Fusce eu rutrum tellus.\n </Text>\n <Text component={TextVariants.blockquote}>\n Ut venenatis, nisl scelerisque sollicitudin fermentum, quam libero hendrerit ipsum, ut blandit est tellus sit amet\n turpis.\n </Text>\n <Text component={TextVariants.small}>Sometimes you need small text to display things like date created</Text>\n </TextContent>\n);\n",title:"Body",lang:"ts"}))},"Unordered list":function(t){return i.createElement(a.en,s({},o,t,{code:"import React from 'react';\nimport { TextContent, TextList, TextListItem } from '@patternfly/react-core';
1\n\nexport const TextUnorderedList: React.FunctionComponent = () => (\n <TextContent>\n <TextList>\n <TextListItem>In fermentum leo eu lectus mollis, quis dictum mi aliquet.</TextListItem>\n <TextListItem>Morbi eu nulla lobortis, lobortis est in, fringilla felis.</TextListItem>\n <TextListItem>\n Aliquam nec felis in sapien venenatis viverra fermentum nec lectus.\n <TextList>\n <TextListItem>In fermentum leo eu lectus mollis, quis dictum mi aliquet.</TextListItem>\n <TextListItem>Morbi eu nulla lobortis, lobortis est in, fringilla felis.</TextListItem>\n </TextList>\n </TextListItem>\n <TextListItem>Ut non enim metus.</TextListItem>\n </TextList>\n </TextContent>\n);\n",title:"Unordered list",lang:"ts"}))},"Ordered list":function(t){return i.createElement(a.en,s({},o,t,{code:"import React from 'react';\nimport { TextContent, TextList, TextListVariants, TextListItem } from '@patternfly/react-core';\n\nexport const TextOrderedList: React.FunctionComponent = () => (\n <TextContent>\n <TextList component={TextListVariants.ol}>\n <TextListItem>Donec blandit a lorem id convallis.</TextListItem>\n <TextListItem>Cras gravida arcu at diam gravida gravida.</TextListItem>\n <TextListItem>Integer in volutpat libero.</TextListItem>\n <TextListItem>Donec a diam tellus.</TextListItem>\n <TextListItem>Aenean nec tortor orci.</TextListItem>\n <TextListItem>Quisque aliquam cursus urna, non bibendum massa viverra eget.</TextListItem>\n <TextListItem>Vivamus maximus ultricies pulvinar.</TextListItem>\n </TextList>\n </TextContent>\n);\n",title:"Ordered list",lang:"ts"}))},"Plain list":function(t){return i.createElement(a.en,s({},o,t,{code:"import React from 'react';\nimport { Text, TextVariants, TextContent, TextList, TextListVariants, TextListItem } from '@patternfly/react-core';\n\nexport const TextPlainList: React.FunctionComponent = () => (\n <TextContent>\n <Text component={TextVariants.h3}>Plain unordered list</Text>\n <TextList isPlain>\n <TextListItem>In fermentum leo eu lectus mollis, quis dictum mi aliquet.</TextListItem>\n <TextListItem>Morbi eu nulla lobortis, lobortis est in, fringilla felis.</TextListItem>\n <TextListItem>Aliquam nec felis in sapien venenatis viverra fermentum nec lectus.</TextListItem>\n <TextListItem>Ut non enim metus.</TextListItem>\n </TextList>\n <Text component={TextVariants.h3}>Plain ordered list</Text>\n <TextList component={TextListVariants.ol} isPlain>\n <TextListItem>Donec blandit a lorem id convallis.</TextListItem>\n <TextListItem>Cras gravida arcu at diam gravida gravida.</TextListItem>\n <TextListItem>Integer in volutpat libero.</TextListItem>\n <TextListItem>Donec a diam tellus.</TextListItem>\n <TextListItem>Aenean nec tortor orci.</TextListItem>\n <TextListItem>Quisque aliquam cursus urna, non bibendum massa viverra eget.</TextListItem>\n <TextListItem>Vivamus maximus ultricies pulvinar.</TextListItem>\n </TextList>\n </TextContent>\n);\n",title:"Plain list",lang:"ts"}))},"Description list":function(t){return i.createElement(a.en,s({},o,t,{code:"import React from 'react';\nimport { TextContent, TextList, TextListVariants, TextListItem, TextListItemVariants } from '@patternfly/react-core';\n\nexport const TextDescriptionList: React.FunctionComponent = () => (\n <TextContent>\n <TextList component={TextListVariants.dl}>\n <TextListItem component={TextListItemVariants.dt}>Web</TextListItem>\n <TextListItem component={TextListItemVariants.dd}>\n The part of the Internet that contains websites and web pages\n </TextListItem>\n <TextListItem component={TextListItemVariants.dt}>HTML</TextListItem>\n <TextListItem component={TextListItemVariants.dd}>A markup language for creating web pages</TextListItem>\n <TextListItem component={TextListItemVariants.dt}>CSS</TextListItem>\n <TextListItem component={TextListItemVariants.dd}>A technology to make HTML look better</TextListItem>\n </TextList>\n </TextContent>\n);\n",title:"Description list",lang:"ts"}))},Visited:function(t){return i.createElement(a.en,s({},o,t,{code:'import React from \'react\';\nimport { TextContent, Text, TextVariants } from \'@patternfly/react-core\';
1\n\nexport const TextVisited: React.FunctionComponent = () => (\n <>\n <TextContent>\n <Text component={TextVariants.h3}>Visited link example</Text>\n <Text component={TextVariants.p}>\n <Text component={TextVariants.a} isVisitedLink href="#">\n Visited link\n </Text>\n </Text>\n </TextContent>\n <br />\n <TextContent isVisited>\n <Text component={TextVariants.h3}>Visited content example</Text>\n <Text component={TextVariants.p}>\n <Text component={TextVariants.a} href="#">\n content link 1\n </Text>\n </Text>\n <Text component={TextVariants.p}>\n <Text component={TextVariants.a} href="#">\n content link 2\n </Text>\n </Text>\n <Text component={TextVariants.p}>\n <Text component={TextVariants.a} href="#">\n content link 3\n </Text>\n </Text>\n </TextContent>\n </>\n);\n',title:"Visited",lang:"ts"}))}};var r=function(){return i.createElement(i.Fragment,null,i.createElement(a.sg,{id:"examples",size:"h2",className:"ws-title ws-h2"},"Examples"),i.createElement(o.examples.Headings),i.createElement(o.examples.Body),i.createElement("p",{className:"ws-p"},"Text components such as Text, TextList, TextListItem need to be placed within a TextContent"),i.createElement(o.examples["Unordered list"]),i.createElement(o.examples["Ordered list"]),i.createElement(o.examples["Plain list"]),i.createElement(o.examples["Description list"]),i.createElement(o.examples.Visited))};r.displayName="ComponentsTextReactDocs",r.pageData=o,e.default=r}}]);
Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.