===========svelte-tuicss===========

Buttons

Charts

80%

30%

50%

90%

60%

100%

10%

75%

20%

40%

60%

80%

100%

80%

60%

100%

2018

2019

2020

25%

50%

75%

100%

<TuiChart horizontal
  size={ { width: "500px", height: "200px" } }
  values={[
    {value: 80, label: "2018" },
    {value: 60, label: "2019" },
    {value: 100, label: "2020" },
  ]}
  labels={[
    "25%",
    "50%",
    "75%",
    "100%",
  ]}
/>

<TuiChart horizontal
  size={ { width: "500px", height: "300px" } }
  values={[
    {value: 80, label: "s1" },
    {value: 30, label: "s2" },
    {value: 50, label: "s3" },
    {value: 90, label: "s4" },
    {value: 60, label: "s5" },
    {value: 100, label: "s6" },
    {value: 10, label: "s7" },
    {value: 75, label: "s8" },
  ]}
  valueFormatter={(value) => `$${value}` }
  valueScaler={(value) => `${value / 2}%` }
/>

Inputs


<div class="tui-window" style:textAlign="left">
  <h2>Inputs</h2>
  <TuiForm
    heading="Form"
  >
    <TuiLabeledInput
      id="input"
      label="Text.......: "
      value={text}
      on:change={handleChange}
    />
    <TuiLabeledInput
      id="disabled-input"
      label="Disabled...: "
      value={text}
      disabled
      on:change={handleChange}
    />
    <TuiLabeledInput
      id="number-input"
      label="Number.....: "
      type="number"
      step={1}
      value={number}
      on:change={handleNumberChange}
    />
    <TuiLabeledInput
      id="password-input"
      label="Password...: "
      type="password"
      value={text}
      on:change={handleChange}
    />
    <TuiLabeledInput 
      id="color-input"
      label="Color......: "
      type="color"
      value={color}
      on:change={handleColorChange}
    />
    <TuiLabeledSelect
      id="select"
      label="Select.....: "
    >
      <TuiOption>First</TuiOption>
      <TuiOption>Second</TuiOption>
      <TuiOption>Third</TuiOption>
      <TuiOptgroup label="Group">
        <TuiOption>First</TuiOption>
        <TuiOption>Second</TuiOption>
        <TuiOption>Third</TuiOption>
      </TuiOptgroup>
    </TuiLabeledSelect>
    <TuiLabeledInput
      id="date-input"
      label="Date.......: "
      type="date"
      value="2019-01-01"
    />
    <TuiLabeledInput 
      id="datetime-local-input"
      label="Time.......: "
      type="datetime-local"
      value="2019-01-01T12:00"
    />
    <TuiCheckboxSet
      heading="Checkboxes"
      description="Add some biz"
      options={[
        { value: 1, label: "First" },
        { value: 2, label: "Second" },
        { value: 3, label: "Disabled", disabled: true },
      ]}
      on:change={({ detail }) => handleCheckboxChange(detail.values)}
      values={ checkboxVals }
    />
    <TuiRadioSet
      heading="Radios"
      options={[
        { value: 1, label: "First" },
        { value: 2, label: "Second" },
        { value: 3, label: "Disabled", disabled: true },
      ]}
      on:change={({ detail }) => { handleRadioChange(+detail.value)}}
      value={ radioVal }
    />
    <TuiLabeledTextarea
      id="textarea"
      label="Textarea"
      value={"asdadasdasd"}
      style={{ width: "100%" }}
    />
    <TuiLabeledTextarea
      id="disabled-textarea"
      label="Disabled Textarea"
      value={"disabled"}
      disabled
      style={{ width: "100%" }}
    />
    <br />
    <TuiLabeledSelect
      id="multi-select"
      label="Multiple"
      multiple
      style={{ width: "100%" }}
    >
      <TuiOption>---</TuiOption>
      <TuiOption>First</TuiOption>
      <TuiOption>Second</TuiOption>
      <TuiOption>Third</TuiOption>
      <TuiOptgroup label="Group">
        <TuiOption>First</TuiOption>
        <TuiOption>Second</TuiOption>
        <TuiOption>Third</TuiOption>
      </TuiOptgroup>

    </TuiLabeledSelect>
    <TuiLabeledInput
      id="file-input"
      label="File"
      class="full-width"
      type="file"
    />
  </TuiForm>
</div>

Layouts

Full width

In a container

