Medios de interfaz de usuario de Blaze

Blaze UI es un conjunto de herramientas de interfaz de usuario gratuito y de código abierto para crear un excelente sitio web. Le proporciona varias características como capacidad de respuesta, componentes personalizados, etc.

Los objetos multimedia se utilizan principalmente para motores de comentarios y otras imágenes y visualizaciones de texto relacionadas. Con los objetos de medios, podemos agregar imágenes y textos como encabezados o párrafos y podemos hacer contenedores de objetos de medios. En este artículo, veremos acerca de los objetos multimedia en la interfaz de usuario de Blaze.

Clases de Blaze UI Medias:

o-media: esta clase se usa para crear un objeto multimedia en la interfaz de usuario de Blaze.
o-media__image: esta clase se usa para agregar una imagen multimedia en la interfaz de usuario de Blaze.
o-media__body: esta clase se usa para agregar un cuerpo multimedia como texto o encabezados en la interfaz de usuario de Blaze.

Las imágenes en los objetos multimedia se pueden colocar de diferentes maneras con 3 modificadores.

–superior: se utiliza para agregar la imagen en la parte superior del objeto multimedia.
–center: Se utiliza para añadir la imagen en el centro del objeto multimedia.
–bottom: se usa para agregar la imagen en la parte inferior del objeto multimedia.

Sintaxis:

<div class="c-card">
  <div class="c-card__item c-card__item--brand o-media">
    <div class="o-media__image">
      <img class="o-image" src="https://"/>
    </div>
    <div class="o-media__body">
      <h2 class="c-heading">...
        <span class="c-heading__sub">
        ...
        </span></h2>
      <p class="c-paragraph">
        ...
      </p>
    </div>
  </div>
</div>

Ejemplo 1: el siguiente ejemplo muestra el objeto de los medios en la interfaz de usuario de Blaze.

HTML

<!DOCTYPE html>
<html lang="en">
 
<head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible"
        content="IE=edge" />
    <meta name="viewport" content=
        "width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href=
"https://unpkg.com/@blaze/css@x.x.x/dist/blaze/blaze.css" />
</head>
 
<body>
    <div class="u-centered">
        <h1 style="color:green">
            GeeksforGeeks
        </h1>
         
        <h2>Medias in Blaze UI</h2>
    </div>
 
    <div class="o-container o-container--xlarge c-card">
        <div class="c-card__item c-card__item--brand o-media">
            <div class="o-media__image">
                <img class="o-image" src=
"https://media.geeksforgeeks.org/wp-content/uploads/20220221132017/download.png" />
            </div>
            <div class="o-media__body">
                <h2 class="c-heading">GeeksforGeeks
                    <span class="c-heading__sub">
                        Portal
                    </span>
                </h2>
                <p class="c-paragraph">
                    GeeksforGeeks is a portal for geeks.
                    A place where you can learn,
                    share and get help from other geeks.
                    Find various things on the portal
                    like Jobs, Hackathons, Programming
                    Competitions, Coding Questions, etc.
                </p>
 
 
            </div>
        </div>
    </div>
</body>
 
</html>

Producción:

Ejemplo 2: el siguiente ejemplo muestra el objeto multimedia con la posición inferior de la imagen en la interfaz de usuario de Blaze.

HTML

<!DOCTYPE html>
<html lang="en">
 
<head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible"
        content="IE=edge" />
    <meta name="viewport" content=
        "width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href=
"https://unpkg.com/@blaze/css@x.x.x/dist/blaze/blaze.css" />
</head>
 
<body>
    <div class="u-centered">
        <h1 style="color: green">
            GeeksforGeeks
        </h1>
         
        <h2>Medias in Blaze UI</h2>
    </div>
 
    <div class="o-container o-container--small c-card">
        <div class="c-card__item o-media">
            <div class="o-media__image o-media__image--bottom">
                <img class="o-image"
                    src=
"https://media.geeksforgeeks.org/wp-content/uploads/20220221132017/download.png" />
            </div>
 
            <div class="o-media__body">
                <h2 class="c-heading">GeeksforGeeks
                    <span class="c-heading__sub">Jobs</span>
                </h2>
                <p class="c-paragraph">
                    Find jobs at geeksforgeeks.
                    They have a large pool of
                    companies who are eager to hire
                    for the best candidates.
                </p>
 
 
            </div>
        </div>
    </div>
</body>
 
</html>

Producción:

Referencia: https://www.blazeui.com/objects/medias

Publicación traducida automáticamente

Artículo escrito por tarunsinghwap7 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA

HTML

HTML

Deja una respuesta Cancelar la respuesta