Code Block
A code block is a component that contains 2 or more lines of read-only code. The code in a code block can be copied to the clipboard.
Overview
Code Block is a component that contains two or more lines of read-only code. The code in a code block can be copied to the clipboard.
Installation
npm install @patternfly/elementsUsage
Basic
Place your code in a script tag with a non-javascript mimetype.
JavaScript snippets must use the text/javascript-sample script type.
Script text content will be automatically dedented.
To add copy-to-clipboard functionality, be sure to import @patternfly/pf-clipboard and add the pf-clipboard to the action slot.
View HTML Source
<pf-code-block id="basic">
<script type="application/openshift">
apiVersion: helm.openshift.io/v1beta1/
kind: HelmChartRepository
metadata:
name: azure-sample-repo
spec:
connectionConfig:
url: https://raw.githubusercontent.com/Azure-Samples/helm-charts/master/docs
</script>
<pf-clipboard slot="actions" copy-from="#basic"></pf-clipboard>
</pf-code-block>
Expandable
If a block of code is long and you'd like to hide some of the code to take us less height on the page, place the code you'd like to hide in a span with slot="expandable-code".
It is important that you place the span right next to the <script type="application/openshift"> because of how
the whitespace will be handled. Failing to do this can result in unwanted line
breaks.
View HTML Source
<pf-code-block id="expandable-code">
<script type="application/openshift">
apiVersion: helm.openshift.io/v1beta1/
kind: HelmChartRepository
metadata:
name: azure-sample-repo</script><script type="application/openshift" data-expand>
spec:
connectionConfig:
url: https://raw.githubusercontent.com/Azure-Samples/helm-charts/master/docs
</script>
<pf-clipboard slot="actions" copy-from="#expandable-code"></pf-clipboard>
</pf-code-block>
Slots
code-
The slot to put the code in
expandable-code-
The slot to put the code in that should be revealed when the "Show more" button is clicked to expand the code-block
actions-
Contains the actions for the code-block. For example, copy to clipboard.
Attributes
expanded-
Indicates if the code-block has been expanded
- DOM Property
expanded- Type
-
boolean - Default
-
false
Methods
None
Events
None
CSS Custom Properties
| CSS Property | Description | Default |
|---|---|---|
--pf-c-code-block--BackgroundColor |
#f0f0f0 |
|
--pf-c-code-block__header--BorderBottomWidth |
1px |
|
--pf-c-code-block__header--BorderBottomColor |
#d2d2d2 |
|
--pf-c-code-block__content--PaddingTop |
1rem |
|
--pf-c-code-block__content--PaddingRight |
1rem |
|
--pf-c-code-block__content--PaddingBottom |
1rem |
|
--pf-c-code-block__content--PaddingLeft |
1rem |
|
--pf-c-code-block__pre--FontSize |
0.875rem |
|
--pf-c-code-block__pre--FontFamily |
"Liberation Mono", consolas, "SFMono-Regular", menlo, monaco, "Courier New", monospace |
CSS Shadow Parts
None
