There are a lot of interesting tags in HTML5, as opposed to article/section tags that are familiar and already applied, and some tags that are not as well known either because of compatibility or because they are still in draft form. When using UI components such as Bootstrap/Element, it is common to see unusual attributes such as role=”dialog” applied to a tag because of HTML semantics. The role attribute is used primarily by people with disabilities to tell ancillary programs, such as screen readers, what role the element currently plays. Since HTML5 tags themselves are already semantically implemented, the role attribute is not recommended. For older browsers or impersonating elements such as div impersonating dialog, the role attribute should be specified. There are many components marked with role attribute in Bootstrap, and some of these components have been implemented by HTML5 and labeled, such as dialog and progress. Of course, the original style of these tags varies from browser to browser and can be described as crude, which can be optimized with some custom CSS styles.

Special note: The labels introduced in this paper are not compatible at present (although some labels have corresponding polyfill), so they are only for learning and understanding, and should not be used in production environment. DEMO is available for preview only in Chrome.

The project address

Can focus on making the project, at present has achieved the dialog, the progress, the range, the collapse components, such as follow-up will also summarizes the other.

Dialog

The Dialog element represents a dialog box or interactive window component.

Example.

Dialog elements can be said to fully meet the requirements for interaction, as we expect completely horizontal and vertical center on the page, intelligent activation layer top (no need to manually set z-index), shared Backdrop layer, etc. And Diaolog has corresponding open(show,showModal) and close methods. The default dialog looks like this:

Custom styles

  • Can be achieved by::backdropPseudo class optimization mask layer
.nui-dialog::backdrop {
  background-color: rgba(0, 0, 0,.5)}Copy the code
  • openProperty: when calledshoworshowModalMethod, the browser will automaticallydialogaddopenProperty to represent the currentdialogIs in the active state and therefore can be accessed by givingopenProperty to add animation to implementdialogAnimation effect when activated
.nui-dialog[open] {
  animation: slide-up 0.4 s ease-out;
}

@keyframes slide-up {
  0% {
    opacity: 0;
    transform: translate(0, 15px); 100%} {opacity: 1;
    transform: translate(0, 0); }}Copy the code

JavaScript methods and events

Support methods
  • show: the activationdialogDisplay elements based on the position of the DOM stream
  • showModal: the activationdialog.recommended. Displays in the center of the page by default and resides at the top level (no setting required)z-index)
  • close: Used to closedialog
Support the event
  • close : dialogTurn-off trigger
  • cancel : dialogCancel, eg pressescKey) when triggered
Pseudo code
<script>
  var dialog = document.getElementById('dialog')
  
  button.addEventListener('click'.function(e){
    dialog.showModal() // or .show
  })

  closeBtn.addEventListener('close'.function(e){
    dialog.close() Dialog.close ('type') can pass a string
  })

  // The close event is emitted when the device is closed
  dialog.addEventListener('close'.function(e) {
    console.log(e) // e.type is the type string passed when the close method is called. The default value is close
  })

  // The cancel event is triggered when you cancel (for example, by pressing esc)
  dialog.addEventListener('cancel'.function(e) {})
</script>  
Copy the code
Bind the close event for the specified button

Through the event broker, it is easy to Close events for elements marked with [data-dismiss=”modal”][aria-label=”Close”] attributes.

<button type="button" class="nui-dialog__close" data-dismiss="modal" aria-label="Close">
  <span aria-hidden="true">&times;</span>
</button>

<a data-dismiss="modal" aria-label="Close">Shut down</a>
Copy the code
document.addEventListener('click'.function (e) {
  var target = e.target
  var selector = '[data-dismiss="modal"][aria-label="Close"]'
  if (target.matches(selector) || target.closest(selector)) {
    var modal = target.closest('dialog')
    modal && modal.close()
  }
})
Copy the code

Progress

The progress element is used to show the completion of a task

Example.

Default and modified styles (Custom styles use the style of the Progress bar in Bootstrap)

Implementation of custom styles

  • ::-webkit-progress-bar: pseudo-classes::-webkit-progress-barThe style used to define the Progress Bar layer
  • ::-webkit-progress-value: pseudo-classes::-webkit-progress-valueUsed to define the style of the Progress Value layer
:root {
  --primary-color: #43a3fb; 
}
.nui-progress::-webkit-progress-bar{
  background-color: #e9ecef;
  border-radius: 0;
}

.nui-progress::-webkit-progress-value{
  background-color: var(--primary-color);
  cursor: default;
}
Copy the code

Collapse

Use the Details and Summary tags to collapse the panel.

Example.

Details describes the details of the document, and used with the summary tag to define the title for Details. The title is visible, and when the user clicks on the title, the details are displayed

Custom styles

  • ::-webkit-details-marker: pseudo element::-webkit-details-markerCan be used to define or override list-item styles. In general, set::-webkit-details-markerInvisible, instead ofsummaryElement to add a::before/::afterThe icon style is custom defined by the pseudo-class. And then todetails[open]Redefining icon in state (::before/::after)
.nui-collapse>.nui-collapse__title::-webkit-details-marker {
  display: none;
}
/* normal */
.nui-collapse>.nui-collapse__title::before {
  content: ' ';
  position: absolute;
  left: auto;
  right: 0;
  width: 6px;
  height: 6px;
  border: 1px solid var(--title-color);
  border-right-width: 0;
  border-bottom-width: 0;
  transform: translate(50%)rotate(135deg);
  transition: transform .2s;
}
/* open */
.nui-collapse[open]>.nui-collapse__title::before {
  transform: translate(50%)rotate(225deg);
}
Copy the code
  • usingopenProperty, and with a little javascript code, you can also achieve an accordion effect

  <div class="nui-collapse-accordion">.<details class="nui-collapse nui-collapse--right">
      <summary class="nui-collapse__title">Title</summary>
      <p class="nui-collapse__body">.</p>
    </details>.</div>
  <script>  
  var ARRAY_SLICE = Array.prototype.slice
  document.addEventListener('click'.function(e) {
    var target = e.target
    var selector = '.nui-collapse-accordion .nui-collapse__title'
    if (target.matches(selector) || target.closest(selector)) {
      var collapse = target.closest('.nui-collapse')
      if (collapse) {
        var group = collapse.closest('.nui-collapse-accordion')
        if (group) {
          ARRAY_SLICE.call(group.querySelectorAll('.nui-collapse')).forEach(function(el) {
            if(el ! == collapse) { el.open =false}})}}}})</script>
Copy the code

Range

The input[type=”range”] element is displayed as a slider, indicating that the input type is used for input fields that should contain values in the specified range

Example.

Customizable range styles can be achieved through ::-webkit-slider-runnable-track,::-webkit-slider-thumb.

Github
radio
checkbox
switch
dialog

This post appears on my Blog