patternfly_yew/components/
code_block.rs

1//! Code block
2use yew::prelude::*;
3
4/// Properties for [`CodeBlock`]
5#[derive(Clone, Debug, PartialEq, Properties)]
6pub struct CodeBlockProperties {
7    #[prop_or_default]
8    pub expandable: bool,
9    #[prop_or_default]
10    pub children: Html,
11    #[prop_or_default]
12    pub actions: ChildrenWithProps<CodeBlockAction>,
13}
14
15/// Code Block component
16///
17/// > 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.
18///
19/// See: <https://www.patternfly.org/components/code-block>
20///
21/// ## Properties
22///
23/// Defined by [`CodeBlockProperties`].
24///
25/// ## Children
26///
27/// A code block can contain any children, but is expected to contain a [`CodeBlockCode`] component.
28///
29/// It may also be wrapped with a detached [`crate::prelude::ExpandableSection`] component. The
30/// [`crate::prelude::ExpandableSectionToggle`] would then be a child of this component, but stay outside the nested
31/// code component.
32///
33/// ## Example
34///
35/// A simple example would be:
36///
37/// ```rust
38/// use yew::prelude::*;
39/// use patternfly_yew::prelude::*;
40///
41/// #[function_component(Example)]
42/// fn example() -> Html {
43///   html!(
44///     <CodeBlock>
45///       <CodeBlockCode>{r#"some code"#}</CodeBlockCode>
46///     </CodeBlock>
47///   )
48/// }
49/// ```
50#[function_component(CodeBlock)]
51pub fn code_block(props: &CodeBlockProperties) -> Html {
52    html!(
53        <div class="pf-v5-c-code-block">
54            if !props.actions.is_empty() {
55                <div class="pf-v5-c-code-block__header">
56                    <div class="pf-v5-c-code-block__actions">
57                        { for props.actions.iter() }
58                    </div>
59                </div>
60            }
61
62            <div class="pf-v5-c-code-block__content">
63                { props.children.clone() }
64            </div>
65        </div>
66    )
67}
68
69/// Properties for [`CodeBlockCode`]
70#[derive(Clone, Debug, PartialEq, Properties)]
71pub struct CodeBlockCodeProperties {
72    #[prop_or_default]
73    pub children: Html,
74}
75
76/// The actual code component of the Code Block component.
77///
78/// ## Properties
79///
80/// Defined by [`CodeBlockCodeProperties`].
81#[function_component(CodeBlockCode)]
82pub fn code_block_code(props: &CodeBlockCodeProperties) -> Html {
83    html!(
84        <pre class="pf-v5-c-code-block__pre">
85            <code class="pf-v5-c-code-block__code">{ props.children.clone() }</code>
86        </pre>
87    )
88}
89
90/// Properties for [`CodeBlockAction`]
91#[derive(Clone, Debug, PartialEq, Properties)]
92pub struct CodeBlockActionProperties {
93    #[prop_or_default]
94    pub children: Html,
95}
96
97/// An action of a [`CodeBlock`]
98#[function_component(CodeBlockAction)]
99pub fn code_block_action(props: &CodeBlockActionProperties) -> Html {
100    html!(
101        <div class="pf-v5-c-code-block__actions-item">
102            { props.children.clone() }
103        </div>
104    )
105}
patternfly_yew/components/code_block.rs

patternfly_yew/components/
code_block.rs
