Skip to main content

Styling

The SVAR library provides you with several predefined skins to make your application look stylish and up-to-date. They are:

  1. Material
  2. Willow
  3. WillowDark

Calendars with skins

Related sample: Calendar Material skin

Related sample: Calendar Willow skin

Related sample: Calendar WillowDark skin

Pay attention

It is important to apply one of the skins to a control. Otherwise, it won't be rendered correctly.

Using skins​

The code of each skin is provided in a separate Svelte file. You should include the source file of the chosen skin into the <script> part of the app:

<script>
    import { Material } from "wx-svelte-core";
</script>

After you've included the desired skin and a control on a page, you need to wrap the control in the skin's tags like this:

<script>
    import { Calendar, Material } from "wx-svelte-core";
</script>

<div style="width:300px">
    <Material>    
        <Calendar />
    </Material>
</div>

Using different skins for control instances​

In case you need to render several instances of a control, each of which has its own skin applied, you should wrap each of them in the tags of a corresponding skin.

Note

Don't forget to include all the applied skins on the app's page.

<script>
    import { Calendar, Material, Willow, WillowDark } from "wx-svelte-core";
</script>

<div class="demo-box" style="width: 350px; display: flex; flex-direction: row;">
    <Material>    
        <Calendar />
    </Material>
    <Willow>
        <Calendar />
    </Willow>
    <WillowDark>
        <Calendar />
    </WillowDark>
</div>

Calendars with skins

Related sample: Calendar Material skin

Related sample: Calendar Willow skin

Related sample: Calendar WillowDark skin

Disabling fonts​

Whenever you need to disable the fonts used in a skin, you can make use of the fonts property of the skin and set it to the false value:

<script>
    import { Calendar, Material } from "wx-svelte-core";
</script>

<div style="width:300px">
    <Material fonts={false}>    
        <Calendar />
    </Material>
</div>
Pay attention

Please note that if you switch the default fonts off, you will have to include the fonts you need by yourself.