<TuiGrid>
  <TuiGridRow>
    <TuiGridCol s={{ width: 12 }} m={{ width: 12}} l={{ width: 12 }}>12</TuiGridCol>
    <TuiGridCol s={{ width: 6 }} m={{ width: 6}} l={{ width: 6 }}>6</TuiGridCol>
    <TuiGridCol s={{ width: 6 }} m={{ width: 6}} l={{ width: 6 }}>6</TuiGridCol>
    <TuiGridCol s={{ width: 3 }} m={{ width: 3}} l={{ width: 3 }}>3</TuiGridCol>
    <TuiGridCol s={{ width: 3 }} m={{ width: 3}} l={{ width: 3 }}>3</TuiGridCol>
    <TuiGridCol s={{ width: 3 }} m={{ width: 3}} l={{ width: 3 }}>3</TuiGridCol>
    <TuiGridCol s={{ width: 3 }} m={{ width: 3}} l={{ width: 3 }}>3</TuiGridCol>
    <TuiGridCol s={{ width: 1 }} m={{ width: 1}} l={{ width: 1 }}>1</TuiGridCol>
    <TuiGridCol s={{ width: 1 }} m={{ width: 1}} l={{ width: 1 }}>1</TuiGridCol>
    <TuiGridCol s={{ width: 1 }} m={{ width: 1}} l={{ width: 1 }}>1</TuiGridCol>
    <TuiGridCol s={{ width: 1 }} m={{ width: 1}} l={{ width: 1 }}>1</TuiGridCol>
    <TuiGridCol s={{ width: 1 }} m={{ width: 1}} l={{ width: 1 }}>1</TuiGridCol>
    <TuiGridCol s={{ width: 1 }} m={{ width: 1}} l={{ width: 1 }}>1</TuiGridCol>
    <TuiGridCol s={{ width: 1 }} m={{ width: 1}} l={{ width: 1 }}>1</TuiGridCol>
    <TuiGridCol s={{ width: 1 }} m={{ width: 1}} l={{ width: 1 }}>1</TuiGridCol>
    <TuiGridCol s={{ width: 1 }} m={{ width: 1}} l={{ width: 1 }}>1</TuiGridCol>
    <TuiGridCol s={{ width: 1 }} m={{ width: 1}} l={{ width: 1 }}>1</TuiGridCol>
    <TuiGridCol s={{ width: 1 }} m={{ width: 1}} l={{ width: 1 }}>1</TuiGridCol>
    <TuiGridCol s={{ width: 1 }} m={{ width: 1}} l={{ width: 1 }}>1</TuiGridCol>
  </TuiGridRow>
  <TuiGridRow>
    <TuiGridCol s={{ width: 12 }} m={{ width: 6 }} l={{ width: 6 }}>6</TuiGridCol>
    <TuiGridCol s={{ width: 12 }} m={{ width: 6 }} l={{ width: 6 }}>6</TuiGridCol>
  </TuiGridRow>
  <TuiGridRow>
    <TuiGridCol s={{ width: 12 }} m={{ offset: 3, width: 3 }} l={{ offset: 3, width: 3 }}>3</TuiGridCol >
    <TuiGridCol s={{ width: 12 }} m={{ offset: 3, width: 3 }} l={{ offset: 3, width: 3 }}>3</TuiGridCol >
  </TuiGridRow>
</TuiGrid>

<TuiModal modalTitle="modal">
  <div>The best modal</div>
  <div>The best modal</div>
</TuiModal>

Navigation

