oleg
/
Puppertino
-ын хуулбар https://github.com/codedgar/Puppertino.git


			
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276
							<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>Segmented controls - Puppertino Framework</title>
    <link
      href="https://rsms.me/inter/inter.css"
      rel="stylesheet"
    />
    
    <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/gh/codedgar/Puppertino@latest/dist/css/newfull.css" />

    <meta
      name="viewport"
      content="width=device-width, initial-scale=1, shrink-to-fit=no"
    />
    <meta http-equiv="x-ua-compatible" content="ie=edge" />
    <link rel="stylesheet" type="text/css" href="doc.css" />
    <meta
      name="description"
      content="This is the documentation for Segmented controls on the Puppertino Framework, a framework that mimics Apple's design, woof!"
    />
    <link rel="icon" type="image/png" href="../landing-images/doggo.png" />
<!-- Global site tag (gtag.js) - Google Analytics -->
<script async src="https://www.googletagmanager.com/gtag/js?id=UA-176821843-1"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());

  gtag('config', 'UA-176821843-1');
</script>
  </head>
  <body class="p-layout">
    <div class="route">
      <a
        href="https://codedgar.github.io/Puppertino/"
        class="p-btn p-btn-scope p-btn-scope-unactive"
        >Puppertino</a
      >
      <p>/</p>
      <a href="index.html" class="p-btn p-btn-scope p-btn-scope-unactive"
        >Examples</a
      >
      <p>/</p>
      <a href="segmented_controls.html" class="p-btn p-btn-scope">Segmented controls</a>
    </div>
    <h1>Segmented controls</h1>
    <div class="master">
      <p>
        Segmented controls are commonly used to toggle diffent states or views in your website or App and are greatly featured in many apps in iOS. You can use the segmented buttons by using the 
        <a
          href="https://github.com/codedgar/Puppertino/blob/master/dist/css/segmented-controls.css"
          target="_blank"
          >CSS of Segmented controls</a
        >
        or
        <a
          href="https://github.com/codedgar/Puppertino/blob/master/dist/css/newfull.css"
          target="_blank"
          >downloading the full CSS</a
        >
        (Not recommended if you are just going to use this component) and the

        <a
          href="https://github.com/codedgar/Puppertino/blob/master/src/js/segmented_controls.js"
          target="_blank"
          >JavaScript</a
        > of the component.
      </p>

      <div class="talk-about-it">
        <h3>Note on Previous Versions</h3>
        <p>In earlier versions of Puppertino, segmented controls were exclusively links. In the latest version, you now have the option to use either <strong>Buttons</strong> or <strong>Links</strong>, offering greater flexibility for appropriate actions while maintaining proper semantics and accessibility.</p>
      </div>

      <div class="talk-about-it">
        <h2>General Usage of the segmented controls.</h2>
        <p>
          Segmented controls are made of 2 main elements, the container and the links inside of them which can include SVGs or plain text. The container features the main class, <code class="code">p-segmented-controls</code> and the links inside of it don't need to feature any class in particular, just <code class="code">active</code> for the active control. There also <a href="#modifier">Modifier classes</a> to change the default look of the segmented controls.<br><br>
          Keep in mind that while the Segmented controls component features a JS, it does not manage states, views or any type of functionality, if you wish to manage these states you will have to create a JS that accomplishes what you want to do.
        </p>

        <div class="content_smol">
          <div class="mw-300">
            <div class="p-segmented-controls">
              <a href="#" class="active">Roadmap</a>
              <button>Satelite</button>
            </div>
          </div>
        </div>

        <div class="content_smol">
          <div class="mw-300">
            <div class="p-segmented-controls">
              <a href="#" class="active"><svg viewBox="0 0 24 24" width="24" height="24" stroke="currentColor" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round" class="css-i6dzq1"><line x1="17" y1="10" x2="3" y2="10"></line><line x1="21" y1="6" x2="3" y2="6"></line><line x1="21" y1="14" x2="3" y2="14"></line><line x1="17" y1="18" x2="3" y2="18"></line></svg></a>
              <a href="#"><svg viewBox="0 0 24 24" width="24" height="24" stroke="currentColor" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round" class="css-i6dzq1"><line x1="21" y1="10" x2="3" y2="10"></line><line x1="21" y1="6" x2="3" y2="6"></line><line x1="21" y1="14" x2="3" y2="14"></line><line x1="21" y1="18" x2="3" y2="18"></line></svg></a>
              
              
              <a href="#"><svg viewBox="0 0 24 24" width="24" height="24" stroke="currentColor" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round" class="css-i6dzq1"><line x1="19" y1="4" x2="10" y2="4"></line><line x1="14" y1="20" x2="5" y2="20"></line><line x1="15" y1="4" x2="9" y2="20"></line></svg></a>
              
              <a href="#"><svg viewBox="0 0 24 24" width="24" height="24" stroke="currentColor" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round" class="css-i6dzq1"><path d="M6 4h8a4 4 0 0 1 4 4 4 4 0 0 1-4 4H6z"></path><path d="M6 12h9a4 4 0 0 1 4 4 4 4 0 0 1-4 4H6z"></path></svg></a>
              
              <a href="#"><svg viewBox="0 0 24 24" width="24" height="24" stroke="currentColor" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round" class="css-i6dzq1"><path d="M8 3H5a2 2 0 0 0-2 2v3m18 0V5a2 2 0 0 0-2-2h-3m0 18h3a2 2 0 0 0 2-2v-3M3 16v3a2 2 0 0 0 2 2h3"></path></svg></a>
              
              <a href="#"><svg viewBox="0 0 24 24" width="24" height="24" stroke="currentColor" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round" class="css-i6dzq1"><path d="M12 1a3 3 0 0 0-3 3v8a3 3 0 0 0 6 0V4a3 3 0 0 0-3-3z"></path><path d="M19 10v2a7 7 0 0 1-14 0v-2"></path><line x1="12" y1="19" x2="12" y2="23"></line><line x1="8" y1="23" x2="16" y2="23"></line></svg></a>
              
            </div>
        </div>
      </div>
        

        <p>Usage:</p>
        <div class="code">
          <pre>
				<code class="html">
