@carbon/charts
Version:
Carbon charting components
35 lines (29 loc) • 1.94 kB
HTML
<!--
Copyright IBM Corp. 2016, 2018
This source code is licensed under the Apache-2.0 license found in the
LICENSE file in the root directory of this source tree.
-->
<button class="bx--btn bx--btn--primary" type="button" data-modal-target="#modal-aaxhfq56gte">Show
modal</button>
<div data-modal id="modal-aaxhfq56gte" class="bx--modal " role="dialog"
aria-modal="true" aria-labelledby="modal-aaxhfq56gte-label" aria-describedby="modal-aaxhfq56gte-heading" tabindex="-1">
<div class="bx--modal-container">
<div class="bx--modal-header">
<p class="bx--modal-header__label bx--type-delta" id="modal-aaxhfq56gte-label">Optional label</p>
<p class="bx--modal-header__heading bx--type-beta" id="modal-aaxhfq56gte-heading">Modal heading</p>
<button class="bx--modal-close" type="button" data-modal-close aria-label="close modal" >
<svg focusable="false" preserveAspectRatio="xMidYMid meet" style="will-change: transform;" xmlns="http://www.w3.org/2000/svg" class="bx--modal-close__icon" width="16" height="16" viewBox="0 0 16 16" aria-hidden="true"><path d="M12 4.7l-.7-.7L8 7.3 4.7 4l-.7.7L7.3 8 4 11.3l.7.7L8 8.7l3.3 3.3.7-.7L8.7 8z"></path></svg>
</button>
</div>
<!-- Note: Modals with content that scrolls, at any viewport, requires `tabindex="0"` on the `bx--modal-content` element -->
<div class="bx--modal-content" >
<div class="bx--form-item">
<label for="text-input-aaxhfq56gte" class="bx--label">Text Input label</label>
<input id="text-input-aaxhfq56gte" type="text" class="bx--text-input" placeholder="Optional placeholder text"
data-modal-primary-focus>
</div>
</div>
<div class="bx--modal-footer">
<button class="bx--btn bx--btn--secondary" type="button" data-modal-close>Secondary button</button>
<button class="bx--btn bx--btn--primary" type="button" >Primary button</button> </div> </div>
</div>