<TuiNavbar>
  <TuiSidenav slot="sidenav">
    <TuiMenuItem href={base}>
      <span class="red-168-text">O</span>pen
      <span class="tui-shortcut">ctrl+o</span>
    </TuiMenuItem>
    <TuiMenuItem href={base}>
      OS Shell
    </TuiMenuItem>
    <TuiMenuItem href={base}>
      <span class="red-168-text">C</span>opy
      <span class="tui-shortcut">ctrl+c</span>
    </TuiMenuItem>
    <TuiMenuItem href={base}>
      <span class="red-168-text">P</span>aste
      <span class="tui-shortcut">ctrl+v</span>
    </TuiMenuItem>
    <TuiMenuItem href={base}>
      Cut
      <span class="tui-shortcut">ctrl+x</span>
    </TuiMenuItem>
    <div class="tui-black-divider"></div>
    <TuiMenuItem href={base}>
      Insert
    </TuiMenuItem>
    <TuiMenuItem href={base}>
      Delete
    </TuiMenuItem>
    <TuiMenuItem href={base}>
      Go...
    </TuiMenuItem>
    <div class="tui-black-divider"></div>
    <TuiMenuItem href={base}>
      <span class="red-168-text">S</span>earch
      <span class="tui-shortcut">ctrl+p</span>
    </TuiMenuItem>
    <div class="tui-black-divider"></div>
    <TuiMenuItem href={base}>
      Exit <span class="tui-shortcut">F10</span>
    </TuiMenuItem>
  </TuiSidenav>
  <TuiDropdown>
    <div slot="label"><span class="red-168-text">F</span>ile</div>
    <TuiMenuItem on:click={ () => {}}>
      <span class="red-168-text">N</span>ew
    </TuiMenuItem>
    <TuiMenuItem href={base}>
      <span class="red-168-text">O</span>pen...
      <span class="tui-shortcut">F3</span>
    </TuiMenuItem>
    <TuiMenuItem href={base}>
      <span class="red-168-text">S</span>ave
      <span class="tui-shortcut">F2</span>
    </TuiMenuItem>
    <TuiMenuItem href={base}>
      S<span class="red-168-text">a</span>ve as...
    </TuiMenuItem>
    <TuiMenuItem href={base}>
      Save a<span class="red-168-text">l</span>l
    </TuiMenuItem>
    <div class="tui-black-divider"></div>

    <TuiDropdown block>
      <div slot="label">
        <span class="right">►</span>
        <span class="red-168-text">M</span>ore
      </div>
      <TuiMenuItem href={base}>
        <span class="red-168-text">C</span>hange dir...
      </TuiMenuItem>
      <TuiMenuItem href={base}>
        <span class="red-168-text">P</span>rint
      </TuiMenuItem>
      <TuiMenuItem href={base}>
        <span class="red-168-text">D</span>OS shell
      </TuiMenuItem>
    </TuiDropdown>

    <div class="tui-black-divider"></div>
    <TuiMenuItem href={base}>
      <span class="red-168-text">Q</span>uit
      <span class="tui-shortcut">F10</span>
    </TuiMenuItem>
  </TuiDropdown>
  <TuiDatetime formatString="dd MMM yyyy hh:mm:ss " />
</TuiNavbar>

<TuiWindow>
  <div>asdsadasd</div>
  <div>asd</div>
  <div>asd</div>
  <div>asda</div>
  <div>sd</div>
</TuiWindow>
<TuiWindow>
  <div>asdsadasd</div>
  <div>asd</div>
  <div>asd</div>
  <div>asda</div>
  <div>sd</div>
</TuiWindow>
<TuiWindow>
  <div>asdsadasd</div>
  <div>asd</div>
  <div>asd</div>
  <div>asda</div>
  <div>sd</div>
</TuiWindow>

Tables

Name	Age	Job	Email	Phone	Nationality
Steve	40	Designer	steve@house.com.au	04123123123	Australia
Fred	55	Engineer	fred@gnail.com	04123123123	Australia
Gregor	25	Grad	greg-audio@dynamite.com.au	04123123123	Japan
Harry	43	Manager	harryhoudini@magic.com.au	04123123123	Australia
Phillip	43	Manager	get-your-phil@house.com.au	04123123123	New Zealand
Jackson	43	Manager	crackson@huouse.com.au	04123123123	Australia
Bradley	43	Manager	brad-remembers1231@house.com.au	04123123123	China
Harry	43	Manager	harryhoudini@magic.com.au	04123123123	Spain

