All Components

Appearance

The Animations enable you to use their default styling options or to set custom CSS classes both to all wrapper Animation elements and to all their child elements.

Default CSS Classes

By default, the parent component renders a k-animation-container CSS class and the child component renders a k-child-animation-container CSS class. You can use these CSS classes to style the components without the need to specify separate CSS classes.

<style>
 .k-animation-container {
   background-color: lightgray;
 }
 .k-animation-container > .k-child-animation-container {
   color: lightgray;
   background-color: #ff6757;
 }

 .content {
   width: 100px;
   padding: 10px;
   font-size: 13px;
   font-family: Helvetica, Arial, sans-serif;
   letter-spacing: 1px;
   text-align: center;
 }
 .example {
   display: flex;
 }
 </style>
class App extends React.Component {
    constructor(props) {
        super(props);

        this.state = { show: false };
    }

    onClick = () => {
        this.setState({
            show: !this.state.show
        });
    }

    render() {
        const { show } = this.state;

        const children = show ? (<div className="content">CONTENT</div>) : null;

        return (
            <div className="example">
                <div>
                    <dl>
                        <dt>
                            Slide:
                        </dt>
                        <dd>
                            <button className="k-button" onClick={this.onClick}>Animate</button>
                        </dd>
                    </dl>

                    <Slide>
                        {children}
                    </Slide>
                </div>
            </div>
        );
    }
}

ReactDOM.render(
    <App />,
    document.querySelector('my-app')
);

Customizing the Styles

By using custom CSS classes, you can customize:

Decorating the Parent

To set a custom CSS class to the parent Animation component, use either:

  • The className property, or
  • The style property.
<style>
 .content {
   width: 100px;
   padding: 10px;
   color: #787878;
   background-color: #fcf7f8;
   font-size: 13px;
   font-family: Helvetica, Arial, sans-serif;
   letter-spacing: 1px;
   text-align: center;
   border: 1px solid rgba(0,0,0,.05);
 }
 .example {
   display: flex;
 }

 .wrapper {
   border-color: transparent;
   transition: border-color 1s ease-in-out;
 }
 </style>
class App extends React.Component {
    constructor(props) {
        super(props);

        this.state = { show: false, color: 'red' };
    }

    onClick = () => {
        this.setState({
            show: !this.state.show
        });
    }

    onChange = (e) => {
        this.setState({
            color: e.target.value
        })
    }

    render() {
        const { show, color } = this.state;

        const children = show ? (<div className="content">CONTENT</div>) : null;
        const style = show ? { color: color, border: `1px solid ${color}` } : null;

        return (
            <div className="example">
                <div>
                    <dl>
                        <dd>
                            <dt>
                                Color:
                            </dt>
                            <dd>
                                <select name="color" onChange={this.onChange} value={color}>
                                    <option value="red">red</option>
                                    <option value="green">green</option>
                                    <option value="blue">blue</option>
                                </select>
                            </dd>
                        </dd>
                        <dt>
                            Slide:
                        </dt>
                        <dd>
                            <button className="k-button" onClick={this.onClick}>Animate</button>
                        </dd>
                    </dl>

                    <Slide className="wrapper" style={style}>
                        {children}
                    </Slide>
                </div>
            </div>
        );
    }
}

ReactDOM.render(
    <App />,
    document.querySelector('my-app')
);

Decorating the Child

To set a custom CSS class to the child Animation element, use either:

  • The componentChildClassName property, or
  • The componentChildStyle property.
<style>
 .child {
     border-width: 1px;
     border-style: solid;
     border-radius: 5px
 }

 .content {
   width: 100px;
   padding: 10px;
   font-size: 13px;
   font-family: Helvetica, Arial, sans-serif;
   letter-spacing: 1px;
   text-align: center;
   border: 1px solid rgba(0,0,0,.05);
 }
 .example {
   display: flex;
 }
 </style>
class App extends React.Component {
    constructor(props) {
        super(props);

        this.state = { show: false, index: 0 };
    }

    onClick = () => {
        this.setState({
            show: !this.state.show,
            index: this.state.show ? this.state.index + 1 : this.state.index
        });
    }

    render() {
        const { show, index } = this.state;

        const children = show ? (<div className="content">CONTENT</div>) : null;
        const childStyle = index % 2 === 0
        ? { backgroundColor: 'lightgray', borderColor: '#ff6757', color: '#ff6757'}
        : { backgroundColor: '#ff6757', borderColor: 'lightgray', color: 'lightgray'}

        return (
            <div className="example">
                <div>
                    <dl>
                        <dt>
                            Slide:
                        </dt>
                        <dd>
                            <button className="k-button" onClick={this.onClick}>Animate</button>
                        </dd>
                    </dl>

                    <Slide
                        componentChildClassName="child"
                        componentChildStyle={childStyle}
                        >
                        {children}
                    </Slide>
                </div>
            </div>
        );
    }
}

ReactDOM.render(
    <App />,
    document.querySelector('my-app')
);
In this article