크기

    Size configuration can significantly improve the visual representation of large amounts of data. In Ignite UI for Angular, we provide a pre-defined set of options:

    • large
    • medium
    • small

    --ig-size 사용자 정의 CSS 속성을 사용하면 애플리케이션 또는 구성 요소 수준에서 크기를 구성할 수 있습니다.

    Angular Size Example

    EXAMPLE
    MODULES
    TS
    HTML
    SCSS

    Like this sample? Get access to our complete Ignite UI for Angular toolkit and start building your own apps in minutes. Download it for free.

    자신의 프로젝트에서 Ignite UI for Angular 사용하려면 필요한 모든 종속성을 구성하고 프로젝트를 적절하게 설정했는지 확인하세요. 설치 항목에서 이를 수행하는 방법을 배울 수 있습니다.

    Usage

    애플리케이션/구성 요소 수준에서 크기 설정

    크기를 설정하려면--ig-size CSS 사용자 정의 속성을 사용하세요. 앞서 언급한 body 요소의 속성을 설정하여 앱의 모든 구성 요소 크기를 설정할 수 있습니다.

    --ig-size에 사용 가능한 값은--ig-size-small,--ig-size-medium--ig-size-large 입니다.

    body {
        --ig-size: var(--ig-size-small);
    }
    css

    구성요소 수준에서 크기를 설정하려면 요소 선택기를 대상으로 지정하세요. 예를 들어, 입력 그룹의 크기를 small로 설정하려면 다음을 수행할 수 있습니다.

    igx-input-group {
        --ig-size: var(--ig-size-small);
    }
    css

    Incorporating size in your own components and layouts

    Ignite UI for Angular--ig-size CSS 속성의 변경에 반응하는 레이아웃을 구현할 수 있는 몇 가지 Sass 함수와 믹스인을 노출합니다.

    다음은--ig-size 값에 따라 요소의 너비와 높이를 변경하는 방법에 대한 예입니다.

    <div class="my-elem"></div>
    html
    @use "igniteui-angular/theming" as *;
    
    .my-elem {
        // Make the element sizable
        @include sizable();
    
        // Define the default size of the element and hook it to the `--ig-size` property
        --component-size: var(--ig-size, var(--ig-size-large));
    
        // Define sizes for small (10px), medium (20px), and large (30px)
        --size: #{sizable(10px, 20px, 30px)};
        width: var(--size);
        height: var(--size);
    }
    scss

    이제--ig-size 값이 변경될 때마다.my-elem 크기가 변경됩니다.

    API References

    Sizing and Spacing Functions

    App Builder | CTA Banner

    Additional Resources

    우리 커뮤니티는 활동적이며 항상 새로운 아이디어를 환영합니다.