Los anchos de diseño de Tachyons se utilizan para proporcionar ancho al elemento y el ancho de un elemento no incluye relleno, bordes o márgenes. Este módulo de ancho contiene una escala de ancho de cinco pasos en potencias de dos y una serie de valores porcentuales.
Sintaxis:
<element-tag class= "Width-class">
...
</element-tag>
Clases de anchos de diseño de taquiones:
- Escala de ancho:
- w1: esta clase se usa para establecer el primer paso en la escala de ancho.
- w2: esta clase se usa para establecer el segundo paso en la escala de ancho.
- w3: Esta clase se usa para establecer el tercer paso en la escala de ancho.
- w4: Esta clase se usa para establecer el cuarto paso en la escala de ancho.
- w5: Esta clase se usa para establecer el quinto paso en la escala de ancho.
- Porcentaje de ancho:
- w-10: esta clase se utiliza para proporcionar el 10% del ancho.
- w-20: esta clase se utiliza para proporcionar el 20% del ancho.
- w-25: esta clase se utiliza para proporcionar el 25% del ancho.
- w-30: esta clase se utiliza para proporcionar el 30% del ancho.
- w-33: esta clase se utiliza para proporcionar el 33% del ancho.
- w-tercero: esta clase se utiliza para proporcionar el 100% / 3 del ancho. (No compatible con opera mini o IE8)
- w-34: esta clase se utiliza para proporcionar el 34% del ancho.
- w-40: esta clase se utiliza para proporcionar el 40% del ancho.
- w-50: esta clase se utiliza para proporcionar el 50% del ancho.
- w-60: esta clase se utiliza para proporcionar el 60% del ancho.
- w-dos tercios: esta clase se utiliza para proporcionar el 100 %/1,5 del ancho. (No compatible con opera mini o IE8)
- w-75: esta clase se utiliza para proporcionar el 75% del ancho.
- w-80: esta clase se utiliza para proporcionar el 80% del ancho.
- w-90: esta clase se utiliza para proporcionar el 90% del ancho.
- w-100: esta clase se utiliza para proporcionar el 100% del ancho.
Los siguientes ejemplos ilustran los anchos de disposición de los taquiones:
Ejemplo 1: En el siguiente ejemplo, usaremos las clases de escala de ancho.
HTML
<!DOCTYPE html> <html lang="en"> <head> <meta name="viewport" content="width=device-width, initial-scale=1" /> <link rel="stylesheet" href= "https://unpkg.com/tachyons/css/tachyons.min.css"/> </head> <body> <h2 class="tc green">GeeksforGeeks</h2> <h3 class="tc"> Tachyons Layout Widths </h3> <h1 class="w1 ba tc bw1">GFG</h1> <h1 class="w2 ba tc bw1">GFG</h1> <h1 class="w3 ba tc bw1">GFG</h1> <h1 class="w4 ba tc bw1">GFG</h1> <h1 class="w5 ba tc bw1">GFG</h1> </body> </html>
Producción:
Ejemplo 2: En este ejemplo usaremos las clases de porcentaje.
HTML
<!DOCTYPE html> <html lang="en"> <head> <title>GFG</title> <meta name="viewport" content="width=device-width, initial-scale=1" /> <link rel="stylesheet" href= "https://unpkg.com/tachyons/css/tachyons.min.css"/> </head> <body> <h2 class="tc green">GeeksforGeeks</h2> <h3 class="tc"> Tachyons Layout Widths </h3> <h1 class="w-20 ba tc bw1">GFG</h1> <h1 class="w-30 ba tc bw1">GFG</h1> <h1 class="w-third ba tc bw1">GFG</h1> <h1 class="w-40 ba tc bw1">GFG</h1> <h1 class="w-50 ba tc bw1">GFG</h1> </body> </html>
Producción:
Referencia: https://tachyons.io/docs/layout/widths/