&#60;div class="p-segmented-controls">
  &#60;a href="#" class="active">Roadmap&#60;/a>
  &#60;a href="#">Satelite&#60;/a>
&#60;/div>
				</code>
			</pre>
        </div>
      </div>

      <div class="talk-about-it" id="modifier">
        <h2>Modifier classes.</h2>
        <p>
          If the original look of the segmented control does not click with you right away fear not! We have created 5 different variations for any taste! Like these:
        </p>


        <div class="content_smol">
          <div class="mw-300">
            <div class="p-segmented-controls p-segmented-radius">
              <a href="#" class="active">Doom</a>
              <a href="#">Quake</a>
            </div>
          </div>
        </div>

        <div class="content_smol">
          <div class="mw-300">
            <div class="p-segmented-controls p-segmented-radius p-segmented-internal-radius">
              <a href="#" class="active">FIFA</a>
              <a href="#">PES</a>
            </div>
          </div>
        </div>

        <div class="content_smol">
          <div class="mw-300">
            <div class="p-segmented-controls p-segmented-controls-alt">
              <a href="#" class="active">Thing</a>
              <a href="#">Stuff</a>
              <a href="#">Other</a>
            </div>
          </div>
        </div>

        <div class="content_smol">
          <div class="mw-300">
            <div class="p-segmented-controls p-segmented-outline">
              <a href="#" class="active">Can</a>
              <a href="#">Dog</a>
              <a href="#">Pup</a>
            </div>
          </div>
        </div>


        <div class="content_smol">
          <div class="mw-300">
            <div class="p-segmented-controls p-segmented-controls-outline-alt">
              <a href="#" class="active">Mini</a>
              <a href="#">May</a>
              <a href="#">Moe</a>
            </div>
          </div>
        </div>


        <p>Usage:</p>
        <div class="code">
          <pre>
        <code class="html">
&#60;div class="p-segmented-controls p-segmented-radius">
    &#60;a href="#" class="active">Doom&#60;/a>
    &#60;a href="#">Quake&#60;/a>
&#60;/div>


&#60;div class="p-segmented-controls p-segmented-radius p-segmented-internal-radius">
  &#60;a href="#" class="active">FIFA&#60;/a>
  &#60;a href="#">PES&#60;/a>
&#60;/div>

&#60;div class="p-segmented-controls p-segmented-controls-alt">
  &#60;a href="#" class="active">Thing&#60;/a>
  &#60;a href="#">Stuff&#60;/a>
  &#60;a href="#">Other&#60;/a>
&#60;/div>

&#60;div class="p-segmented-controls p-segmented-outline">
  &#60;a href="#" class="active">Can&#60;/a>
  &#60;a href="#">Dog&#60;/a>
  &#60;a href="#">Pup&#60;/a>
&#60;/div>

&#60;div class="p-segmented-controls p-segmented-controls-outline-alt">
  &#60;a href="#" class="active">Mini&#60;/a>
  &#60;a href="#">May&#60;/a>
  &#60;a href="#">Moe&#60;/a>
&#60;/div>
        </code>
      </pre>
        </div>
      </div>

      <div class="talk-about-it">
        <h2>Color customization.</h2>
        <p>
          Ah yes, beatiful customization! Well, for the segmented controls component, We've made the color customization fairly simple, just change the <code class="code">--color-segmented</code> and/or <code class="code">--color-lighter-segment</code> (For the lighter segmented control) variables. For example, the <code class="code">p-segmented-grey</code> class (Included in the CSS) changes the color of all the segmented controls by overriding these variables, like so:
        </p>

        <div class="content_smol">
          <div class="mw-300">
            <div class="p-segmented-controls p-segmented-grey">
              <a href="#" class="active">Roadmap</a>
              <a href="#">Satelite</a>
            </div>
          </div>
        </div>

        <div class="content_smol">
          <div class="mw-300">
            <div class="p-segmented-controls demo_segmented">
              <a href="#" class="active">Roadmap</a>
              <a href="#">Satelite</a>
            </div>
          </div>
        </div>

        <p>Usage:</p>
        <div class="code">
          <pre>
				<code class="html">
&#60;div class="p-segmented-controls p-segmented-grey">
  &#60;a href="#" class="active">Roadmap&#60;/a>
  &#60;a href="#">Satelite&#60;/a>
&#60;/div>
				</code>
			</pre>
        </div>
      </div>
      <div class="talk-about-it">
        <h2>One more thing.</h2>
        <p>
          While yes, segmented controls are really sexy, please keep in mind that you should only use one word or small icons in them. Otherwise you will make the segmented control overflow and that doesn't look nice. Keep it simple, you know!
        </p>

      </div>
    </div>
 
</body>

  <script src="https://cdn.jsdelivr.net/gh/codedgar/Puppertino@latest/src/js/dakmode_manager.js"></script>
  <script
    type="text/javascript"
    src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.15.10/highlight.min.js"
  ></script>
  <script defer>
    hljs.initHighlightingOnLoad();
  </script>
  <script type="text/javascript" src="https://cdn.jsdelivr.net/gh/codedgar/Puppertino@latest/src/js/segmented_controls.js"></script>
</html>