<TuiTable hoverColor={TableRowColor.Cyan}>
  <TuiTHead>
    <TuiTr>
      <TuiTh>Name</TuiTh>
      <TuiTh>Age</TuiTh>
      <TuiTh>Job</TuiTh>
      <TuiTh>Email</TuiTh>
      <TuiTh>Phone</TuiTh>
      <TuiTh>Nationality</TuiTh>
    </TuiTr>
  </TuiTHead>
  <TuiTBody>
    <TuiTr>
      <TuiTd>Steve</TuiTd>
      <TuiTd>40</TuiTd>
      <TuiTd>Designer</TuiTd>
      <TuiTd>steve@house.com.au</TuiTd>
      <TuiTd>04123123123</TuiTd>
      <TuiTd>Australia</TuiTd>
    </TuiTr>
    <TuiTr>
      <TuiTd>Fred</TuiTd>
      <TuiTd>55</TuiTd>
      <TuiTd>Engineer</TuiTd>
      <TuiTd>fred@gnail.com</TuiTd>
      <TuiTd>04123123123</TuiTd>
      <TuiTd>Australia</TuiTd>
    </TuiTr>
    <TuiTr>
      <TuiTd>Gregor</TuiTd>
      <TuiTd>25</TuiTd>
      <TuiTd>Grad</TuiTd>
      <TuiTd>greg-audio@dynamite.com.au</TuiTd>
      <TuiTd>04123123123</TuiTd>
      <TuiTd>Japan</TuiTd>
    </TuiTr>
    <TuiTr>
      <TuiTd>Harry</TuiTd>
      <TuiTd>43</TuiTd>
      <TuiTd>Manager</TuiTd>
      <TuiTd>harryhoudini@magic.com.au</TuiTd>
      <TuiTd>04123123123</TuiTd>
      <TuiTd>Australia</TuiTd>
    </TuiTr>
    <TuiTr>
      <TuiTd>Phillip</TuiTd>
      <TuiTd>43</TuiTd>
      <TuiTd>Manager</TuiTd>
      <TuiTd>get-your-phil@house.com.au</TuiTd>
      <TuiTd>04123123123</TuiTd>
      <TuiTd>New Zealand</TuiTd>
    </TuiTr>
    <TuiTr>
      <TuiTd>Jackson</TuiTd>
      <TuiTd>43</TuiTd>
      <TuiTd>Manager</TuiTd>
      <TuiTd>crackson@huouse.com.au</TuiTd>
      <TuiTd>04123123123</TuiTd>
      <TuiTd>Australia</TuiTd>
    </TuiTr>
    <TuiTr>
      <TuiTd>Bradley</TuiTd>
      <TuiTd>43</TuiTd>
      <TuiTd>Manager</TuiTd>
      <TuiTd>brad-remembers1231@house.com.au</TuiTd>
      <TuiTd>04123123123</TuiTd>
      <TuiTd>China</TuiTd>
    </TuiTr>
    <TuiTr>
      <TuiTd>Harry</TuiTd>
      <TuiTd>43</TuiTd>
      <TuiTd>Manager</TuiTd>
      <TuiTd>harryhoudini@magic.com.au</TuiTd>
      <TuiTd>04123123123</TuiTd>
      <TuiTd>Spain</TuiTd>
    </TuiTr>
  </TuiTBody>
</TuiTable>

BIOS

System Time.........: System Date.........: Legacy Diskette A...: Legacy Diskette B...: Primary Master......: Primary Slave.......: Secondary Master....: Secondary Slave.....: Keyboard Features...: System Memory.......: Extended Memory.....: Boot-time Diagnostic:	Item Specified Help
	<Tab>, <Shift-Tab> or <Enter> selects field.

<TuiTable grid>
  <TuiTBody>
    <TuiTr>
      <TuiTd rowSpan={2} width="60%" class="blue-168-text">
        <br />System Time.........:<input type="text" class="tui-input white-168 black-text input-width" value="[09:21:30]" />
        <br />System Date.........:<input type="text" class="tui-input white-168 black-text input-width" value="[15/09/1994]" />
        <br />
        <br />Legacy Diskette A...:<input type="text" class="tui-input white-168 black-text input-width" value="[1.44/1.25 MB]" />
        <br />Legacy Diskette B...:<input type="text" class="tui-input white-168 black-text input-width" value="[disabled]" />
        <br />
        <br />Primary Master......:<input type="text" class="tui-input white-168 black-text input-width" value="[None]" />
        <br />Primary Slave.......:<input type="text" class="tui-input white-168 black-text input-width" value="[None]" />
        <br />Secondary Master....:<input type="text" class="tui-input white-168 black-text input-width" value="[CD-ROM]" />
        <br />Secondary Slave.....:<input type="text" class="tui-input white-168 black-text input-width" value="[None]" />
        <br />
        <br />Keyboard Features...:<input type="text" class="tui-input white-168 black-text input-width" value="[Enter]" />
        <br />
        <br />System Memory.......:<input type="text" class="tui-input white-168 black-text input-width" value="[640 KB]" />
        <br />Extended Memory.....:<input type="text" class="tui-input white-168 black-text input-width" value="[3568410 KB]" />
        <br />Boot-time Diagnostic:<input type="text" class="tui-input white-168 black-text input-width" value="[Enabled]" />
      </TuiTd>
      <TuiTd width="40%" class="center">Item Specified Help</TuiTd>
    </TuiTr>
    <TuiTr>
      <TuiTd width="25" height="448px">
        <br />&#60;Tab&#62;, &#60;Shift-Tab&#62; or &#60;Enter&#62; selects field.
      </TuiTd>
    </TuiTr>
  </TuiTBody>
</TuiTable>