replace <div class="fly-panel"> with <PlumaPanel>
fly-panel-header becomes <PlumaPanelHeader>
fly-panel--title becomes <PlumaPanelTitle>
actions within the header should be nested in a <PlumaPanelActions> component
fly-panel-footer becomes <PlumaPanelFooter>
actions within the footer should be nested in a <PlumaPanelActions> component
fly-panel-body becomes <PlumaPanelSection>
- alternatively, <PlumaPanelInset> can be used to create a body section that stretches to the borders/edges of the panel

Shadow and border

Use @variant to control visual style (e.g., @variant="outlined").

Examples

Source:

<div class="fly-panel">
  <div class="fly-panel-body">Content</div>
</div>

Target:

<PlumaPanel>
  <PlumaPanelSection>Content</PlumaPanelSection>
</PlumaPanel>

Source:

<div class="fly-panel">
  <div class="fly-panel-header">
    <div class="fly-flex">
      <div class="fly-flex__item">
        <h3 class="fly-panel-title">
          Survey: What is your favorite movie?
        </h3>
      </div>
      <div class="fly-flex__item">
        <button class="fly-btn fly-btn">Action</button>
      </div>
    </div>
  </div>
  <div class="fly-panel-body">
    ...
  </div>
  <div class="fly-panel-footer text-right">
    <button class="fly-btn">Next</button>
  </div>
</div>

Target:

<PlumaPanel>
  <PlumaPanelHeader>
    <PlumaPanelTitle>
      Survey: What is your favorite movie?
    </PlumaPanelTitle>
    <PlumaPanelActions>
      <PlumaButton>Action</PlumaButton>
    </PlumaPanelActions>
  </PlumaPanelHeader>

  <PlumaPanelSection>
    ...
  </PlumaPanelSection>

  <PlumaPanelFooter>
    <PlumaPanelActions>
      <PlumaButton>Next</PlumaButton>
    </PlumaPanelActions>
  </PlumaPanelFooter>
</PlumaPanel>

fly-panel

Source component

Target component

Mapping

Shadow and border

Examples

On this page