## # Styling

Style mixin allows you to use attributes to control element appearance. Responsive modifier prefixes can be attached to some of the attributes to control appearance on various devices.

### # Using attributes

All Noah components use the Styling mixin, hence you can simply pass the attributes, when rendering the component.

    <n-button primary outlined>Button</n-button>

    <n-div padding="large" text-size="large" text-align="center">
        Large padded text aligned to the center
    </n-div>

You can use `sm:`, `md:`, `lg:` and `xl:` modifier prefixes to target specific devices.

    <n-div padding="small" md:padding="large" lg:padding="xlarge">Content</n-div>

### # Attribute Whitelist

Attribute | Resulting Class Prefix | Resulting Class | Responsive
--- | --- | --- | ---
neutral | color- |  |
primary | color- |  |
secondary | color- |  |
success | color- |  |
danger | color- |  |
warning | color- |  |
notice | color- |  |
black | color- |  |
white | color- |  |
grey | color- |  |
xsmall | size- |  |
small | size- |  |
medium | size- |  |
large | size- |  |
xlarge | size- |  |
xxlarge | size- |  |
color | color- |  |
size | size- |  |
text text-color text-size | text- |  |
bg bg-color | bg- |  |
circle | radius- |  |
outlined |  | outlined |
ghost |  | ghost |
text-align align | align- |  |
padding pad | p- |  |
padding-x pad-x px | px- |  |
padding-y pad-y py | py- |  |
padding-top pad-t pt | pt- |  |
padding-bottom pad-b pb | pb- |  |
padding-left pad-l pl | pl- |  |
padding-right pad-r pr | pr- |  |
margin | m- |  |
margin-x mx | mx- |  |
margin-y my | my- |  |
margin-top mt | mt- |  |
margin-bottom mb | mb- |  |
margin-left ml | ml- |  |
margin-right mr | mr- |  |
container |  | n-container |
flex |  | n-flex |
stacked stretched unwrapped divided | flex- |  |
gap | flex-gap- |  |
gravity right-top right-center right-bottom center-top center-center center-bottom left-top left-center left-bottom | flex-gravity- |  |
col |  | n-col |
narrow auto none 1 2 3 4 5 6 7 8 9 10 11 12 | col- |  |
span | col- |  |
spinner |  | n-spinner |

### # Configuration

You can configure whitelisted attributes, as well as provide a custom class map to match your CSS framework, via the config object.

    import Vue from 'vue';
    import NoahUi from 'noah-ui';
    import config from 'noah-ui/src/noah.config';

    config.style.whitelist.push(
        // Let's define a rule, which will accept `corners="$size"` attribute, and transform it into
        // `.radius-$size` CSS class
        // <n-div md:corners="medium"> will become <div class="md:radius-medium">
        {
            // Pass the attributes (aliases) you want the directive to process
            attr: ['corners'],

            // Specifies what class prefix should be used
            classPrefix: 'radius-',

            // Enable responsive/viewport prefixes, such as sm: md: lg: xl:
            responsive: true,
        },

        // If you are not expecting the attribute to have a value, you can specify the target class
        // <n-div circle> will become <div class="my-circle">
        {
            attrs: ['circle', 'circled'],
            class: 'my-circle',
        }
    );

    Vue.use(NoahUi, config);

Please note that if you have configured the component level `modifierPrefix` config value, it will take precedence of `classPrefix`.

    import Vue from 'vue';
    import NoahUi from 'noah-ui';
    import config from 'noah-ui/src/noah.config';

    config.components.NButton.modifierPrefix = 'btn-';

    config.style.whitelist.push({
            attrs: ['foo'],
            classPrefix: 'foo-',
    });

    // When you render <n-div foo="bar"> you will get <div class="foo-bar">
    // When rendering <n-button foo="bar">you will get <button class="btn-bar">

    Vue.use(NoahUi, config);

You can use `classMap` property on the global config as well as component config to replace a filtered class completely.

    import Vue from 'vue';
    import NoahUi from 'noah-ui';
    import config from 'noah-ui/src/noah.config';

    config.components.NButton.classMap = { 'foo-bar': 'my-component-class' };

    config.style.classMap = { 'foo-bar': 'my-global-class' };

    // When you render <n-div foo="bar"> you will get <div class="my-global-class">
    // When rendering <n-button foo="bar">you will get <button class="my-component-class">

    Vue.use(NoahUi, config);

You can use styling mixin to create a flex container.

    <n-div flex center-center lg:left-center>
        <n-div col sm:12 md:6 lg:3></div>
        <n-div col sm:narrow></div>
        <n-div col sm:auto md:6 lg:narrow></div>
    </div>

Styling mixin allows you to control columns/spans within a flex container.

    <n-div flex>
        <n-div col sm:12 md:6 lg:3></div>
        <n-div col sm:narrow></div>
        <n-div col sm:auto md:6 lg:narrow></div>
    </div>